Que son elementos semánticos
Un elemento semántico describe claramente su significado tanto para el navegador como para el desarrollador. Ejemplos de elementos no semánticos: <div> y <span>: no dice nada sobre su contenido. Ejemplos de elementos semánticos: <form>, <table> y <article> – Define claramente su contenido.
Elementos semánticos en HTML
Muchos sitios web contienen código HTML como: <div id=»nav»> <div class=»header»> <div id=»footer»> para indicar navegación, encabezado y pie de página.
En HTML hay algunos elementos semánticos que se pueden usar para definir diferentes partes de una página web:
El elemento <section>
El elemento <section> define una sección en un documento. De acuerdo con la documentación HTML de W3C: «Una sección es una agrupación temática de contenido, generalmente con un encabezado». Ejemplos de dónde se puede usar un elemento <section>:
- Capítulos
- Introducción
- Noticias
- Información de contacto
Normalmente, una página web se puede dividir en secciones para la introducción, el contenido y la información de contacto.
El elemento <article>
El elemento <article> especifica contenido independiente. Un artículo debe tener sentido por sí mismo y debe ser posible distribuirlo independientemente del resto del sitio web. Ejemplos de dónde se puede usar el elemento <article>:
- Mensajes del foro
- Publicaciones de blog
- Comentarios del usuario
- Tarjetas de productos
- Artículos del periódico
Anidar <article> en <section> o viceversa
El elemento <article> especifica contenido independiente e independiente. El elemento <section> define la sección en un documento. ¿Podemos usar las definiciones para decidir cómo anidar esos 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>)
- logotipo o icono
- información de autoría
Nota: Puedes tener varios elementos <header> en un documento HTML. Sin embargo, <header> no se puede colocar dentro de un <footer>, <address> u otro elemento <header>.
Ejm
<!DOCTYPE html>
<html>
<body>
<article>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's
natural environment, and build a future in which humans live
in harmony with nature.</p>
</article>
</body>
</html>
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ía
- Información registrada
- Información del contacto
- Mapa del sitio
- Volver a los enlaces superiores
- Documentos relacionados
Puedes encontrar diferentes <footer> en un documento HTML.
El elemento <nav>
El elemento <nav> define un set 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 el bloque principal de enlaces de navegación. Los navegadores, como los lectores de pantalla para usuarios discapacitados, pueden usar este elemento para determinar si omitir la representación inicial de este contenido.
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 circundante.
Los 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.
Ejm
<!DOCTYPE html>
<html>
<body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique conical houses
(Trulli) found in the area around Alberobello, a declared UNESCO
World Heritage Site.</p>
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
</body>
</html>
Por qué elementos semánticos
Según el W3C: «Una Web semántica permite que los datos se compartan y reutilicen entre aplicaciones, empresas y comunidades».