Saltar al contenido principal

El marcado estructural

Hay un conjunto completo de etiquetas semánticas para marcar grandes secciones lógicas y mejorar la semántica estructural de la página. Cada uno de ellos puede ser utilizado bajo ciertas condiciones. Esto afecta el funcionamiento de la tecnología de asistencia, la indexación de la página y su clasificación de emisión en la búsqueda.

Contenido en streaming​

La etiqueta <header>​

El encabezado (header) resalta la parte introductoria de una página completa, una sección compleja o un artículo. Por lo general, contiene un logotipo, navegación, texto introductorio, encabezado complejo. Puede haber varios en la página

<body>
  <!-- El encabezado de la página web -->
  <header>
    <a href="/">Logo de la página web</a>

    <ul>
      La navegación а otros sitios
    </ul>
  </header>
</body>

Referencia de especificación

Footer es la parte final de toda la página, su sección o artículo. A menudo contiene un copyright, una lista de enlaces a redes sociales, información de contacto, etc. Puede haber varios en la página.

<body>
  <!-- El encabezado de la página web -->
  <header>
    <a href="/">Logo de la página web</a>

    <ul>
      La navegación а otros sitios
    </ul>
  </header>

  <!-- Footer de la página -->
  <footer>
    <!-- Сopyright -->
    <p>todos los derechos reservados &copy;lpj.dev</p>

    <!-- Referencias a las redes sociales -->
    <ul>
      <li><a href="">Facebook</a></li>
      <li><a href="">Twitter</a></li>
      <li><a href="">Instagram</a></li>
    </ul>
  </footer>
</body>

Referencia de especificación

La etiqueta <main>​

Contenido básico, no repetitivo en otras páginas (único). Solo puede haber uno en la página.

<body>
  <!-- El encabezado de la página web -->
  <header></header>

  <!-- El contenido único de la página -->
  <main></main>

  <!-- Footer de la página -->
  <footer></footer>
</body>

Referencia de especificación

Las secciones semánticas​

La etiqueta <nav>​

Define una sección de navegación principal con enlaces a secciones de la página actual u otras. Solo se usa para la navegación principal, no para ningún grupo de enlaces en un documento.

<body>
  <!-- El encabezado de la página web -->
  <header>
    <a href="/">Logo de la página web</a>

    <nav>
      <!-- La navegación а otros sitios -->
      <ul>
        <li><a href="/portfolio">Portfolio</a></li>
        <li><a href="/contact">Contact</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <!-- El contenido único de la página -->
  <main></main>

  <!-- Footer de la página -->
  <footer>
    <!-- ⚠️ Referencias a las redes sociales, no nav -->
    <ul>
      <li><a href="">Facebook</a></li>
      <li><a href="">Twitter</a></li>
      <li><a href="">Instagram</a></li>
    </ul>
  </footer>
</body>

Referencia de especificación

La etiqueta <article>​

Es una parte del documento independiente, desmontable, y relevante hacia fuera, parte del documento. Por ejemplo, una publicación en el foro, un tweet, un artículo en un blog, un widget con publicidad, una historia de Instagram, una tarjeta de producto en la tienda.

<article>
  <h1>Empanada dulce</h1>
  <img src="referencia a la imagen de la empanada " alt="empanada" />
  <p>
    Una deliciosa empanada al horno con varios rellenos: cereza, melocotón
    ciruela o fresa.
  </p>
  <p>Precio: 50 créditos</p>
</article>
Es útil

Si se puede dar un nombre a una sección del documento, extráigala fuera del sitio y tendrá sentido, es <article>. El título es obligatorio.

Referencia de especificación

La etiqueta section​

Una gran sección unifica el contenido en sentido. Es inseparable del documento principal. Por ejemplo, una sección de lista de productos, un bloque de información personal en el perfil del usuario, una sección de información de contacto.

<section>
  <h1>Las empanadas más populares de esta semana</h1>

  <!-- Dentro de cada  <li> puede encontrarse una tarjeta de empanada de la sección  «etiqueta <article>» -->
  <ul>
    <li>Asado con setas</li>
    <li>Asado con carne</li>
    <li>Horneado con manzanas</li>
    <li>Horneado con requesón</li>
  </ul>
</section>
Es útil

Si se puede dar un nombre a una sección del documento, pero fuera del sitio no va a tener el sentido, es <section>. El título es deseable.

Referencia de especificación

La etiqueta <div>​

Es el contenedor universal sin significado semántico. Se utiliza como un contenedor de bloque para el estilo posterior del contenido.

Es útil

Si no puede darle al grupo de contenido un nombre adecuado (no "columna derecha", sino que tiene sentido), es <div> y lo más probable es que solo necesite un contenedor común para el diseño.

Referencia de especificación

Algoritmo de selección de etiquetas​

Es difícil para los principiantes decidir qué etiqueta usar para marcar un bloque de contenido basado en su significado semántico. Utiliza este algoritmo para eligir la etiqueta adecuada.

Algoritmo de selección de etiquetas

Marcado de página​

Usando todas las etiquetas consideradas vamos a escribir el marcado de una página simple de un web estudio novato.

El ejemplo carece del marcado del esqueleto del documento porque el propio sitio interactivo lo agrega automáticamente codepen.io. para completar la imagen, escribiremos el marcado básico del documento.

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>estudio web mango.dev</title>
  </head>
  <body>
    <!-- Todo el marcado es de ejemplo en vivo -->
  </body>
</html>