Encabezados y secciones

En la última sección, aprendiste que, incluso si no sabes qué significan las palabras de una página, cuando los elementos semánticos proporcionan al documento una estructura significativa, otras personas (el motor de búsqueda, las tecnologías de asistencia, un futuro mantenedor, un nuevo miembro del equipo) comprenderán el esquema del documento.

En esta sección, descubrirás la estructura del documento, repasarás los elementos de sección de la sección anterior y marcarás el esquema de tu aplicación.

Elegir los elementos adecuados para el trabajo mientras codificas significa que no tendrás que refactorizar ni comentar tu HTML. Si piensas en usar el elemento adecuado para el trabajo, lo más probable es que lo elijas. De lo contrario, es probable que no lo hagas.

Ahora que comprendes la semántica de marcado y sabes por qué es importante elegir el elemento adecuado, una vez que conozcas todos los elementos diferentes, por lo general, elegirás el elemento adecuado sin mucho esfuerzo adicional.

Sitio <header>

Primero, debes crear un encabezado del sitio. Comienza con el marcado no semántico y avanza hacia una buena solución para que puedas aprender los beneficios de los elementos de sección y encabezado de HTML en el camino.

Si no piensas en la semántica de nuestro encabezado, es posible que uses un código como este:

<!-- start header -->
<div id="pageHeader">
  <div id="title">Machine Learning Workshop</div>
  <!-- navigation -->
  <div id="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

CSS puede hacer que (casi) cualquier marcado se vea bien. Sin embargo, usar el elemento no semántico <div> para todo crea trabajo adicional. Para segmentar varios elementos <div> con CSS, terminas usando IDs o clases para identificar el contenido. El código también incluye un comentario para cada </div> de cierre para indicar qué etiqueta de apertura cerró cada </div>.

Si bien los atributos id y class proporcionan hooks para el diseño y JavaScript, no agregan ningún valor semántico para el lector de pantalla y (en su mayor parte) los motores de búsqueda.

Puedes incluir atributos role para proporcionar semántica y crear un buen modelo de objetos de accesibilidad (AOM) para lectores de pantalla:

<!-- start header -->
<div role="banner">
  <div role="heading" aria-level="1">Machine Learning Workshop</div>
  <div role="navigation">
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </div>
  <!-- end navigation bar -->
</div>
<!-- end of header -->

Al menos, esto proporciona semántica y permite usar selectores de atributos en CSS, pero aún agrega comentarios para identificar qué <div> cierra cada </div>.

Si conoces HTML, lo único que debes hacer es pensar en el propósito del contenido. Luego, puedes escribir este código de forma semántica sin usar role y sin necesidad de comentar las etiquetas de cierre:

<header>
  <h1>Machine Learning Workshop</h1>
  <nav>
    <a href="#reg">Register</a>
    <a href="#about">About</a>
    <a href="#teachers">Instructors</a>
    <a href="#feedback">Testimonials</a>
  </nav>
</header>

Este código usa dos puntos de referencia semánticos: <header> y <nav>.

Este es el encabezado principal. El elemento <header> no siempre es un punto de referencia. Tiene una semántica diferente según dónde esté anidado. Cuando <header> es de nivel superior, es el banner del sitio, una función de punto de referencia que quizás hayas notado en el bloque de código role. Cuando un <header> está anidado en <main>, <article> o <section>, solo lo identifica como el encabezado de esa sección y no es un punto de referencia.

El elemento <nav> identifica el contenido como navegación. Como este <nav> está anidado en el encabezado del sitio, es la navegación principal del sitio. Si estuviera anidado en un <article> o <section>, sería una navegación interna solo para esa sección. Si usas elementos semánticos, creaste un modelo de objetos de accesibilidad significativo o AOM. El AOM permite que el lector de pantalla informe al usuario que esta sección consta de un bloque de navegación principal por el que puede navegar o omitir.

El uso de etiquetas de cierre </nav> y </header> elimina la necesidad de comentarios para identificar qué elemento cerró cada etiqueta final. Además, el uso de diferentes etiquetas para diferentes elementos elimina la necesidad de hooks id y class. Los selectores CSS pueden tener una especificidad baja; probablemente puedas segmentar los vínculos con header nav a sin preocuparte por los conflictos.

