Elementos Semánticos en HTML5
Los elementos semánticos definen claramente su propósito en la web, facilitando la comprensión del marcado tanto para el navegador como para los desarrolladores.
Los elementos semánticos son una de las incorporaciones más significativas de HTML5. En las versiones anteriores de HTML, la etiqueta genérica <div> con un atributo id o class se usaba para estructurar una página web. Por ejemplo, para definir barras laterales, pies de página, menús u otros bloques estructurales, se usaba la etiqueta <div> con el significado correspondiente (div class="footer").
Los elementos semánticos en HTML tienen un significado intrínseco y transmiten ese significado tanto al navegador como al desarrollador. Definen claramente qué tipo de contenido contienen (por ejemplo, la etiqueta <footer> se usa en lugar de <div id="footer">). También ayudan a mejorar la accesibilidad y facilitan que los motores de búsqueda comprendan el marcado.
Esta página cubre los elementos semánticos estructurales (de diseño de página) que utilizará para construir el esqueleto de casi todas las páginas web — <header>, <nav>, <main>, <article>, <section>, <aside> y <footer> — además de algunas etiquetas semánticas a nivel de contenido. También muestra cómo estos elementos se corresponden con los puntos de referencia ARIA, que es la razón principal por la que importan para la accesibilidad.
Veamos los elementos semánticos y su significado.
Un diseño de página semántico completo
Antes de analizar cada elemento por separado, es útil ver cómo encajan entre sí. Los elementos estructurales se anidan de forma predecible: un <header> y un <footer> envuelven la página, un único <main> contiene el contenido principal, y dentro de él un <article> puede estar junto a un <aside> relacionado. La navegación vive en <nav>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Semantic page layout</title>
</head>
<body>
<header>
<h1>The Daily Markup</h1>
<nav>
<a href="/">Home</a> |
<a href="/articles">Articles</a> |
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic elements describe the role of the content they wrap,
which helps browsers, search engines and assistive technology.</p>
</article>
<aside>
<h2>Related reading</h2>
<ul>
<li><a href="/articles/headings">Heading structure</a></li>
<li><a href="/articles/landmarks">ARIA landmarks</a></li>
</ul>
</aside>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>El resto de esta página explica cada elemento por separado.
Elementos semánticos y puntos de referencia ARIA
El mayor beneficio práctico de los elementos semánticos estructurales es la accesibilidad. Los usuarios de lectores de pantalla no desplazan la página de arriba a abajo — saltan entre puntos de referencia. Muchos elementos estructurales exponen un rol de punto de referencia ARIA implícito de forma automática, por lo que obtienes esto de forma gratuita simplemente usando la etiqueta correcta (no se necesita el atributo role):
| Elemento | Rol de punto de referencia implícito | Notas |
|---|---|---|
<header> (hijo directo de <body>) | banner | Encabezado de todo el sitio. Un <header> dentro de <article>/<section> no es un punto de referencia. |
<nav> | navigation | Etiqueta múltiples navs con aria-label para que sean distinguibles. |
<main> | main | Usa solo uno por página. |
<aside> | complementary | Contenido relacionado con, pero separable del, contenido principal. |
<footer> (hijo directo de <body>) | contentinfo | Pie de página de todo el sitio (derechos de autor, contacto, etc.). |
Por esto, reemplazar <div class="header"> con <header> no es solo un marcado más ordenado — hace que la página sea navegable para las personas que usan tecnología de asistencia.
El elemento <header>
El elemento <header> define un encabezado para el documento o sección. Normalmente contiene un logotipo, barra de búsqueda, enlaces de navegación, etc.
Ejemplo del elemento HTML <header>
Ejemplo del encabezado HTML de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li {
display: inline-block;
margin-right: 10px;
color: #778899;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="padding:0;">
<li>Home</li>
<li>About us</li>
</ul>
</nav>
<h1>Welcome to our page</h1>
<hr />
</header>
<article>
<header>
<h2>Title of the document</h2>
<p>The content of the paragraph.</p>
</header>
</article>
</body>
</html>El elemento <nav>
El elemento <nav> define un bloque de enlaces de navegación, ya sea dentro del documento actual o hacia otros documentos. Ten en cuenta que no todos los enlaces del documento HTML pueden colocarse dentro del elemento <nav>; solo puede incluir bloques de navegación principales. Por ejemplo, la etiqueta <nav> también puede colocarse dentro de la etiqueta <footer> para definir enlaces en el pie de página del sitio web.
Ejemplo del elemento HTML <nav>
Ejemplo del elemento nav de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<header>
<h1>Programming Courses</h1>
</header>
<nav>
<a href="/learn-html.html">HTML</a> | <a href="/learn-css.html">CSS</a> | <a href="/learn-javascript.html">JavaScript</a> | <a href="/learn-php.html">PHP</a> |
</nav>
<h2>Welcome to W3Docs!</h2>
</body>
</html>El elemento <article>
El elemento <article> se usa para especificar contenido independiente y autónomo (artículos, entradas de blog, comentarios, etc.). El contenido del elemento tiene su propio significado y se diferencia fácilmente del resto del contenido de la página web.
Ejemplo del elemento HTML <article>
Ejemplo del elemento article de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<article>
<h1>Title of the article</h1>
<p>Text of the article</p>
</article>
</body>
</html>El elemento <section>
El elemento <section> se usa para agrupar secciones independientes dentro de una página web que contienen contenido lógicamente relacionado (bloque de noticias, información de contacto, etc.).
Ejemplo del elemento HTML <section>
Ejemplo del elemento section de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Using the section tag</title>
</head>
<body>
<section>
<h1>Hypertext markup language HTML</h1>
<p>HTML is the standard markup language for creating web pages and web applications. Browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
</section>
<section>
<h1>CSS</h1>
<p>A formal language that is used as a description zone, formatting the appearance of a web page written with the help of markup languages HTML and XHTML but it can be applied to any XML-document, for example, to SVG or XUL.</p>
</section>
</body>
</html><section> vs <article>
Estos dos elementos son fáciles de confundir. Una regla práctica rápida:
- Usa
<article>cuando el contenido sea autónomo e independientemente distribuible — tendría sentido por sí solo, fuera de contexto (una entrada de blog, una noticia, una tarjeta de producto, un comentario de usuario). Si pudieras imaginarlo sindicado en un feed RSS, es un<article>. - Usa
<section>para una agrupación temática de contenido relacionado que forma parte de algo más grande y no tiene significado por sí solo. Un<section>casi siempre debe comenzar con un encabezado (<h2>–<h6>) que nombre el grupo.
Cuando ninguno de los dos aplica — solo necesitas un contenedor de estilos o diseño sin significado semántico — usa un simple <div> en su lugar.
El elemento <aside>
El elemento <aside> define una sección con información adicional relacionada con el contenido que rodea al elemento <aside>. Generalmente se usa para enriquecer un artículo con información adicional o resaltar las partes que pueden resultar interesantes para el usuario.
Ejemplo del elemento HTML <aside>
Ejemplo del elemento aside de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>El elemento <footer>
El elemento <footer> define el pie de página de una página web o sección. Por lo general, contiene información de derechos de autor, datos de contacto, enlaces de navegación, etc.
Ejemplo del elemento HTML <footer>
Ejemplo del elemento footer de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
header {
height: 40px;
padding: 20px 20px 0;
background: #e1e1e1;
}
main {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<header>Header / Menu</header>
<main>
<h1>Main content</h1>
<p>This is some paragraph. </p>
</main>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>El elemento <address>
El elemento <address> proporciona información de contacto para su ancestro <article> más cercano, o para todo el documento cuando es hijo de <body>. Está pensado para datos de contacto (el autor o propietario del artículo o sitio) — no para direcciones postales arbitrarias que simplemente forman parte del contenido.
Ejemplo del elemento HTML <address>
Ejemplo del elemento address de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<address>
Author: W3docs Team<br />
<a href="mailto:[email protected]">Send Mail to the Author</a>
</address>
</body>
</html>Demo: Enviar correo al autor
El elemento <main>
El elemento <main> define el contenido principal de la página. El contenido de la etiqueta <main> debe ser único y no duplicar bloques del mismo tipo que se repiten en otros documentos, como el encabezado del sitio, el pie de página, el menú, la búsqueda, la información de derechos de autor, etc.
Ejemplo del elemento HTML <main>
Ejemplo del elemento main de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.</p>
<article>
<h2>HTML</h2>
<p> HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages. </p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>CSS is a language of styles, defining the display of HTML documents. </p>
<p>... </p>
</article>
</main>
</body>
</html>El elemento <figure>
El elemento <figure> se usa para indicar contenido autónomo. La etiqueta puede incluir imágenes, diagramas, ilustraciones, ejemplos de código, etc.
Ejemplo del elemento HTML <figure>
Ejemplo del elemento figure de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A cute baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
</figure>
</body>
</html>El elemento <figcaption>
El elemento <figcaption> se usa para agregar una firma o anotación a la etiqueta <figure>.
Ejemplo del elemento HTML <figcaption>
Ejemplo del elemento figcaption de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Image of a baby</p>
<figure>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>Elementos semánticos a nivel de contenido
Los elementos anteriores describen la estructura de una página. Las siguientes etiquetas agregan significado a nivel de texto — marcan pequeñas piezas de contenido dentro de un párrafo en lugar de diseñar la página. No son puntos de referencia y no afectan la estructura de la página.
El elemento <time>
El elemento <time> define una hora legible por humanos en un reloj de 24 horas o una fecha precisa en el calendario gregoriano.
Ejemplo del elemento HTML <time>
Ejemplo del elemento time de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document.</title>
</head>
<body>
<p>The game will be held on<time datetime="2018-09-28 19:00">September 28</time>.</p>
<p>It will start at <time>19:00</time></p>
</body>
</html>El elemento <mark>
El elemento <mark> se usa para marcar una parte del texto que tiene relevancia. Puede usarse para resaltar texto con énfasis, destacar términos de búsqueda en los resultados para dar contexto, o distinguir contenido nuevo añadido por el usuario mostrándolo de forma diferente.
Ejemplo del elemento HTML <mark>
Ejemplo del elemento mark de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
</body>
</html>El elemento <bdi>
El elemento <bdi> se usa para aislar texto bidireccional cuando se usa un idioma con direccionalidad de derecha a izquierda, como el árabe o el hebreo, en línea con idiomas de izquierda a derecha.
Ejemplo del elemento HTML <bdi>
Ejemplo del elemento bdi de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1> Example of using the bdi element </h1>
<p dir="ltr"><bdi>أرمينيا جميلة</bdi> This sentence in Arabic is automatically displayed from right to left.</p>
</body>
</html>El elemento <wbr>
La etiqueta <wbr> se usa para indicar al navegador dónde podría añadirse un salto de línea en el texto. A diferencia de la etiqueta <br>, que obliga al navegador a insertar un salto de línea, en el caso de <wbr> el navegador primero analiza su contenido y luego inserta un salto de línea si es necesario (palabra demasiado larga o dirección URL).
Ejemplo del elemento HTML <wbr>
Ejemplo del elemento wbr de la página|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Example of a long string of text without wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumonoultramicroscopicsilicovolcanoconiosis</p>
<p>Example of a long string of text with wbr.</p>
<p>This is the longest word you can ever meet in the English language pneumono<wbr />ultra<wbr />micro<wbr />scopic<wbr />silico<wbr />volcano<wbr />coniosis</p>
</body>
</html>