Elementos semánticos en HTML5
Los elementos semánticos son una de las incorporaciones más importantes en HTML5. En las versiones anteriores de HTML, se utilizaba la etiqueta genérica <div> con un atributo id o class 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 hacen que el marcado sea más fácil de entender para los motores de búsqueda.
Echemos un vistazo a los elementos semánticos y su significado.
El elemento <header>
El elemento <header> define un encabezado para el documento o una sección. Normalmente contiene un logotipo, una 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 principales de navegación. Por ejemplo, la etiqueta <nav> también puede colocarse en 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>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 complementar 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 de una sección. Por regla general, contiene información de copyright, 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-content {
height: 60vh;
padding: 20px;
}
footer {
padding: 10px 20px;
background: #666;
color: white;
}
a {
color: #00aaff;
}
</style>
</head>
<body>
<div class="header">Header / Menu</div>
<div class="main-content">
<h1>Main content</h1>
<p>This is some paragraph. </p>
</div>
<footer>
<p>Company © W3docs. All rights reserved.</p>
</footer>
</body>
</html>El elemento <address>
El elemento <address> se usa para proporcionar información de contacto del autor o del propietario de un artículo, documento o sitio web.
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 de un sitio, el pie de página, el menú, la búsqueda, la información de copyright, 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="https://es.w3docs.com/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 añadir 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="https://es.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby" width="250" height="200" />
<figcaption>Fig.1 – Cute baby</figcaption>
</figure>
</body>
</html>El elemento <time>
El elemento <time> define una hora legible para 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 un texto y mostrar énfasis, resaltar términos de búsqueda en los resultados para proporcionar contexto o distinguir un 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 utiliza en línea un idioma con dirección de derecha a izquierda, como el árabe o el hebreo, junto 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 o dirección URL demasiado largas).
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>Practice
¿Cuál es el propósito principal de usar elementos semánticos en HTML5?