Elementos como <header></header>, <footer></footer>, <section><section></section></section>/, <nav></nav> y <article></article> ahora funciona más como elementos <div></div> tradicionales con HTML5. Estos elementos principales actúan como macroestructura semántica del código HTML a para ayudar a mantener las etiquetas del código HTML comunes adicionales en el orden y el lugar adecuados.
<article></article> y <section></section>
Ambos elementos a menudo se pueden usar para administrar las mismas secciones y emplearse indistintamente. Sin embargo, es importante tener en cuenta que la etiqueta <article></article> es útil para reutilizarse y también se considera distribuible de forma independiente. Una etiqueta <section></section>, por otro lado, se usa típicamente para agrupar más de una pieza o sección de contenido.
La sección de encabezado de un sitio web generalmente se encuentra en la parte superior este. El encabezado de un sitio web a menudo incluirá información de metaetiquetas, palabras clave e incluso archivos CSS u hojas de estilo importados. El encabezado también puede establecer las bases necesarias para el diseño de tu sitio web.
El <footer></footer> funciona de forma similar al <header></header>, salvo que el pie de página por lo general se encuentra en la parte inferior de cualquier página web. El pie de página de un sitio web casi siempre incluye información de contacto, un mapa del sitio y enlaces adicionales, como los de las redes sociales, para ayudar a unificar el sitio web e impulsar el SEO.
<main></main>
Cuando eliges usar la etiqueta de elemento <main></main>, te refieres al cuerpo principal del texto o contenido del diseño de un sitio web. Usa la etiqueta <main></main> solo para alojar los párrafos internos, el texto escrito, las imágenes y el contenido interno de tu sitio web. La etiqueta <main></main> siempre llegará después de que la etiqueta del <header></header> se haya introducido y antes de la etiqueta del <footer></footer> de cualquier página.
<nav></nav>
Desarrollar un sitio web exitoso requiere una sección de navegación accesible y actualizada. Cuando estés creando un sitio web de cualquier tipo, deberás agregar enlaces de navegación para ayudar a los usuarios a navegar correctamente por tu sitio. El uso de la etiqueta <nav></nav> ayuda a organizar la sección específica de un sitio designado para enlaces de navegación. Todos los menús, tablas e índices de navegación son posibles con la etiqueta semántica <nav></nav> HTML5.
Si estás creando contenido y quieres envolver imágenes con texto, puedes usar las etiquetas <figure></figure> y <<figcaption></figcaption>. La etiqueta <figure></figure> envuelve las imágenes alrededor de tu contenido de texto sin ningún esfuerzo adicional. Si te interesa agregar una leyenda a la imagen que estás implementando en tu página, puedes usar la etiqueta <figcaption></figcaption>. A continuación se muestra un ejemplo de cómo utilizar las etiquetas <figure></figure> y <figcaption></figcaption>:
<figure><img src="http://www.yourimage.com"><figcaption>¡Este es el pie de foto de mi imagen!</figcaption></figure>
<aside></aside>
Usar un elemento <aside></aside> incorporará texto que no pertenece a las secciones principales de tu sitio web, pero que debería aparecer en un área o sección establecida.
<time></time>
La etiqueta <time></time> es útil si deseas agregar una fecha automática a una sección o área de tu sitio web.
Se puede encontrar una lista completa de todas las etiquetas de código HTML directamente en el sitio web oficial de W3 Schools.
