Elementos semánticos = elementos con significado
¿Qué son los elementos semánticos?
Un elemento semántico describe claramente su significado, tanto para el navegador como para el desarrollador.
Elementos no semánticos (sin significado):
<div>y<span>. No dicen nada sobre su contenido.Elementos semánticos (con significado):
<form>,<table>,<article>, etc. Claramente definen su contenido.
Elementos semánticos
Muchos sitios web utilizan código HTML como: <div id="nav"> <div class="header"> <div id="footer"> para indicar navegación(navbar), encabezado(header) y pie de página(footer).
En HTML hay algunos elementos semánticos que se pueden utilizar para definir diferentes parte de una página web:
| Etiqueta | Descripción |
<article> | Define contenido independiente y autónomo |
<aside> | Define contenido de apoyo al contenido principal de la página |
<details> | Define detalles adicionales que el usuario puede ver u ocultar |
<figcaption> | Define un título para un elemento <figure> |
<figure> | Especifica contenido independiente, como ilustraciones, diagramas, fotos, listas de códigos, etc |
<footer> | Define un pie de página para un documento o sección |
<header> | Especifica un encabezado para un documento o sección |
<main> | Especifica el contenido principal de un documento |
<mark> | Define el texto marcado/resaltado |
<nav> | Define enlaces de navegación |
<section> | Define una sección en un documento |
<summary> | Define un encabezado visible para un elemento <details> |
<time> | Define una fecha/hora |
Mira la lista completa de etiquetas en: HTML Reference
El elemento <section>
El elemento <section> define una sección en un documento.
De acuerdo con la documentación HTML de la W3C: "Una sección es una agrupación temática de contenido, generalmente con un encabezado".
Ejemplos donde un elemento <section> se puede utilizar:
Capítulos
Introducción
Artículos de noticias
Información de contacto
Normalmente, una página web se divide en secciones: introducción, contenido e información de contacto.
Ejemplo:
<section>
<h2>Funciones populares</h2>
<ul>
<li>
<a href="https://www.hubspot.es/products/sales/schedule-meeting">
App gratuita para programar reuniones</a>
</li>
<li>
<a href="https://www.hubspot.es/products/marketing/social-inbox">
Herramientas de redes sociales</a>
</li>
<li>
<a href="https://www.hubspot.es/products/sales/email-tracking">
Software de seguimiento de emails</a>
</li>
</ul>
</section>
El elemento <article>
El elemento <article> especifica contenido independiente y autónomo.
Un artículo debe tener sentido por sí mismo y debe ser posible distribuirlo independientemente del resto del sitio web.
Ejemplos donde un elemento <article> se puede utilizar:
Foros
Artículos de blog
Comentarios
Tarjeta de productos
Boletín de noticias
Ejemplo:
<article>
<figure>
<a href="#">
<img src="employerbranding.jpeg" alt="Employer branding: qué es, ejemplos y cómo aplicarlo con éxito">
</a>
</figure>
<div>
<h3>
<a href="#">
Employer branding: qué es, ejemplos y cómo aplicarlo con éxito
</a>
</h3>
<div>
<a href="#">Marketing </a>
<a href="#">| Lectura de 17 min.</a>
</div>
</div>
</article>
¿Anidar <article> dentro de <section> ?
El elemento <article> especifica contenido independiente y autónomo.
El elemento <section> define una sección en un documento.
Entonces,
¿Podemos usar sus definiciones para decidir cómo anidar estos elementos? ¡No podemos!
Por lo tanto, encontrarás páginas HTML con elementos <section> que contienen elementos <article> y elementos <article> que contienen elementos <section>.
El elemento <header>
El elemento <header> representa un contenedor de contenido introductorio o un conjunto de enlaces de navegación.
Un elemento <header> normalmente contiene:
Uno o más elementos de encabezado (
<h1>-<h6>)Logo o ícono
Información del autor
Nota: Puedes tener muchos elementos
<header>en un documento HTML. Sin embargo,<header>no puede ir dentro de<footer>,<address>, u otro elemento<header>.
Ejemplo:
<header class="menu">
<nav class="menu__secundario">
<ul>
<li><a href="#">Iniciar sesión</a></li>
<li><a href="#">Soporte del producto</a></li>
<li><a href="#">Compañia</a></li>
<li><a href="#">Contáctenos</a></li>
<li><a href="#">Español</a></li>
</ul>
</nav>
<nav class="menu__primario">
<ul>
<li><a href="#">Productos</a></li>
<li><a href="#">Precios</a></li>
<li><a href="#">Soluciones</a></li>
<li><a href="#">Demostración</a></li>
<li><a href="#">Recursos</a></li>
<li><a href="#">Prueba gratuita</a></li>
</ul>
</nav>
</header>
El elemento <footer>
El elemento <footer> define un pie de página para un documento o sección.
Un elemento <footer> normalmente contiene:
Información de autor
Información sobre derechos de autor
Información de contacto
Mapa del sitio (
sitemap)Documentos relacionados
Puedes tener muchos elementos <footer> en un documento.
Ejemplo:
<footer>
<div>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Linkedin</a></li>
<li><a href="#">Pinterest</a></li>
</ul>
</div>
<div>
<a href="#">Términos del servicio</a>
<a href="#">Política de privacidad</a>
<a href="#">Colombia</a>
</div>
</footer>
El elemento <nav>
El elemento <nav> define un conjunto de enlaces de navegación.
Ten en cuenta que NO todos los enlaces de un documento deben estar dentro de un elemento
<nav>. El elemento<nav>está diseñado solo para bloques principales de enlaces(menú) de navegación.Los navegadores, así como los lectores de pantalla para usuarios discapacitados, pueden usar este elemento(
<nav>) para determinar si omitir la representación inicial de este contenido.
Ejemplo:
<nav>
<div class="logo">
<img src="#" alt="Logo">
</div>
<div class="navbar">
<ul>
<li><a href="#">Challenges</a></li>
<li><a href="#">Solution</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Unlock</a></li>
</ul>
</div>
</nav>
El elemento <aside>
El elemento <aside> define algún contenido además del contenido en el que se coloca (como una barra lateral).
El contenido <aside> debe estar indirectamente relacionado con el contenido de la página.
Ejemplo:
<aside>
<div>
<script>Ads de Google</script>
</div>
<div>
<script>Estadisticas redes sociales</script>
</div>
<input type="text">
<button>Suscribirse</button>
<div>
<script>Ads de Google</script>
</div>
</aside>
Elementos <figure> y <figcaption>
La etiqueta <figure> especifica contenido independiente, como ilustraciones, diagramas, fotos, listas de códigos, etc.
La etiqueta <figcaption> define un título para un elemento <figure>. El elemento <figcaption> se puede colocar como el primero o como el último hijo de un elemento <figure>.
El elemento <img> define la imagen/ilustración real.
Ejemplo:
<article>
<figure>
<a href="#">
<div>
<img src="#" alt="El terremoto del lunes devastó la ciudad de Nurdagi en el sur de Turquía.">
</div>
</a>
<figcation>Khalil Hamra/Associated Press</figcation>
</figure>
</article>
¿Por qué elementos semánticos?
Según la W3C: "Una Web semántica permite que los datos se compartan y reutilicen entre aplicaciones, empresas y comunidades".
Resumen
La semántica en HTML se refiere a utilizar los elementos correctos según el contenido que se desea mostrar, y que sean entendibles para el navegador y el desarrollador.
Traducido con 💚 desde W3Schools.com