Encabezados y secciones

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

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

Elegir los elementos correctos para el trabajo mientras escribes el código significa que no tendrás que refactorizar ni comentar tu HTML. Si piensas en usar el elemento correcto para el trabajo, a menudo, deberás elegir el elemento correcto para el trabajo. Si no es así, probablemente no lo harás.

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 diferentes elementos, por lo general, elegirás el elemento correcto sin mucho esfuerzo adicional, si es que lo harás.

Sitio <header>

Creemos un encabezado para el sitio. Comenzarás con lenguaje de marcado no semántico y avanzarás hacia una buena solución para que puedas conocer los beneficios de la sección HTML y los elementos de encabezado durante el proceso.

Si no prestas mucha atención a la semántica del encabezado, puedes usar un código como el siguiente:

<!-- 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 <div> no semántico para todo crea trabajo adicional. Para segmentar varios <div> con CSS, debes usar 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 enlaces para el estilo y JavaScript, no agregan ningún valor semántico para el lector de pantalla ni para los motores de búsqueda (en su mayor parte).

Puedes incluir atributos role con el objetivo de proporcionar semánticas para 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, proporciona semántica y permite el uso de selectores de atributos en el CSS, pero sigue agregando 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 manera 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>

En este código, se usan 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 el lugar donde esté anidado. Cuando la <header> está en el nivel superior, es el sitio banner, un rol de punto de referencia que quizás hayas observado en el bloque de código role. Cuando un elemento <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 anidada en <article> o <section>, sería la navegación interna solo para esa sección. Con el uso de elementos semánticos, creaste un modelo de objetos de accesibilidad (AOM) significativo. 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 omitir o navegar.

El uso de etiquetas de cierre </nav> y </header> elimina la necesidad de comentarios para identificar qué elemento cerró cada etiqueta de cierre. Además, usar diferentes etiquetas para distintos elementos quita la necesidad de los hooks id y class. Los selectores CSS pueden tener una especificidad baja. Probablemente, puedas orientar los vínculos con header nav a sin preocuparte por 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>

Codifiquemos el pie de página del sitio.

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

De manera similar a <header>, que el pie de página sea un punto de referencia depende del lugar en el que se anida el pie de página. Cuando se trata del pie de página del sitio, es un punto de referencia y debe contener la información que deseas que aparezca 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 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 de AOM en Chrome (que tiene un <article> con <header> y <footer> entre <header> y <footer>).

En esta captura de pantalla, hay dos pies de página: uno en un <article> y otro en el 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 deberías usar <footer>. Supongamos que tienes un blog. El blog tiene un pie de página del sitio 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 pie de página principal y que todos los demás pies de página están relacionados con las entradas en las que están anidados.

Cuando un elemento <footer> es descendiente de <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 el lugar donde encontrarás la información de contacto, incluida en <address>, el elemento de dirección de contacto. Este es un elemento que no tiene muy buen nombre; se utiliza para incluir la información de contacto de personas u organizaciones, no de 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 son únicos, ya que solo a veces son elementos de referencia o de "secciones". Abordaremos el elemento de sección "tiempo completo" analizando los diseños de página más comunes:

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, como 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, lo que permite a los usuarios de lectores de pantalla navegar con mayor facilidad. En este caso, se proporcionan banner y 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> es para el contenido que se relaciona de forma indirecta o tangencial con el contenido principal del documento. Por ejemplo, este artículo trata sobre HTML. En el caso de una sección sobre la especificidad del selector de CSS para los tres ejemplos de encabezados del sitio (div, rol y semántica), el apartado tangencialmente relacionado podría estar contenido en un <aside> y, como la mayoría, es probable que <aside> se presente en una barra lateral o un cuadro de texto destacado. El <aside> también es un punto de referencia, con la función implícita de complementary.

<article>

Anidados 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 el segundo ejemplo, cada entrada debe estar en un <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 si fuera un artículo de un periódico. Es posible que un artículo de noticias sobre Jacinda Ardern, primera ministra de Nueva Zelanda, solo aparezca en una sección, tal vez en noticias internacionales. 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 Oceana o Asia-Pacífico y, según el tema de la noticia, las secciones de deportes, estilo de vida o tecnología, tal vez. Es posible que el artículo también aparezca en otros sitios, como Pocket o Yahoo!

<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 elemento <main>, dividido en varios <section>, cada uno con un encabezado, como "Noticias internacionales" y "Política", y en cada sección encontrarás una serie de <article>. Dentro de cada <article>, es posible que también encuentres uno o más elementos <section>. Si observas esta página, la parte completa de "encabezados y secciones" es la <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 <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. Los roles de punto de referencia se deben usar con moderación para identificar secciones generales más grandes del documento. Usar demasiados roles 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, incluido un nombre accesible para cada <section>.

Encabezados: <h1>-<h6>

Hay 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 más alto o más importante y <h6> el más bajo.

Cuando un encabezado se anida en el banner de un documento <header>, es el encabezado de la aplicación o el sitio. Cuando se anida en <main>, ya sea que esté anidado o no dentro de una <header> en <main>, es el encabezado para esa página, no todo el sitio. Cuando se anida en <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: comienza con <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 encabezados de sección.

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 Google Docs 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 el esquema.

Ahora tienes los conocimientos suficientes para describir MachineLearningWorkshop.com:

Resumen del <body> de MLW.com

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

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

A estas alturas, no debería suceder esto, pero no uses encabezados para que el texto se vea en negrita o sea grande; usa CSS en su lugar. Si quieres enfatizar el texto, también hay elementos semánticos para hacerlo. Hablaremos de eso y rellenaremos la mayor parte del contenido de la página a medida que analizamos los conceptos básicos del texto, luego de profundizar en los atributos.

Verifica tus conocimientos

Pon a prueba tu conocimiento sobre encabezados y secciones.