Original article: https://www.freecodecamp.org/news/semantic-html5-elements/
Los elementos semánticos HTML son aquellos que describen claramente su significado de una manera legible por humanos y máquinas.
Elementos tales como <header>, <footer> y <article> son considerados semánticos porque describen con precisión el propósito del elemento y el tipo de contenido que hay dentro de ellos.
¿Qué son los Elementos Semánticos?
HTML fue creado originalmente como lenguaje de código para describir documentos en los comienzos de internet. A medida que internet crecía y fue adoptado por más gente, sus necesidades cambiaron.
Donde internet estaba destinado para compartir documentos científicos, ahora la gente también quería compartir otras cosas. Muy rápidamente, la gente comenzó a querer que la web se viera mejor.
Debido a que la web no se creó inicialmente para ser diseñada, los programadores usaron diferentes trucos para hacer que las cosas estén dispuestas en diferentes maneras. En lugar de usar <table></table> para describir información usando una tabla, los programadores las usarían para posicionar otros elementos en una página.
A medida que avanzaba el uso de maquetaciones visualmente diseñadas, los programadores comenzaron a usar una etiqueta genérica "no semántica" como <div>. A menudo les darían a estos elementos un atributo class o id para describir su propósito. Por ejemplo, en lugar de <header> esto era a menudo escrito como <div class="header">.
Como HTML5 es todavía relativamente nuevo, este uso de elementos no semánticos sigue siendo muy común en los sitios web de hoy.
Listado de nuevos elementos semánticos
Los elementos semánticos agregados a HTML5 son:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Elementos tales como <header>, <nav>, <section>, <article>, <aside>, y <footer> actúan más o menos como elementos <div>. Ellos agrupan otros elementos en secciones de página. Sin embargo, donde una etiqueta <div> puede contener cualquier tipo de información, es fácil identificar qué tipo de información iría dentro de una región semántica <header>.
Un ejemplo de diseño de elementos semánticos por w3schools
¿Por qué usar elementos semánticos?
Para ver los beneficios de los elementos semánticos, aquí hay dos fragmentos de código HTML. Este primer bloque de código usa elementos semánticos:
<header></header>
<section>
<article>
<figure>
<img>
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>Mientras que el segundo bloque de código usa elementos no semánticos:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img>
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>Primero, es mucho más fácil de leer. Esto probablemente sea lo primero que vas a notar al mirar al primer bloque de código que usa elementos semánticos. Este es un pequeño ejemplo, pero como programador puedes estar leyendo cientos o miles de líneas de código. Cuanto más fácil sea de leer y entender ese código, más fácil será tu trabajo.
Tiene una mayor accesibilidad. No eres el único al que le resultan más fáciles de comprender los elementos semánticos. Los buscadores y tecnologías de asistencia (como lectores de pantalla para usuarios con discapacidad visual) también pueden entender mejor el contexto y contenido de tu sitio web, lo que significa una mejor experiencia para tus usuarios.
En general, los elementos semánticos también pueden conducir a código más coherente. Al crear un encabezado usando elementos no semánticos, diferentes programadores pueden escribir esto como <div class="header">, <div id="header">, <div class="head">, o simplemente <div>. Hay muchas formas de crear un elemento de encabezado y todas dependen de las preferencias personales del programador. Al crear un elemento semántico estándar, lo hace más fácil para todos.
Desde octubre 2014, se actualizó HTML4 a HTML5, junto con algunos nuevos elementos "semánticos". Hasta el día de hoy, es posible que algunos de nosotros aún no sepamos por qué tantos elementos diferentes que no parecen mostrar cambios importantes.
<section> y <article>
“¿Cuál es la diferencia?”, te podrías preguntar. Ambos elementos son utilizados para seccionar un contenido, y sí, definitivamente se pueden usar de manera intercambiable. Depende de la situación. HTML4 ofrecía solo un tipo de elemento contenedor, que es <div>. Si bien todavía se usa en HTML5, HTML5 nos proporciona una forma de reemplazar <div> con <section> y <article>.
Los elementos <section> y <article> son conceptualmente similares e intercambiables. Para poder decidir cual debes usar, toma nota de lo siguiente:
- Un artículo está destinado a ser independientemente distribuible o reutilizable.
- Una sección es una agrupación temática de contenido.
<section>
<p>Historias destacadas</p>
<section>
<p>Noticias</p>
<article>Noticia 1</article>
<article>Noticia 2</article>
<article>Noticia 3</article>
</section>
<section>
<p>Deportes</p>
<article>Noticia 1</article>
<article>Noticia 2</article>
<article>Noticia 3</article>
</section>
</section><header> y <hgroup>
El elemento <header> se encuentra casi siempre en la parte superior de un documento, una sección, o un artículo, y contiene generalmente el encabezado principal y alguna navegación y herramientas de búsqueda.
<header>
<h1>Empresa A</h1>
<ul>
<li><a href="/inicio">Inicio</a></li>
<li><a href="/sobre-nosotros">Sobre Nosotros</a></li>
<li><a href="/contacta">Contacta con nosotros</a></li>
</ul>
<form target="/buscar">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>El elemento <hgroup> debe ser usado donde quieras un encabezado principal con uno o más sub encabezados.
<hgroup>
<h1>Encabezadpo1</h1>
<h2>Subencabezado 1</h2>
<h2>Subencabezado 2</h2>
</hgroup>RECUERDA que el elemento <header> puede contener cualquier contenido, pero el elemento <hgroup> solo puede contener otros encabezados, esto es <h1> hasta <h6> incluso <hgroup>.
<aside>
El elemento <aside> está diseñado para el contenido que no forma parte del flujo del texto en el que aparece, sin embargo, sigue relacionado de alguna manera. De esta forma quedaría este <aside> como barra lateral a tu contenido principal.
<aside>
<p>Esta es una barra lateral, por ejemplo, una definición de terminología o un breve resumen de una figura histórica.</p>
</aside>Antes de HTML5, nuestros menús eran creados con <ul>’s y <li>’s. Ahora, junto a estos, podemos separar nuestros ítems de menú con un <nav>, para la navegación entre tus páginas. Puedes tener cualquier cantidad de elementos <nav> en la página, por ejemplo, es común tener una navegación global a lo largo de la parte superior (en el <header>) y navegación local en una barra lateral (en un elemento <aside>).
<nav>
<ul>
<li><a href="/inicio">Inicio</a></li>
<li><a href="/sobre-nosotros">Sobre Nosotros</a></li>
<li><a href="/contacta">Contacta con nosotros</a></li>
</ul>
</nav><footer>
Si existe un <header> debe existir un <footer>. Un <footer> por lo general se encuentra en la parte inferior del documento, una sección, o un artículo. Tal como él, <header> el contenido es generalmente meta-información, como detalles del autor, información legal, y/o enlaces a información relacionada. También es válido incluir elementos <section> dentro del pie de página.
<footer>©Empresa A</footer><small>
El elemento <small> a menudo aparece dentro de un elemento <footer> o <aside> el cual en general contendría información de derechos de autor o avisos legales y otra letra chica. Sin embargo, esto no pretende hacer el texto más pequeño. Simplemente, describe su contenido, no prescribe la presentación.
<footer><small>©Empresa A</small> Fecha</footer><time>
El elemento <time> nos permite adjuntar una fecha ISO 8601 no ambigua a una versión legible por humanos de esa fecha.
<time datetime="2017-10-31T11:21:00+02:00">Martes, 31 de Octubre 2017</time>¿Por qué molestarse con <time>? Si bien los humanos pueden leer el tiempo que puede eliminar la ambigüedad a través del contexto de una manera normal, las computadoras pueden leer la fecha ISO 8601 y ver la fecha, hora y zona horaria.
<figure> y <figcaption>
<figure> es para envolver el contenido de su imagen a su alrededor, y <figcaption> es para subtitular tu imagen.
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Sombras de Mordor" />
<figcaption>Portada de La Tierra Media: Sombras de Mordor</figcaption>
</figure>