Elementos semánticos HTML

Que 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:

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

Elementos semánticos HTML

El elemento <section>

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

Según la documentación HTML del W3C: “Una sección es una agrupación temática de contenido, normalmente con un encabezado“.

Normalmente, una página web se puede dividir en secciones de introducción, contenido e información de contacto.

Ejm

2 secciones de 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>

El elemento HTML <article>

El elemento <article> especifica contenido autónomo e independiente.

Un artículo debe tener sentido por sí solo y debe ser posible distribuirlo independientemente del resto del sitio web.

Ejemplos de dónde se puede utilizar un elemento <article>:

  • Publicación en el foro
  • Entrada en el blog
  • Artículo de periódico

Ejm

<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>

Ejm 2 (utilizando CSS para formatear el artículo)

<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 elemento <article> especifica contenido independiente y autónomo.

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 HTML <header>

El elemento <header> representa un contenedor para contenido introductorio o un conjunto de enlaces de navegación.

Un elemento <header> normalmente contiene:

  • uno o más elementos de encabezado (<h1> – <h6>)
  • logo o icono
  • información de autoría

Nota: Puede 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

<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>

El elemento HTML <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
  • informacion registrada
  • Información del contacto
  • mapa del sitio
  • volver a los enlaces superiores
  • documentos relacionados

Puede tener varios elementos <footer> en un documento.

Ejm

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

El elemento HTML <nav>

El elemento <nav> define un conjunto 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 utilizar este elemento para determinar si se debe omitir la representación inicial de este contenido.

Ejm

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

El elemento HTML <aside>

El elemento <aside> define algún contenido además del contenido en el que está colocado (como una barra lateral).

El contenido <aside> debe estar relacionado indirectamente con el contenido circundante.

Ejm

<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>

Ejm 2 (utilizando CSS)

<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 etiqueta <figure> especifica contenido autónomo, 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

<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

ag Description
<article> Define contenido independiente y autónomo.
<aside> Define el contenido aparte del contenido de la página.
<details> Define detalles adicionales que el usuario puede ver u ocultar.
<figcaption> Define un título para un elemento <figure>
<figure> Especifica contenido autónomo, como ilustraciones, diagramas, fotos, listas de códigos, etc.
<footer> Define un pie de página para un documento o sección.
<header> Especifica un encabezado para un documento o sección.
<main> Especifica el contenido principal de un documento.
<mark> Define texto marcado / resaltado.
<nav> Define enlaces de navegación
<section> Define una sección en un documento
<summary> Define un encabezado visible para un elemento <details>
<time> Define una fecha / hora