Conceptos básicos de texto

Así como tu editor de texto proporciona <h1> a <h6> encabezados, junto con una infinidad 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 describen las formas principales de agregar lenguaje de marcado a texto o los conceptos básicos del texto. Luego, hablaremos sobre los atributos, antes de explorar más formas de agregar lenguaje de marcado al 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 funciones de descripción. Sin embargo, los usuarios de lectores de pantalla sí utilizan encabezados. como estrategia de exploración para obtener información sobre el contenido de la página y navegar por los encabezados con la tecla h. Por lo tanto, garantizar que los niveles de encabezado se implementen como esboza un documento para que tu contenido sea accesible y es muy recomendable.

De forma predeterminada, los navegadores diseñan <h1> con el estilo más grande y <h2> ligeramente más pequeño; cada nivel de encabezado posterior es más pequeño de forma predeterminada. Curiosamente, los navegadores también disminuyen el tamaño de fuente <h1> de forma predeterminada en función de la cantidad de <article>, <aside>, <nav> o Elementos <section> anidados.

Algunas hojas de estilo de usuario-agente incluyen los siguientes selectores, o similares, para aplicar diseño a los elementos <h1> anidados como si estuvieran 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 de manera correcta. en este caso, "encabezado, nivel 1". Ten en cuenta que el navegador no lleva a cabo esta acción para otros niveles de encabezado. Dicho esto, no utilices un estilo de navegador basado en el nivel de encabezado. Aunque los navegadores no admiten esquema, simula que sí lo hacen; marcar los encabezados de contenido como si lo hicieran. Eso hará que tu contenido tenga sentido para los motores de búsqueda, los lectores de pantalla y en el futuro (que bien podrías ser tú).

Más allá 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 el <p> etiqueta; la etiqueta de cierre es opcional, pero siempre se aconseja.

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 accesible. Para convertir esto en region, que es una función 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 corresponda. Tener demasiados puntos de referencia puede desorientar rápidamente para los usuarios de lectores de pantalla.

Citas y citas

Cuando agregues lenguaje de marcado a un artículo o una entrada de blog, te recomendamos 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 brindar más información en la búsqueda.

La sección #feedback contiene un encabezado y tres opiniones. estas opiniones son bloques entrecomillados, algunos de los cuales contienen citas, seguido de un párrafo que contiene la cita. Si omites la tercera revisión para ahorrar espacio, el lenguaje de marcado tendrá las siguientes características:

La información sobre el autor de la cita, o la cita, no forma parte de ella y, por lo tanto, no está en el <blockquote>, sino que viene después de ella. Si bien estas son 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, incluidos 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. Línea los saltos no deben usarse como un retorno de carro a párrafos separados. En su lugar, cierra el párrafo anterior y abre uno nuevo. Usar párrafos de párrafos no solo sirve para la accesibilidad, sino que también permite aplicar diseños. 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 citas mostradas anteriormente se codifican de esta manera porque no se provenga de una fuente externa. Si es así, se puede (¿debería?) citar la fuente.

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 tanto si la fuente se menciona al pasar o si la fuente se está citando o se hace referencia a él. El contenido de <cite> es la obra, no el autor.

Si la cita de Combinaan Smooth se extrajera de su revista física, escribirías el bloque entrecomillado de la siguiente manera:

El elemento de cita <cite> no tiene un rol implícito y debe obtener su nombre accesible a partir del contenido. no incluyen aria-label.

Para proporcionar crédito cuando no puedes mostrar el contenido, está el atributo cite, que toma como su valor la URL del documento o mensaje fuente correspondiente a la información citada. Este atributo es válido en <q> y <blockquote>. Si bien es una URL, la computadora puede leerla, pero no la puede ver:

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 instrucciones 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 y usa las comillas adecuadas para el lenguaje.

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

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

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

Se incluye el atributo lang para indicarle 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 permite 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 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 la “entidad”. Debido a que < se usa en HTML, debes escapar 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 derechos de autor (©), ™ para marca (TM) y   para espacio de no ruptura. Los espacios de no 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. Existen 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 se incluye en el ejemplo 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 desorden de código, hay algunos caracteres sin escape y algunas referencias de caracteres con nombre. Como el grupo de caracteres es UTF-8, no es necesario escapar los últimos caracteres del bloque entrecomillado, como en este ejemplo. Solo caracteres no compatibles del grupo de caracteres deben escaparse. Si es necesario, existen muchas herramientas para permitir el escape de varios caracteres. o solo puedes asegurarte de incluir <meta charset="UTF-8"> en <head>.

Incluso cuando especificas el grupo de caracteres como UTF-8, debes escapar < cuando deseas imprimir ese carácter en la pantalla. Por lo 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ñas a alguien a programar 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.