Escribiste un encabezado con muy poco HTML y sin clases ni IDs. Cuando usas HTML semántico, no es necesario.

Sitio <footer>

Codifica el pie de página del sitio.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
</footer>

Al igual que <header>, si el pie de página es un punto de referencia, depende de dónde esté anidado. Cuando es el pie de página del sitio, es un punto de referencia y debe contener la información del pie de página del sitio que deseas en cada página, como una declaración de derechos de autor, información de contacto y vínculos a tus políticas de privacidad y de cookies. El role implícito para el pie de página del sitio es contentinfo. De lo contrario, el pie de página no tiene una función implícita y no es un punto de referencia, como se muestra en la siguiente captura de pantalla del AOM en Chrome (que tiene un <article> con un <header> y <footer> entre el <header> y <footer>).

En esta captura de pantalla, hay dos pies de página: uno en un <article> y uno de nivel superior. El pie de página de nivel superior es un punto de referencia con la función implícita de contentinfo. El otro pie de página no es un punto de referencia. Chrome lo muestra como FooterAsNonLandmark; Firefox lo muestra como section.

Eso no significa que no debas usar <footer>. Por ejemplo, si tienes un blog, podrías tener un pie de página del sitio con una función contentinfo implícita. Cada entrada de blog también puede tener un <footer>. En la página de destino principal de tu blog, el navegador, el motor de búsqueda y el lector de pantalla saben que el pie de página principal es el pie de página de nivel superior y que todos los demás pies de página están relacionados con las entradas en las que están anidados.

Cuando un <footer> es un descendiente de un <article>, <aside>, <main>, <nav> o <section>, no es un punto de referencia. Si la entrada aparece por sí sola, según el marcado, es posible que se promueva ese pie de página.

Los pies de página suelen ser el lugar donde encontrarás información de contacto, envuelta en <address>, el elemento de dirección de contacto. Este es un elemento que no está muy bien nombrado; se usa para incluir la información de contacto de personas o organizaciones, no direcciones postales físicas.

<footer>
  <p>&copy;2022 Machine Learning Workshop, LLC. All rights reserved.</p>
  <address>Instructors: <a href="/hal.html">Hal</a> and <a href="/eve.html">Eve</a></address>
</footer>

Estructura del documento

Este módulo comienza con <header> y <footer>, ya que solo a veces son elementos de punto de referencia (o "sección"). Hay varios elementos de sección más frecuentes.

Un diseño con un encabezado, dos barras laterales y un pie de página se conoce como el diseño del santo grial. Existen muchas formas de marcar este contenido, incluidas las siguientes:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>Content</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Si creas un blog, es posible que tengas una serie de artículos en <main>:

<body>
  <header>Header</header>
  <nav>Nav</nav>
  <main>
    <article>First post</article>
    <article>Second post</article>
  </main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</body>

Cuando se usan elementos semánticos, los navegadores pueden crear árboles de accesibilidad significativos. Esto ayuda a mejorar la navegación del lector de pantalla. Aquí, se proporcionan un banner y un contentinfo a través de un <header> y un <footer> del sitio. Los nuevos elementos agregados aquí incluyen <main>, <aside> y <article>; también, <h1> y <nav> que usaste antes, y <section>, que aún no usaste.

<main>

Hay un solo <main> elemento de punto de referencia. El elemento <main> identifica el contenido principal del documento. Debe haber solo un <main> por página.

<aside>

El <aside> es para el contenido que está relacionado de forma indirecta o tangencial con el contenido principal del documento. Por ejemplo, este documento trata sobre HTML. Para una sección sobre la especificidad del selector CSS para los tres ejemplos de encabezado del sitio (div, role y semántico), el aside relacionado tangencialmente podría estar contenido en un <aside>; y, como la mayoría, es probable que el <aside> se presente en una barra lateral o un cuadro de llamada. El <aside> también es un punto de referencia, con la función implícita de complementary.

<article>

En <main>, agregamos dos elementos <article>. Esto no era necesario en el primer ejemplo cuando el contenido principal era solo una palabra o, en el mundo real, una sola sección de contenido. Sin embargo, si escribes un blog, como en nuestro segundo ejemplo, cada entrada debe estar en un <article> anidado en <main>.

