Enlaces a anclas

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> <a href="index.html">Volver al inicio</a> </nav> </header> <main> <article> <h1>Día trece. Encontré un artículo</h1> <p>Pensé que podría ser útil.</p> <h2>¿Para qué sirven los encabezados?</h2> <!-- Añade el identificador content a este encabezado --> <h3>Índice</h3> <ul> <li> <!-- Añade la dirección #intro a este enlace --> <a>Introducción</a> </li> <li><a>Encabezados y secciones implícitas</a></li> <li><a>La etiqueta section</a></li> <li><a>Niveles de encabezado</a></li> <li><a>No es tan sencillo</a></li> </ul> <article> <!-- Añade el identificador intro a este encabezado --> <h3>Introducción</h3> <p>Cuando se creó HTML, hace muchos años, el mundo era muy distinto. La especificación se inspiró en documentos de texto en los que aparecían, uno tras otro, párrafos, listas, tablas, imágenes y, por supuesto, encabezados. Como en un trabajo escolar: el encabezado más grande es el título y los más pequeños corresponden a las partes o capítulos.</p> <h3>Encabezados y secciones implícitas</h3> <p>Desde entonces, HTML tiene seis niveles de encabezado: de h1 a h6. Cada encabezado da nombre al contenido que viene después y forma lo que llamamos una sección implícita, una parte lógica de la página. Es implícita porque solo termina cuando aparece el siguiente encabezado del mismo nivel o de uno superior.</p> <pre><code>&lt;h1&gt;Comida&lt;/h1&gt; &lt;h2&gt;Frutas&lt;/h2&gt; &lt;p&gt;Deliciosas&lt;/p&gt; &lt;h3&gt;Manzanas&lt;/h3&gt; &lt;p&gt;¡Buenísimas!&lt;/p&gt;</code></pre> <p>Por eso la especificación recomienda no usar elementos h* para el texto que acompaña a un encabezado. Ese texto puede ser un párrafo normal: un encabezado debe identificar una parte del contenido. La especificación incluye ejemplos para marcar elementos más complejos, como subtítulos, rutas de navegación y diálogos.</p> <h3>La etiqueta section</h3> <p>También podemos delimitar las secciones de forma explícita con el elemento section. Este fragmento expresa la misma estructura que el anterior y resulta más claro, aunque tenga más código.</p> <pre><code>&lt;h1&gt;Comida&lt;/h1&gt; &lt;section&gt; &lt;h2&gt;Frutas&lt;/h2&gt; &lt;p&gt;Deliciosas&lt;/p&gt; &lt;section&gt; &lt;h3&gt;Manzanas&lt;/h3&gt; &lt;p&gt;¡Buenísimas!&lt;/p&gt; &lt;/section&gt; &lt;/section&gt;</code></pre> <h3>Niveles de encabezado</h3> <p>¡Bien! Si las secciones son explícitas, su anidamiento permite entender cómo se relacionan. ¿Y si el navegador pudiera deducir el nivel de cada encabezado? Porque contar h1, h2, h… ya me perdí. Así sería más fácil cambiar de lugar los bloques de código. Los autores de HTML5 tuvieron esa misma idea y describieron un algoritmo de esquema del documento. La propuesta permitía usar solo h1 y expresar la jerarquía mediante el anidamiento de elementos como article y section.</p> <pre><code>&lt;h1&gt;Comida&lt;/h1&gt; &lt;section&gt; &lt;h1&gt;Frutas&lt;/h1&gt; &lt;section&gt; &lt;h1&gt;Manzanas&lt;/h1&gt; &lt;/section&gt; &lt;/section&gt;</code></pre> <p>La idea entusiasmó a muchos desarrolladores, que empezaron a aplicarla. Pero había un problema: los navegadores, lectores de pantalla y buscadores no implementaron ese algoritmo. En esas páginas todos los encabezados anuncian que son de nivel uno y que tienen la máxima importancia. Y si todo es lo más importante, nada lo es.</p> <p>No lo hagas así: la propia especificación desaconseja esta práctica. Debemos elegir el nivel de los encabezados. No es tan difícil: una página típica rara vez necesita más de tres niveles de estructura. ¡Vale la pena prestarles atención!</p> <h3>No es tan sencillo</h3> <p>Un momento. Le pongo una clase a un div y todos ven que es el encabezado más grande. Le pongo otra y se ve más pequeño. ¿Para qué calcular niveles si tenemos CSS?</p> <pre><code>&lt;div class="big-black"&gt; Frutas gratis &lt;/div&gt; &lt;div class="small-grey"&gt; Solo si pagas &lt;/div&gt;</code></pre> <p>Claro, los estilos crean una jerarquía visual: un texto grande y negro parece más importante que uno pequeño y gris. Pero eso solo funciona si puedes ver la página.</p> <p>Hay dos grupos importantes que interpretan la página a partir de sus etiquetas. No se fijan en el tamaño ni en el color del div: buscan h1 para identificar el encabezado principal. Son los lectores de pantalla y los robots. Los robots de los buscadores necesitan que les ayudemos a entender nuestras páginas.</p> <p>Los lectores de pantalla ayudan a las personas que no pueden ver bien una interfaz o que no pueden usar el navegador de la forma habitual. VoiceOver, NVDA y JAWS leen el contenido en voz alta y aprovechan el significado de las etiquetas. Los elementos div y span no aportan significado por sí mismos, por muchas clases y estilos que les pongas. Sin estructura, el sitio es como un periódico sin titulares: un montón de texto.</p> <p>¡Pero qué periódico! Estamos en 2017, estoy creando una aplicación de una sola página, no un mural escolar. Tengo estados de componentes por todas partes. ¿Para qué necesito semántica donde no hay texto? Muy buena pregunta.</p> <p>Los lectores de pantalla pueden recorrer la página de principio a fin y leer todo su contenido en orden. Pero escuchar toda la cabecera cada vez sería poco práctico: al terminar, quizá ya olvidaste qué buscabas. Por eso ofrecen formas de saltar entre las partes importantes de la página: regiones como header, nav y main, enlaces o encabezados.</p> <p>Al consultar la lista de encabezados puedes hacerte una idea de la estructura de la página sin verla. Después puedes ir directamente a la sección que necesitas. El menú, la búsqueda, el catálogo, la configuración y el acceso a la cuenta son partes de una aplicación que pueden tener encabezados para facilitar la navegación.</p> <pre><code>— Instagram — Inicio — Atardecer — Café con leche — Configuración — Perfil</code></pre> <p>A veces el diseño no incluye encabezados para partes importantes. Quien lo diseñó reconoce el menú por su icono y la búsqueda por su campo de texto. Eso no debe impedirnos crear una interfaz accesible. Añade los encabezados necesarios y, si hace falta, ocúltalos solo visualmente. No uses display: none, porque también los oculta a los lectores de pantalla. Para esto existe la técnica visually hidden.</p> <p>Piensa en la apariencia de la página y también en la lógica de su marcado. Recuerda los encabezados: los estilos muestran la página y los encabezados cuentan cómo está organizada.</p> <p> <!-- Añade la dirección #content a este enlace --> <a>Volver al índice</a> </p> </article> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>