Conceptos básicos de texto

Al igual que tu editor de texto proporciona encabezados de <h1> a <h6>, junto con una gran cantidad de formas de dar formato a las secciones de texto de manera significativa y visual, HTML proporciona un conjunto muy similar de elementos semánticos y no semánticos para dar sentido a la prosa.

En esta sección, se explican las principales formas de marcar texto, es decir, los conceptos básicos del texto. Luego, analizaremos los atributos antes de explorar otras formas de marcar texto, como listas, tablas y formularios.

Revisión de los encabezados

Hay seis elementos de encabezado de sección: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. El elemento <h1> es el más importante y el <h6>, el menos importante. Durante muchos años, se les dijo a los desarrolladores que los encabezados eran utilizados por los navegadores para esquematizar documentos. Originalmente, ese era un objetivo, pero los navegadores nunca implementaron funciones de esquematización de documentos, y el algoritmo de esquema propuesto se quitó oficialmente de la especificación de HTML. Sin embargo, los usuarios de lectores de pantalla dependen en gran medida de los encabezados como estrategia de exploración para conocer el contenido de una página, ya que navegan por los encabezados con la tecla h. Asegurarte de que los niveles de encabezado se implementen de forma lógica, como si estuvieras creando un esquema de un documento, hace que tu contenido sea accesible y es muy recomendable.

De forma predeterminada, los navegadores aplican un estilo a <h1> como el más grande y a <h2> como ligeramente más pequeño, y cada nivel de encabezado subsiguiente es más pequeño de forma predeterminada. Históricamente, las hojas de estilo del usuario-agente también disminuían el tamaño de la fuente de los elementos <h1> anidados dentro de elementos de seccionamiento, como <article>, <aside>, <nav> o <section>.

Algunas hojas de estilo de agentes de usuario incluían los siguientes selectores (o similares) para aplicar estilo a los elementos <h1> anidados como si fueran niveles de encabezado inferiores:

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Sin embargo, el Modelo de objetos de accesibilidad (AOM) y los lectores de pantalla nunca modificaron los niveles de encabezado según el anidamiento; un <h1> anidado siempre se informó como "encabezado, nivel 1". Esto generó una discrepancia en la que los encabezados anidados aparecían visualmente más pequeños, mientras que seguían siendo encabezados de nivel superior para las tecnologías de accesibilidad.

Debido a que la especificación de HTML quitó el algoritmo de esquema del documento, los navegadores quitaron estas reglas heredadas de la hoja de estilo del usuario-agente. Como resultado, los elementos <h1> anidados conservan su tamaño de fuente <h1> estándar en lugar de reducirse automáticamente.

No confíes en anidar elementos <h1> dentro de elementos de división para el diseño visual o la jerarquía estructural. Siempre marca tu contenido con elementos de encabezado secuenciales (<h1> a <h6>) según la estructura del documento. Esto garantiza que tu contenido sea claro y accesible para los motores de búsqueda, los lectores de pantalla y los futuros mantenedores.

Fuera de los encabezados, la mayor parte del texto estructurado se compone de una serie de párrafos. En HTML, los párrafos se marcan con la etiqueta <p>; la etiqueta de cierre es opcional, pero siempre se recomienda.

La sección #about tiene un encabezado y algunos párrafos:

Esta sección no es un punto de referencia, ya que no tiene un nombre de accesibilidad. Para convertirlo en un region, que es un rol de punto de referencia, puedes usar aria-labelledby para proporcionar el nombre de accesibilidad:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Solo crea puntos de referencia si es apropiado. Tener demasiados puntos de referencia puede desorientar rápidamente a los usuarios de lectores de pantalla.

Citas

Cuando marques un artículo o una entrada de blog, es posible que desees incluir una cita o una cita destacada, con o sin una cita visible. Hay elementos para estos tres componentes: <blockquote>, <q> y <cite> para una cita visible, o el atributo cite para proporcionar más información para la búsqueda.

La sección #feedback contiene un encabezado y tres opiniones. Estas opiniones son citas en bloque, algunas de las cuales contienen citas, seguidas de un párrafo que contiene la cita de la cita. Si se omite la tercera revisión para ahorrar espacio, el lenguaje de marcado es el siguiente:

La información sobre el autor de la cita o la referencia no forma parte de la cita y, por lo tanto, no se incluye en el objeto <blockquote>, sino que aparece después de la cita. Si bien estas son citas en el sentido común del término, en realidad no citan un recurso específico, por lo que se encapsulan en un elemento de párrafo <p>.

La cita aparece en tres líneas, incluido el nombre del autor, su rol anterior y su aspiración profesional. El salto de línea <br> crea un salto de línea en un bloque de texto. Se puede usar en direcciones físicas, poesía y bloques de firmas. No se deben usar saltos de línea como retornos de carro para separar párrafos. En su lugar, cierra el párrafo anterior y abre uno nuevo. Usar párrafos para los párrafos no solo es bueno para la accesibilidad, sino que también permite aplicarles un diseño. El elemento <br> es solo un salto de línea y se ve afectado por muy pocas propiedades de CSS.

Si bien proporcionamos información de citas en un párrafo después de cada bloque de citas, las citas que se muestran antes se codifican de esta manera porque no provienen de una fuente externa. Si lo hicieron, se puede (¿debe?) citar la fuente.

Si la opinión se extrajo de un sitio web de opiniones, un libro o algún otro trabajo, el elemento <cite> se podría usar para el título de una fuente. El contenido de <cite> puede ser el título de un libro, el nombre de un sitio web o un programa de TV, o incluso el nombre de un programa informático. La encapsulación <cite> se puede usar tanto si la fuente se menciona de pasada como si se cita o se hace referencia a ella. El contenido de <cite> es la obra, no el autor.

Si la cita de Blendan Smooth se tomó de su revista sin conexión, escribirías el bloque de cita de la siguiente manera:

El elemento de cita <cite> no tiene un rol implícito y debe obtener su nombre de accesibilidad de su contenido. No incluyas un aria-label.

Para proporcionar crédito cuando corresponde cuando no puedes hacer visible el contenido, existe el atributo cite, que toma como valor la URL del documento o mensaje fuente de la información citada. Este atributo es válido tanto en <q> como en <blockquote>. Si bien es una URL, es legible para las máquinas, pero no es visible para el lector:

Si bien la etiqueta de cierre </p> es opcional (y siempre se recomienda), la etiqueta de cierre </blockquote> siempre es obligatoria.

La mayoría de los navegadores agregan relleno a ambas direcciones intercaladas <blockquote> y ponen en cursiva el contenido <cite>. Esto se puede controlar con CSS. El <blockquote> no agrega comillas, pero se pueden agregar con contenido generado por CSS. De forma predeterminada, el elemento <q> agrega comillas con los signos de puntuación adecuados para el idioma.

En la sección #teachers, HAL dice: "Lo siento , pero me temo que no puedo hacerlo". El código para eso, en inglés y francés, es el siguiente:

El elemento de cita en línea, <q>, agrega comillas adecuadas para el idioma. Los estilos predeterminados del agente de usuario incluyen contenido generado de comillas de apertura y cierre:

q::before {content: open-quote;}
q::after {content: close-quote;}

El atributo lang se incluye para que el navegador sepa que, si bien el idioma base de la página se definió como inglés en la etiqueta de apertura <html lang="en-US">, este párrafo de texto está en otro idioma. Esto ayuda a los controles por voz, como Siri, Alexa y VoiceOver, a usar la pronunciación en francés. También le informa al navegador qué tipo de comillas debe renderizar.

Al igual que <blockquote>, el elemento <q> admite el atributo cite.

Entidades HTML

Es posible que hayas notado la secuencia de escape o "entidad". Como < se usa en HTML, debes anularlo con < o con una codificación menos fácil de recordar <. Hay cuatro entidades reservadas en HTML: <, >, & y ". Sus referencias de caracteres son <, >, & y ", respectivamente.

Otras entidades que usarás con frecuencia son © para copyright (©), ™ para marca (™) y   para espacio sin separación. Los espacios sin separación son útiles cuando deseas incluir un espacio entre dos caracteres o palabras y, al mismo tiempo, evitar que se produzca un salto de línea allí. Hay más de 2,000 referencias de caracteres con nombre. Sin embargo, si es necesario, cada carácter, incluidos los emojis, tiene un equivalente codificado que comienza con &#.

Si observas la revisión del taller de ToastyMcToastface (no incluida en la muestra de código anterior), verás algunos caracteres de texto inusuales:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

La última oración de este bloque de citas también se puede escribir de la siguiente manera:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

Hay algunos caracteres sin escape y algunas referencias a caracteres con nombre en este código desordenado. Dado que el conjunto de caracteres es UTF-8, los últimos caracteres de la cita no necesitan un escape, como en este ejemplo. Solo se deben escapar los caracteres que no admite el conjunto de caracteres. Si es necesario, hay muchas herramientas para habilitar el escape de varios caracteres, o bien puedes asegurarte de incluir <meta charset="UTF-8"> en <head>.

Incluso cuando especificas el conjunto de caracteres como UTF-8, debes escapar el carácter < cuando quieras imprimirlo en la pantalla. En general, no es necesario que incluyas las referencias de caracteres con nombre para >, " o &, pero, si quieres escribir un instructivo sobre entidades HTML, debes escribir < cuando le enseñes a alguien a codificar un <. 😀

Ah, y ese emoji de cara sonriente es 😀, pero este documento se declara como UTF-8, por lo que no se escapa.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el texto en HTML.