Un <article> representa una sección de contenido completa o independiente que, en principio, se puede reutilizar de forma independiente. Piensa en un artículo como lo harías en un artículo de un periódico. En la versión impresa, un artículo de noticias sobre Jacinda Ardern, primera ministra de Nueva Zelanda, solo podría aparecer en una sección, tal vez noticias mundiales. En el sitio web del periódico, ese mismo artículo de noticias podría aparecer en la página principal, en la sección de política, en la sección de noticias de Oceanía o Asia Pacífico y, según el tema de las noticias, en las secciones de deportes, estilo de vida o tecnología. El artículo también puede aparecer en otros sitios, como Pocket o Yahoo News.

<section>

El elemento <section> se usa para abarcar secciones genéricas independientes de un documento cuando no hay un elemento semántico más específico para usar. Las secciones deben tener un encabezado, con muy pocas excepciones.

Volviendo al ejemplo de Jacinda Ardern, en la página principal del periódico, el banner incluiría el nombre del periódico, seguido de un solo <main>, dividido en varias <section>s, cada una con un encabezado, como "Noticias mundiales" y "Política"; y en cada sección, encontrarás una serie de <article>s. Dentro de cada <article>, también puedes encontrar uno o más elementos <section>. Si observas esta página, toda la parte de "encabezados y secciones" es el <article>. Luego, este <article> se divide en varias <section>s, incluidos el site header, el site footer y la estructura del documento. El artículo en sí tiene un encabezado, al igual que cada una de las secciones.

Un <section> no es un punto de referencia, a menos que tenga un nombre accesible; si tiene un nombre accesible, la función implícita es region. Las funciones de punto de referencia deben usarse con moderación para identificar secciones generales más grandes del documento. Usar demasiadas funciones de punto de referencia puede crear "ruido" en los lectores de pantalla, lo que dificulta la comprensión del diseño general de la página. Si tu <main> contiene dos o tres subsecciones importantes, incluir un nombre de accesibilidad para cada <section> podría ser beneficioso.

Encabezados: <h1>-<h6>

Existen seis elementos de encabezado de sección: <h1>, <h2>, <h3>, <h4>, <h5>, y <h6>. Cada uno representa uno de los seis niveles de encabezados de sección, con <h1> como el nivel de sección más alto o importante, y <h6> el más bajo.

Cuando un encabezado está anidado en un banner de documento <header>, es el encabezado de la aplicación o el sitio. Cuando está anidado en <main>, ya sea que esté anidado o no dentro de un <header> en <main>, es el encabezado de esa página, no de todo el sitio. Cuando está anidado en un <article> o <section>, es el encabezado de esa subsección de la página.

Se recomienda usar niveles de encabezado de manera similar a los niveles de encabezado en un editor de texto: comenzar con un <h1> como encabezado principal, con <h2> como encabezados para subsecciones y <h3> si esas subsecciones tienen secciones; evita omitir niveles de encabezado. Aquí hay un buen artículo sobre los encabezados de sección aquí.

Algunos usuarios de lectores de pantalla acceden a los encabezados para comprender el contenido de una página. Originalmente, los encabezados debían describir un documento, al igual que MS Word o Documentos de Google pueden producir un esquema basado en encabezados, pero los navegadores nunca implementaron esta estructura. Si bien los navegadores muestran encabezados anidados en tamaños de fuente cada vez más pequeños, como se muestra en el siguiente ejemplo, en realidad no admiten la descripción.

Ahora tienes suficientes conocimientos para describir MachineLearningWorkshop.com:

Descripción del <body> de MLW.com

Este es el esquema del contenido visible del sitio del taller de aprendizaje automático:

Como ninguna parte del contenido es independiente, el contenido completo, <section> es más adecuado que <article>; si bien cada uno tiene un encabezado, ninguna sección es digna de un <footer>.

A estas alturas, no debería ser necesario decirlo, pero no uses encabezados para poner texto en negrita o grande; usa CSS en su lugar. Si deseas enfatizar el texto, también hay elementos semánticos para hacerlo. Abordaremos ese tema y completaremos la mayor parte del contenido de la página a medida que analicemos los conceptos básicos del texto, después de profundizar en los atributos.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre encabezados y secciones.