¿Qué es HTML y sus tags? Elementos a nivel de bloque

¿Qué es HTML y sus tags? Parte 3: elementos a nivel de bloque

Este artículo es parte de una serie de cinco artículos sobre HTML y sus tags:

1. ¿Que és HTML y sus tags? Estructura básica
2. ¿Que és HTML y sus tags? Elementos inline
3. ¿Que és HTML y sus tags? Block-level
4. ¿Que és HTML y sus tags? Elementos de un formulario
5. ¿Que és HTML y sus tags? Atributos de los elementos

En el artículo anterior vimos qué son los elementos inline y cómo se comportan, ahora pasemos a otro tema para entender qué son y cuales son los elementos block level.

Elementos block level

Los elementos a "nivel de bloque" ocupan todo el espacio de su elemento padre (container).

< header >

Define el encabezado de la página, generalmente en el encabezado identificamos el sitio, con el logo.

< main >

Comprende el contenido principal del cuerpo de la página.

< footer >

Define el contenido o el final de la página, el pie de página, generalmente ponemos contactos, redes sociales, direcciones, información "institucional" en general.

< section >

Dentro del contenido principal, esta tag comprende una sección de página.

< article >

Incluir un artículo de página, muy utilizado en blogs y páginas de creación de contenidos, también indica el contenido textual principal de la página.

< aside >

Representa una sección que hace referencia a otro contenido de la página, como una definición, una explicación adicional, advertencias, biografía del autor , o sea, contenido complementario.

< nav >

Contempla el menú de navegación de las páginas del sitio, y dentro insertamos la lista y links con la tag <a href=""></a>.

< div >

Al igual que las otras tags, también funciona como container, pero la gran diferencia es que el div no tiene valor semántico, es solo una división de la página con fines de layout.

< p >

Representa un párrafo.

< h1 >...< h6 >

La familia de encabezamiento o headings, define los títulos de la página. Este grupo de elementos tiene un alto valor semántico y una organización jerárquica, yendo de <h1> a <h6>, es decir, la h1 de mayor valor semántico y la h6 de menor valor semántico.

< hr >

Esta tag construye una línea horizontal entre elementos, lo que representa semánticamente una ruptura de contenido.

< video >

Utilizada para insertar videos en un sitio web, la etiqueta tiene atributos como width que recibe como valor el ancho del video en píxeles, heightque recibe como valor la altura del video en píxeles. En caso de no proporcionarse estos atributos, se utilizará el ancho y la altura patrón del video. El atributo controls (cuando está presente) nos permite controlar el video. El atributo src recibe como valor el enlace o directorio del archivo de video.

<video src="" controls></video>

Vea el resultado.

Continua...

En este artículo vimos qué son los elementos block level y cuales son estos elementos, en el próximo capítulo veremos qué elementos podemos usar para componer un formulario.

• [El que es el HTML y sus tags: elementos de un formulario]()

Beatriz Moura

Estudiante de Análisis y Desarrollo de Sistemas, cambié el área de la salud y me sumergí en programación. Apasionada por desarrollo Front-end y aficionada al UX/UI Design. Descubrí la pasión por enseñar al hacer mentorías durante otra graduación, donde fui presidenta de la Liga Académica y Directora de Medios en el Directorio Académico. Actualmente soy instructora y Desarrolladora de Software en Alura y ya hice parte del Scuba Team Front-end.

Traducido para Alura Latam por Ingrid da Silva