Encabezados y secciones

En la última sección, aprendiste cómo, incluso si no sabes lo que significan las palabras de una página, cuando los elementos semánticos le proporcionan al documento una estructura significativa, otros (el motor de búsqueda, las tecnologías de asistencia, un encargado de mantenimiento futuro o 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 las secciones de la sección anterior; y marca el esquema para tu aplicación.

Si eliges los elementos correctos para el trabajo a medida que escribes la codificación, no tendrás que refactorizar ni comentar tu HTML. Si piensas en usar el elemento correcto para el trabajo, la mayoría de las veces elegirás 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, generalmente elegirás el elemento correcto sin mucho o ningún esfuerzo adicional.

Sitio <header>

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

Si piensas poco o nada en la semántica de nuestro 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 (casi) que cualquier lenguaje de marcado se vea bien. Sin embargo, el uso de la <div> no semántica para todo crea un 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 hooks para definir el estilo y JavaScript, no agregan ningún valor semántico para el lector de pantalla y (en su mayoría) para los motores de búsqueda.

Puedes incluir atributos role con el objetivo de proporcionar semántica 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 -->

Esto, al menos, proporciona semántica y habilita el uso de selectores de atributos en el CSS, pero aun así agrega comentarios para identificar qué <div> se cierra cada </div>.

Si sabes 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 se anida. Cuando <header> es de nivel superior, es el sitio banner, un rol de punto de referencia, que puedes haber anotado 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 el elemento de navegación principal del sitio. Si estuviera anidada en un elemento <article> o <section>, sería navegación interna solo para esa sección. Mediante el uso de elementos semánticos, compilaste un modelo de objetos de accesibilidad (AOM) significativo. El AOM permite al lector de pantalla informar al usuario que esta sección consta de un bloque de navegación principal por el que puede navegar u omitir.

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

Escribiste un encabezado con muy poco HTML, 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>

Al igual que <header>, que el pie de página sea 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 que desees 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 del 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 la AOM en Chrome (que tiene un <article> con un <header> y un <footer> entre <header> y <footer>).

En esta captura de pantalla, hay dos pies de página: uno en <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 debes 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 de nivel superior y que todos los demás están relacionados con las entradas en las que se anidan.

Cuando un <footer> es subordinado de <article>, <aside>, <main>, <nav> o <section>, no es un punto de referencia. Si la entrada aparece sola, en función del lenguaje de marcado, es posible que se promocione ese pie de página.

En los pies de página, a menudo encontrarás la información de contacto, dentro de <address>, el elemento de la dirección de contacto. Este es un elemento que no tiene un nombre muy bien. se usa para incluir la información de contacto de organizaciones o personas físicas, 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 son únicos y a veces son elementos de referencia o de "seccionamiento". Abordemos el "tiempo completo" elemento de sección 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 sagrado 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 más fácilmente. Aquí, se proporcionan banner y contentinfo a través de un sitio <header> y <footer>. Los nuevos elementos 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 del punto de referencia <main>. El elemento <main> identifica el contenido principal del documento. Debe haber un solo <main> por página.

<aside>

<aside> es para contenido relacionado de manera indirecta o tangencial con el contenido principal del documento. Por ejemplo, este artículo trata sobre HTML. En una sección sobre la especificidad del selector CSS para los tres ejemplos de encabezados de sitios (div, rol y semántica), el apartado relacionado tangencialmente podría estar incluido en un <aside>. y, como la mayoría, es probable que <aside> se presente en una barra lateral o en 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 elemento <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 en un artículo de un periódico. Es posible que un artículo impreso sobre Jacinda Ardern, primera ministra de Nueva Zelanda, solo aparezca en una sección, quizás en noticias internacionales. En el sitio web del periódico, es posible que ese mismo artículo de noticias aparezca en la página principal, en la sección de política, en las de Oceana 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 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 varias <section>, cada una con un encabezado, como "Noticias mundiales" 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, verás todos los "encabezados y secciones" es <article>. Este <article> se divide en varios <section>, que incluyen site header, site footer y 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 referencia puede crear “ruido” en los lectores de pantalla, lo que dificulta la comprensión del diseño general de la página. Se recomienda que tu <main> contenga 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 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>, sin importar si está anidado o no dentro de <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 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. evitar 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 definir el contorno de un documento, al igual que MS Word o los 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 contornos.

Ahora tiene los conocimientos suficientes para describir MachineLearningWorkshop.com:

Descripción de las <body> de MLW.com

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

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

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

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre encabezados y secciones.