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, otros (el motor de búsqueda, las tecnologías de accesibilidad, un futuro encargado de mantenimiento, un nuevo miembro del equipo) comprenderán el esquema del documento.

En esta sección, descubrirás la estructura de los documentos, 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 la tarea mientras escribes el código significa que no tendrás que refactorizar ni marcar como comentario tu HTML. Si piensas en usar el elemento adecuado para el trabajo, la mayoría de las veces elegirás el elemento adecuado para el trabajo. Si no lo haces, es probable que no lo logres.

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

Sitio <header>

Primero, debes crear un encabezado para el sitio. Comienza con un lenguaje de 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 prestas atención a la semántica del encabezado, podrías usar 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 lenguaje de marcado se vea bien. Sin embargo, usar el elemento no semántico <div> para todo genera trabajo adicional. Para segmentar varios <div> con CSS, terminas usando IDs o clases para identificar el contenido. El código también incluye un comentario para cada etiqueta </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 valor semántico para el lector de pantalla ni (en su mayor parte) para los motores de búsqueda.

Puedes incluir atributos role para proporcionar semántica y crear un buen modelo de objetos de accesibilidad (AOM) para los 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 -->

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

Si conoces HTML, todo lo que tienes que 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 el elemento <header> es de nivel superior, es el banner del sitio, un rol de punto de referencia, que tal vez hayas observado 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 elemento <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. Con los elementos semánticos, creaste un modelo de objetos de accesibilidad (AOM) significativo. El AOM permite que el lector de pantalla informe al usuario que esta sección consiste en un bloque de navegación principal por el que puede navegar o que puede omitir.

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

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

Sitio <footer>

Programar el código del pie de página del sitio

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

Al igual que con <header>, que el pie de página sea un punto de referencia depende de dónde esté anidado. Cuando se trata del 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 que aparezca en todas las páginas, como una declaración de derechos de autor, información de contacto y vínculos a tus políticas de privacidad y 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 un rol implícito 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 el <footer>).

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

Eso no significa que no debas usar <footer>. Por ejemplo, si tienes un blog, podrías tener un pie de página con un rol contentinfo implícito. 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 de nivel superior y que todos los demás pies de página están relacionados con las publicaciones 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 publicación aparece sola, según el lenguaje de marcado, es posible que se promocione ese pie de página.

Los pies de página suelen ser donde encontrarás información de contacto, unida en <address>, el elemento de dirección de contacto. Este es un elemento que no tiene un nombre muy adecuado; se usa para incluir la información de contacto de personas físicas u organizaciones, no las direcciones de correo postal 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. Hay 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 estás creando 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 emplean 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 sitio <header> y <footer>. Los elementos nuevos que se agregan aquí incluyen <main>, <aside> y <article>; además, <h1> y <nav> que usaste antes, y <section>, que aún no usaste.

<main>

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

<aside>

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

<article>

Anidados en <main>, agregamos dos elementos <article>. Esto no era necesario en el primer ejemplo, en el que el contenido principal era solo una palabra o, en el mundo real, una sola sección de contenido. Sin embargo, si estás escribiendo un blog, como en nuestro segundo ejemplo, cada publicación debe estar en un elemento <article> anidado en <main>.

Un elemento <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 con un artículo de un periódico. En la versión impresa, un artículo de noticia sobre Jacinda Ardern, primera ministra de Nueva Zelanda, podría aparecer solo en una sección, tal vez en la de noticias internacionales. En el sitio web del periódico, ese mismo artículo de noticia 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 de Asia-Pacífico y, según el tema de la noticia, tal vez 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 independientes genéricas 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 varios <section>, cada uno con un encabezado, como "Noticias del mundo" y "Política"; y en cada sección encontrarás una serie de <article>. Dentro de cada <article>, también puedes encontrar uno o más elementos <section>. Si miras esta página, toda la parte de "encabezados y secciones" es el <article>. Luego, este <article> se divide en varios <section>, incluidos site header, site footer y la estructura del documento. El artículo en sí tiene un encabezado, al igual que cada una de las secciones.

Un elemento <section> no es un punto de referencia, a menos que tenga un nombre de accesibilidad. Si tiene un nombre de accesibilidad, el rol implícito es region. Los roles de puntos de referencia deben usarse con moderación para identificar secciones generales más grandes del documento. Usar demasiados roles de puntos 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, donde <h1> es el nivel de sección más alto o más importante, y <h6> es 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 se anida en <main>, independientemente de si se anida dentro de un <header> en <main>, es el encabezado de esa página, no de todo el sitio. Cuando se anida en un elemento <article> o <section>, es el encabezado de ese apartado de la página.

Se recomienda usar los niveles de encabezado de manera similar a los niveles de encabezado de un editor de texto: comenzar con un <h1> como encabezado principal, con <h2> como encabezados para las 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.

Algunos usuarios de lectores de pantalla acceden a los encabezados para comprender el contenido de una página. Originalmente, se suponía que los encabezados debían esquematizar un documento, tal como MS Word o Documentos de Google pueden producir un esquema basado en encabezados, pero los navegadores nunca implementaron esta estructura, y el algoritmo de esquema propuesto se quitó de la especificación de HTML. Si bien, históricamente, los navegadores mostraban elementos <h1> anidados en elementos de sección con tamaños de fuente más pequeños, los navegadores modernos quitaron esos estilos predeterminados y no admiten el esquema automático de documentos.

Ahora tienes suficiente conocimiento para describir MachineLearningWorkshop.com:

Describir el <body> de MLW.com

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

Como ningún fragmento de contenido es independiente ni completo, <section> es más apropiado que <article>. Si bien cada uno tiene un encabezado, ninguna sección merece un <footer>.

A esta altura, debería ser evidente, pero no uses encabezados para poner el texto en negrita o agrandarlo; usa CSS en su lugar. Si quieres 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.