Elementos semánticos de HTML5

La semántica (de origen griego) se puede definir como el estudio del significado del lenguaje.

Los elementos semánticos son elementos con significado.

¿Qué son los elementos semánticos?

Los elementos semánticos describen claramente su significado para los navegadores y los desarrolladores.

No semánticoEjemplos de elementos: <div> y <span> - no proporcionan información sobre su contenido.

SemánticaEjemplos de elementos: <form>, <table> y <img> - definen claramente su contenido.

Compatibilidad del navegador

Sí Sí Sí Sí Sí

Todos los navegadores modernos soportan los elementos semánticos de HTML5.

Además, puedes "ayudar" a los navegadores antiguos a manejar "elementos desconocidos".

Aprende más sobre este capítulo en navegadores HTML5.

Los nuevos elementos semánticos de HTML5

Muchos sitios web incluyen código HTML que indica la navegación, la cabecera y el pie de página, como estos: <div id="nav"> <div class="header"> <div id="footer">.

HTML5 ofrece nuevos elementos semánticos para definir diferentes partes de la página.

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Elementos semánticos de HTML5

Elementos semánticos de HTML5

Elemento <section> de HTML5

El elemento <section> define una sección en el documento.

De acuerdo con la documentación de HTML de W3C: "Una sección (section) es un grupo de contenido con un tema, generalmente con un título."

Se puede dividir la página principal del sitio web en secciones como presentación, contenido, información de contacto, etc.

Ejemplo

<section>
   <h1>WWF</h1>
   <p>Fondo Mundial para la Naturaleza (WWF) es....</p>
</section>

Prueba personalmente

Elemento <article> de HTML5

El elemento <article> define un contenido autocontenido independiente.

Un documento tiene su propio significado y puede leerse independientemente del resto del contenido del sitio.

Aplicaciones del elemento <article>:

  • Foro
  • Blog
  • Noticias

Ejemplo

<article>
   <h1>¿Qué hace WWF?</h1>
   <p>Misión de WWF: detener la degradación del entorno natural de nuestro planeta,</p>
  y construir un futuro en el que los seres humanos vivan en armonía con la naturaleza.</p>
</article>

Prueba personalmente

Elementos semánticos anidados

En el estándar HTML5, el elemento <article> define un bloque de elementos relacionados autocontenidos.

El elemento <section> se define como un bloque de elementos relacionados.

¿Podemos usar esta definición para decidir cómo anidar elementos? No, no podemos!

En Internet, encontrarás páginas HTML con elementos <section> que contienen elementos <article>, y páginas con elementos <article> que contienen elementos <sections>.

También encontrarás elementos <section> que contienen elementos <section>, y elementos <article> que contienen elementos <sections>.

Elemento <header> de HTML5

El elemento <header> define un encabezado para un documento o sección.

El elemento <header> debe usarse como contenedor de contenido introductorio.

Un documento puede tener varios elementos <header>.

A continuación, se muestra un ejemplo de cómo definir un encabezado en un artículo:

Ejemplo

<article>
   <header>
     <h1>¿Qué hace WWF?</h1>
     <p>Misión de WWF:</p>
   </header>
   <p>Misión de WWF: detener la degradación del entorno natural de nuestro planeta,</p>
  y construir un futuro en el que los seres humanos vivan en armonía con la naturaleza.</p>
</article>

Prueba personalmente

Elemento <footer> de HTML5

El elemento <footer> define un pie de página para un documento o sección.

El elemento <footer> debe proporcionar información sobre los elementos que contiene.

Los pies de página suelen contener información del autor del documento, información de derechos de autor, enlaces a términos de uso, información de contacto, etc.

Puedes usar varios elementos <footer> en un documento.

Ejemplo

<footer>
   <p>Publicado por: Hege Refsnes</p>
   <p>Información de contacto: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Prueba personalmente

Elemento HTML5 <nav>

El elemento <nav> define una colección de enlaces de navegación.

El elemento <nav> tiene como objetivo definir grandes bloques de enlaces de navegación. ¡No obstante, no todos los enlaces del documento deben estar dentro del elemento <nav>!

Ejemplo

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Prueba personalmente

Elemento HTML5 <aside>

<aside>Es un elemento que contiene ciertos contenidos fuera del contenido principal de la página (por ejemplo, una columna lateral).

El contenido de aside debe estar relacionado con el contenido circundante.

Ejemplo

<p>Mi familia y yo visitamos el centro Epcot este verano.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>El Epcot Center es un parque temático en Disney World, Florida.</p>
</aside>

Prueba personalmente

Elementos HTML5 <figure> y <figcaption>

En libros y periódicos, los títulos que acompañan a las imágenes son muy comunes.

La función de la leyenda (caption) es proporcionar una explicación visible para las imágenes.

A través de HTML5, las imágenes y los títulos pueden combinarse en <figure> En el elemento,

Ejemplo

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - El Pulpit Pock, Noruega.</figcaption>
</figure>

Prueba personalmente

<img> El elemento define imágenes,<figcaption> El elemento define los títulos.

¿Por qué usar elementos HTML5?

Si se utiliza HTML4, los desarrolladores utilizarán los nombres de atributos que prefieran para definir el estilo de los elementos de la página:

header, parte superior, inferior, pie de página, menú, navegación, principal, contenedor, contenido, artículo, lateral, parte superior, ...

Así, el navegador no puede identificar el contenido correcto de la página web.

Y a través de elementos de HTML5 como: <header> <footer> <nav> <section> <article>, este problema se resuelve fácilmente.

Según W3C, la Semántica Web:

“Permite compartir y reutilizar datos entre aplicaciones, empresas y grupos.”

Elementos semánticos en HTML5

A continuación, se lista en orden alfabético los nuevos elementos semánticos de HTML5.

Estos enlaces apuntan al Manual de Referencia de HTML completo.

Etiqueta Descripción
<article> Definir un artículo.
<aside> Definir contenido fuera del contenido de la página.
<details> Definir detalles adicionales que el usuario puede ver u ocultar.
<figcaption> Definir el título del elemento <figure>.
<figure> Especificar contenido encerrado, como ilustraciones, gráficos, fotos, listas de código, etc.
<footer> Definir el pie de página del documento o sección.
<header> Especificar la cabecera del documento o sección.
<main> Especificar el contenido principal del documento.
<mark> Definir texto importante o destacado.
<nav> Definir un enlace de navegación.
<section> Definir un párrafo en el documento.
<summary> Definir el título visible del elemento <details>.
<time> Definir fecha/hora.