Instrucciones de estructura en HTML 5

Instrucciones de estructura en HTML 5

Instrucciones de estructura en HTML 5

Con la llegada de HTML 5, se tienen a disposición una serie de nuevas instrucciones que ayudan a identificar claramente algunos elementos que componen la página web, el uso de estas instrucciones de estructura en HTML 5 hace que el código luzca mas claro y sea mas sencilla su edición.

Instrucciones de estructura en HTML 5

Encabezado (Header)
<header></header>

Elemento en bloque Elemento en bloque

Delimita el código empleado para el encabezado de la página.

See the Pen header by Miguel Méndez (@codigo-web) on CodePen.0

Pie(Footer)
<footer></footer>

Elemento en bloque Elemento en bloque

Delimita el código empleado para el pie de página.

See the Pen footer by Miguel Méndez (@codigo-web) on CodePen.0

Navegación (Navigation)
<nav></nav>

Elemento en bloque Elemento en bloque

Delimita el código utilizado para la navegación del sitio.

See the Pen nav by Miguel Méndez (@codigo-web) on CodePen.0

Sección (Section)
<section></section>

Elemento en bloque Elemento en bloque

Delimita el código que representa una sección de la página, esta puede tener varias secciones.

See the Pen section by Miguel Méndez (@codigo-web) on CodePen.0

Artículo (Article)
<article></article>

Elemento en bloque Elemento en bloque

Delimita el código que representa un artículo de la página. Un artículo se reconoce por ser un elemento que podría ser un documento en sí, es decir, puede tener un encabezado, un cuerpo y un pie. Por ejemplo, un artículo de revista, blog o periódico.

See the Pen article by Miguel Méndez (@codigo-web) on CodePen.0

A un lado (Aside)
<aside></aside>

Elemento en bloque Elemento en bloque

Delimita el código que representa un contenido secundario y tiene dos usos principales:

  • Cuando se emplea dentro de un artículo, para indicar, por ejemplo, un glosario de términos empleados en el artículo.
  • Cuando se emplea fuera de un artículo, para mostrar contenido relacionado a la página en general, como podría ser un menú de navegación secundario o un bloque de publicidad.

See the Pen aside by Miguel Méndez (@codigo-web) on CodePen.0

Grupo de encabezado (Heading group)
<hgroup></hgroup>

Elemento en bloque Elemento en bloque

Delimita el código de dos o más encabezados (<h1></h1> a <h6></h6>), con el objetivo de que sean tratados como un solo elemento.

See the Pen hgroup by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

Utilizando estas instrucciones de estructura en HTML 5 evitamos utilizar una y otra vez la instrucción div, logrando un código mas limpio y fácil de leer.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz