Conceptos básicos de texto

Así como tu editor de texto proporciona encabezados de <h1> a <h6>, junto con una gran cantidad de formas de dar formato a secciones de texto de maneras significativas y visuales, HTML proporciona un conjunto muy similar de elementos semánticos y no semánticos para dar significado a la prosa.

En esta sección, se abordan las formas principales de agregar lenguaje de marcado para el texto o los conceptos básicos del texto. Luego, analizaremos los atributos antes de explorar otras formas de marcar texto, como listas, tablas y formularios.

Encabezados, revisados

Hay seis elementos de encabezado de sección, <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, donde <h1> es el más importante y <h6> el menos. Durante muchos años, se les dijo a los desarrolladores que los navegadores usaban encabezados para delinear los documentos. Originalmente, ese era un objetivo, pero los navegadores no implementaron las funciones de esquema. Sin embargo, los usuarios de lectores de pantalla usan los encabezados como estrategia de exploración para obtener información sobre el contenido de la página, cuando navegan por los encabezados con la tecla h. Por lo tanto, es muy recomendable que te asegures de que los niveles de encabezado se implementen como lo harías con el esquema de un documento. Esto hace que tu contenido sea accesible y, de todos modos, se recomienda.

De forma predeterminada, los navegadores tienen el diseño <h1> el más grande, <h2> un poco más pequeño y, de forma predeterminada, cada nivel de encabezado subsiguiente es más pequeño. Curiosamente, de forma predeterminada, los navegadores también disminuyen el tamaño de la fuente <h1> según la cantidad de elementos <article>, <aside>, <nav> o <section> en los que se anida.

Algunas hojas de estilo de usuario-agente incluyen los siguientes selectores, o similares, para aplicar diseño a elementos <h1> anidados como si fueran de un nivel menos importante:

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, o AOM, informa el nivel del elemento correctamente; en este caso, "encabezado, nivel 1". Ten en cuenta que el navegador no realiza esta acción para otros niveles de encabezados. Dicho esto, no utilices un estilo de navegador basado en el nivel de encabezado. Si bien los navegadores no admiten el esquema, imagina que sí. Marca los encabezados del contenido como si lo fueran. De esta manera, tu contenido tendrá sentido para los motores de búsqueda, los lectores de pantalla y los encargados de mantenimiento futuros (que podrían ser tú).

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 #Acerca de 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 convertir esto en un region, que es un rol de punto de referencia, puedes usar aria-labelledby para proporcionar el nombre accesible:

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

Crea puntos de referencia solo cuando sea apropiado. Tener demasiados puntos de referencia puede desorientar rápidamente a los usuarios de lectores de pantalla.

Citas y citas

Cuando incluyas lenguaje de marcado en un artículo o una entrada de blog, es recomendable que incluyas una cita o una cita inicial, 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 son bloques entrecomillados, algunos de los cuales contienen comillas, seguidos de un párrafo con la cita de la cita. Si omite la tercera opinión para ahorrar espacio, el lenguaje de marcado es el siguiente:

La información sobre el autor de la cita, o la cita, no forma parte de la cita y, por lo tanto, no se encuentra en el <blockquote>, sino que aparece después de ella. Si bien se trata de citas en el sentido general 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, que incluyen el nombre del autor, el puesto anterior y la 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, en poesía y en bloques de firmas. Los saltos de línea no se deben usar como un retorno de carro en párrafos separados. En su lugar, cierra el párrafo anterior y abre uno nuevo. El uso de párrafos para los párrafos no solo es bueno para la accesibilidad, sino que también permite aplicar estilos. El elemento <br> es solo un salto de línea; se ve afectado por muy pocas propiedades de CSS.

Si bien proporcionamos información sobre citas en un párrafo después de cada bloque entrecomillado, las comillas que se mostraron antes se codifican de esta manera porque no provienen de una fuente externa. Si así fue, la fuente puede (¿debería?) citarse.

Si la opinión se extrajo de un sitio web de opiniones, un libro o alguna otra obra, se podría usar el elemento <cite> 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, un programa de TV o incluso el nombre de un programa informático. El encapsulamiento <cite> se puede usar sin importar si la fuente se menciona en el paso o 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 tomara de su revista sin conexión, deberías escribir el bloque entrecomillado así:

El elemento de cita <cite> no tiene una función implícita y debe obtener su nombre accesible a partir de su contenido. No incluyas aria-label.

Para otorgar crédito a los casos en los que corresponde crédito cuando no puedes hacer visible el contenido, existe el atributo cite, que toma como valor la URL del documento o mensaje de origen de la información citada. Este atributo es válido en <q> y <blockquote>. Si bien es una URL, podrá leerla automáticamente, pero el lector no podrá verla:

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 padding a las direcciones intercaladas de <blockquote> y al contenido de <cite> en cursiva. Esto se puede controlar con CSS. <blockquote> no agrega comillas, pero se pueden agregar con contenido generado por CSS. El elemento <q> agrega comillas de forma predeterminada, utilizando comillas apropiadas para el idioma.

En la sección #teachers, HAL se cita con el mensaje "Lo siento, pero tengo miedo de no poder hacer eso". El código para eso, en inglés y francés, es:

El elemento de comillas intercaladas, <q>, agrega citas adecuadas para el lenguaje. Los estilos predeterminados de usuario-agente incluyen contenido generado con comillas abiertas y cerradas:

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

Se incluye el atributo lang para informarle al navegador 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 un idioma diferente. Esto ayuda a que los controles por voz, como Siri, Alexa y voiceOver, usen la pronunciación en francés. También informa al navegador qué tipo de citas 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". Debido a que < se usa en HTML, debes escaparlo mediante < o 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 los derechos de autor (©), ™ para la Marca (TM) y   para los espacios de no separación. Los espacios de no separación son útiles cuando quieres incluir un espacio entre dos caracteres o palabras y, al mismo tiempo, evitar que aparezca un salto de línea. 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 opinión del taller de ToastyMcToastface (no incluida en la muestra de código anterior), hay 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 entrecomillado también se puede escribir de la siguiente manera:

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

En este desastre de código, hay algunos caracteres sin escape y algunas referencias a caracteres con nombre. Debido a que el grupo de caracteres es UTF-8, no es necesario escapar los últimos caracteres del bloque entrecomillado, como se muestra en este ejemplo. Solo se deben escapar los caracteres que no son compatibles con el grupo 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 el <head>.

Incluso cuando especificas el grupo de caracteres como UTF-8, debes escapar de < cuando quieras imprimir ese carácter en la pantalla. Por lo general, no necesitas incluir las referencias a caracteres con nombre para >, " o &; pero si deseas escribir un instructivo sobre entidades HTML, debes escribir < cuando le enseñes a alguien a codificar un <. 😀

Ese emoji sonriente es 😀, pero este documento está declarado como UTF-8, por lo que no tiene escape.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre texto en HTML.