Elementos semánticos HTML
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.
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:
- <artículo>
- <aparte>
- <detalles>
- <figcaption>
- <figura>
- <pie de página>
- <encabezado>
- <principal>
- <marcar>
- <navegación>
- <sección>
- <resumen>
- <tiempo>
Elemento HTML <sección>
El <section>elemento 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 <section>se puede utilizar un elemento:
- Capítulos
- Introducción
- Noticias
- Información del contacto
Normalmente, una página web se puede dividir en secciones para la introducción, el contenido y la información de contacto.
Ejemplo
Dos secciones en un documento:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an
international organization working on issues regarding the conservation,
research and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF.
The well-known panda logo of WWF originated from a panda named Chi Chi that
was transferred from the Beijing Zoo to the London Zoo in the same year of
the establishment of WWF.</p>
</section>
Elemento HTML <artículo>
El <article>elemento especifica contenido independiente e 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 <article>se puede utilizar el elemento:
- Mensajes del foro
- Publicaciones de blog
- Comentarios del usuario
- Tarjetas de productos
- Artículos del periódico
Ejemplo
Tres artículos con contenido independiente y autónomo:
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular
web browser today!</p>
</article>
<article>
<h2>Mozilla
Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed
by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
Ejemplo 2
Usa CSS para diseñar el elemento <article>:
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers
> h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2,
p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>Most
Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser
developed by Google, released in 2008. Chrome is the world's most popular web
browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an
open-source web browser developed by Mozilla. Firefox has been the second most
popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015.
Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</body>
</html>
¿Anidar <artículo> en <sección> o viceversa?
El <article>
elemento especifica contenido independiente e independiente.
El <section>elemento define la sección en un documento.
¿Podemos usar las definiciones para decidir cómo anidar esos elementos? ¡No podemos!
Por lo tanto, encontrará páginas HTML con <section>elementos que contienen <article>elementos y <article>elementos que contienen <section>elementos.
Elemento HTML <encabezado>
El <header>elemento representa un contenedor de contenido introductorio o un conjunto de enlaces de navegación.
Un <header>elemento normalmente contiene:
- uno o más elementos de encabezado (<h1> - <h6>)
- logotipo o icono
- información de autoría
Nota: Puede tener varios <header>elementos en un documento HTML. Sin embargo, <header>no se puede colocar dentro de un <footer>u <address>otro <header>elemento.
Ejemplo
Un encabezado para un <artículo>:
<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>
Elemento HTML <pie de página>
El <footer>elemento define un pie de página para un documento o sección.
Un <footer>elemento normalmente contiene:
- información de autoría
- informacion registrada
- Información del contacto
- mapa del sitio
- volver a los enlaces superiores
- documentos relacionados
Puede tener varios <footer>elementos en un documento.
Ejemplo
Una sección de pie de página en un documento:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>
Elemento HTML <navegación>
El <nav>elemento define un conjunto de enlaces de navegación.
Tenga en cuenta que NO todos los enlaces de un documento deben estar dentro de un <nav>elemento. El
<nav>elemento está destinado 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.
Ejemplo
Un conjunto de enlaces de navegación:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
Elemento HTML <aparte>
El <aside>elemento define algún contenido además del contenido en el que se coloca (como una barra lateral).
El <aside>contenido debe estar indirectamente relacionado con el contenido circundante.
Ejemplo
Muestre algún contenido aparte del contenido en el que se encuentra:
<p>My family and I visited The Epcot center this summer. The weather was
nice, and Epcot was amazing! I had a great summer together with my
family!</p>
<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme
park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
Ejemplo 2
Usa CSS para diseñar el elemento <aside>:
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>My family and I visited The Epcot
center this summer. The weather was nice, and Epcot was amazing! I had a great
summer together with my family!</p>
<aside>
<p>The Epcot center is a
theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special
events.</p>
</aside>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
<p>My family and I visited The Epcot center
this summer. The weather was nice, and Epcot was amazing! I had a great summer
together with my family!</p>
</body>
</html>
Elementos HTML <figure> y <figcaption>
La <figure>etiqueta especifica contenido independiente, como ilustraciones, diagramas, fotos, listas de códigos, etc.
La <figcaption>etiqueta define un título para un <figure>elemento. El <figcaption>elemento se puede colocar como el primero o como el último hijo de un <figure>elemento.
El <img>elemento define la imagen/ilustración real.
Ejemplo
<figure>
<img src="pic_trulli.jpg" alt="Trulli">
<figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>
¿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".
Elementos semánticos en HTML
A continuación se muestra una lista de algunos de los elementos semánticos en HTML.
| Tag | Description |
|---|---|
| <article> | Defines independent, self-contained content |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for a document or section |
| <header> | Specifies a header for a document or section |
| <main> | Specifies the main content of a document |
| <mark> | Defines marked/highlighted text |
| <nav> | Defines navigation links |
| <section> | Defines a section in a document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .