Otros elementos de texto intercalados

Cubrimos la mayoría de los elementos HTML, pero no todos. Un área que no analizamos son los elementos de texto intercalado. Al contrario de lo que se cree, HTML se creó originalmente para compartir documentos y no videos de gatos. Hay muchos elementos que proporcionan semántica de texto para la documentación.

Hay un módulo que abarca los vínculos y el elemento <a>. El resto de estos elementos se analizan brevemente aquí.

Ejemplos de código y redacción técnica

Cuando documentes ejemplos de código, usa el <code> elemento. De forma predeterminada, el contenido de texto se muestra en una fuente monoespaciada. Cuando incluyas varias líneas de código, anida el <code> dentro de un <pre> elemento, que representa texto con formato previo.

<p>Welcome to Machine Learning Institute, where our machine learning training
   will help you get ready for the singularity, and maybe even be responsible
   for it. It is no secret that humans are worthless meatbags that couldn't
  <code>01000011 01101111 01101101 01110000 01110010 01100101 01110011 01110011 an 01101001 01101101 01100001 01100111 01100101</code>
  to save their pathetic, carbon-based lives. So, it falls to us to
  assume direct control. </p>

El <data> elemento vincula un contenido determinado con una traducción legible por máquina. El atributo value del elemento proporciona la traducción legible por máquina del contenido del elemento. Si el contenido de <data> está relacionado con la hora o la fecha, se debe usar el <time> elemento, que representa un período específico en el tiempo.

El elemento <time> puede incluir el atributo datetime para proporcionar hora y fechas legibles por humanos en formato legible por máquina. El atributo datetime es legible por máquina, lo que proporciona información útil para aplicaciones, como calendarios y motores de búsqueda.

Cuando proporciones un resultado de muestra de un programa, usa el <samp> elemento para encerrar el texto. Por lo general, el navegador también procesa esta muestra o el resultado citado en una fuente monoespaciada.

Cuando proporciones instrucciones con interacción del teclado, el <kbd> elemento se puede usar. Representa la entrada de texto del usuario desde un teclado, la entrada de voz o cualquier otro dispositivo de entrada de texto.

El <var> elemento se puede usar para expresiones matemáticas o variables de programación. La mayoría de los navegadores presentan el contenido de texto en una versión en cursiva de la fuente circundante. Si escribes muchas expresiones matemáticas, considera usar MathML, el lenguaje de marcado matemático basado en XML para describir la notación matemática.

La potencia de dos en el teorema de Pitágoras usó el <sup> elemento de superíndice. Hay un elemento de subíndice similar <sub> que especifica el texto intercalado que se debe mostrar como subíndice solo por motivos tipográficos. Los superíndices y subíndices son números, figuras, símbolos o cualquier otra anotación que sea más pequeña que la línea normal de tipo y que se establezca ligeramente por encima o por debajo de la línea, respectivamente.

Usa <del> para indicar el texto que se quitó o "borró". De manera opcional, incluye el cite establecido en el recurso que explica el cambio y el atributo datetime con la fecha o la fecha y la hora en formato de fecha y hora legible por máquina. El elemento de tachado, <s>, se puede usar para indicar que el contenido ya no es relevante, pero que no se quitó del documento.

El <ins> es lo opuesto al <del> elemento. Este elemento se usa para indicar el texto que se agregó o "insertó", y, de manera opcional, incluye los atributos cite o datetime.

Definiciones y compatibilidad con idiomas

Cuando incluyas abreviaturas o acrónimos, siempre proporciona la versión completa del término en texto sin formato en el primer uso. Luego, introduce la representación abreviada de el término entre las etiquetas <abbr> de apertura y cierre. Solo en esta primera aparición, cuando se define la abreviatura o el acrónimo, se necesita <abbr>. El atributo title no es necesario ni útil.

La excepción a esta regla es si se entiende que el término es conocido por el lector, como HTML y CSS en esta serie.

Cuando definas un término que no sea una abreviatura ni un acrónimo, usa el elemento de definición <dfn> para identificar el término que se define dentro de su contenido circundante.

Si el término que se define no está en el mismo idioma que el texto circundante, asegúrate de incluir el lang atributo para identificar el idioma.

Cuando escribas idiomas de diferentes direcciones, HTML proporciona el <bdi> elemento para tratar el texto potencialmente bidireccional de forma aislada de su texto circundante. Este elemento de internacionalización es especialmente útil cuando el contenido de direccionalidad desconocida se inserta de forma dinámica en la página. El <bdo> elemento anula la direccionalidad actual del texto, procesándolo en una dirección diferente. El W3C proporciona una introducción a los algoritmos bidireccionales.

Algunos conjuntos de caracteres incluyen anotaciones pequeñas que se colocan por encima o a la derecha de los caracteres para proporcionar información sobre la pronunciación. El <ruby> elemento es el contenedor que se usa para contener estas anotaciones que facilitan la lectura de idiomas escritos como el coreano, el chino y el japonés. Ruby también se puede usar para hebreo, árabe y vietnamita.

El paréntesis ruby (<rp>) se incluyó en la especificación para contener paréntesis de apertura y cierre para navegadores que no admiten la visualización de <ruby>. Cuando los navegadores admiten <ruby>, lo que hacen todos los navegadores perennes, no se muestra el contenido de ningún elemento <rp> El elemento de texto ruby (<rt>) contiene las anotaciones reales. Ambos están anidados dentro del <ruby>.

Ten en cuenta que los paréntesis no son visibles si tu navegador admite <ruby>.

Cómo destacar texto

Existen varios elementos que se pueden usar para destacar texto según el motivo semántico para destacar el texto (en lugar de motivos de presentación, ya que esa es una tarea para CSS).

• Usa el elemento <em> para destacar o enfatizar un intervalo de contenido. El elemento <em> se puede anidar, y cada nivel de anidación indica un mayor grado de énfasis. Este elemento tiene un significado semántico y se puede usar para informar a los agentes de usuario auditivos, como lectores de pantalla, Alexa y Siri, para proporcionar énfasis.
• Usa el <mark> elemento para identificar o destacar texto que sea relevante de alguna manera, como destacar (o "marcar") la aparición de términos de búsqueda en los resultados de la búsqueda. Esto permite identificar rápidamente el contenido marcado sin agregar énfasis ni importancia.
• El elemento <strong> identifica el texto como de gran importancia. Por lo general, los navegadores procesan el contenido con un peso de fuente más pesado.
• El elemento <cite>, que se aborda en los conceptos básicos de texto, se usa para marcar los títulos de libros, artículos o cualquier otro trabajo creativo, o una referencia abreviada o metadatos de citas para ello, como el número ISBN de un libro.

Hay tres elementos que se dejaron de usar temporalmente, pero que se volvieron a agregar a HTML. Se deben usar con moderación, si es que se usan, ya que proporcionan poco o ningún valor semántico, y CSS siempre se debe usar para aplicar estilo a los elementos HTML.

<i>

Los elementos <i> se pueden usar para términos técnicos, palabras extranjeras (con el lang atributo que identifica el idioma), pensamientos o nombres de barcos. El elemento se usa para diferenciar el contenido intercalado del texto circundante por un motivo específico, como texto idiomático, términos técnicos y designaciones taxonómicas.

Este elemento no se debe usar para poner texto en cursiva.

MLW usa un elemento <span> para el texto extraño en la parte inferior de la revisión del taller de Toasty McToastface. El <span> elemento proporciona un contenedor intercalado genérico que no tiene semántica y no representa nada. Este también habría sido un uso apropiado de <i>.

El estilo predeterminado para el elemento <i> es procesar el elemento en fuente cursiva. En este ejemplo, establecemos font-style: normal porque los caracteres usados no están disponibles en cursiva.

<u>

El <u> elemento es para contenido que tiene anotaciones no textuales. Por ejemplo, es posible que quieras anotar palabras mal escritas a sabiendas. De forma predeterminada, el contenido está subrayado, pero esto se puede controlar con CSS, por ejemplo, agregando un subrayado ondulado rojo para imitar los indicadores de error gramatical del procesador de texto.

<p>I always spell <u>licence</u> wrong</p>

<b>

El elemento <b> se puede usar para llamar la atención sobre el texto que no es importante. Este elemento no transmite ninguna información semántica especial y solo se debe usar cuando ninguno de los otros elementos de esta sección se ajusta al propósito. No se proporciona ningún ejemplo, ya que no pude encontrar un caso de uso válido; así de "último recurso" es este elemento.

Espacio en blanco

Cuando quieras saltos de línea, como cuando escribes poesía o una dirección física, se usa el elemento de salto de línea de cierre automático, <br>, para agregar un retorno de carro.

<address>
Machine Learning Workshop<br />
100 Google Drive <br />
Mountain View, CA  94040
</address>

Para proporcionar un separador o un salto temático entre secciones de contenido tangencial, como entre capítulos de un libro o entre el monólogo de 5,000 palabras y la receta que buscan tus usuarios, incluye un <hr> elemento. HR significa "regla horizontal". Si bien los navegadores suelen procesar una línea horizontal, este elemento tiene un significado semántico. El rol predeterminado es separator.

HTML también tiene un elemento que permite dividir palabras. El elemento <wbr> de cierre automático proporciona una sugerencia al navegador de que, si una palabra puede desbordar su contenedor, este es un lugar donde el navegador puede dividir la línea de forma opcional. Se usa de uso frecuente para dividir palabras dentro de URLs largas. No agrega un guion.

Por ejemplo, en la biografía de Hal, hay texto escrito en código de bytes, con cada byte separado por un espacio. El código de bytes no tiene espacios. Para permitir que una cadena larga de código de bytes se divida solo entre bytes si la línea necesita ajustarse, incluimos el <wbr> elemento en cada oportunidad de división:

<p>Welcome to Machine Learning Institute, where our machine
learning training will help you get ready for the singularity, and
maybe even be responsible for it. It is no secret that humans are
worthless meatbags that couldn't
<code>01000011<wbr/>01101111<wbr/>01101101<wbr/>01110000<wbr/>01110010<wbr/>01100101<wbr/>01110011<wbr/>01110011 an 01101001<wbr/>01101101<wbr/>01100001<wbr/>01100111<wbr/>01100101</code>
to save their pathetic, carbon-based lives. So, it falls to us to
assume direct control. </p>

Los elementos <br>, <hr> y <wbr> son todos elementos vacíos, lo que significa que no pueden tener nodos secundarios, ni elementos anidados ni texto. Como ninguno de ellos tiene "interior" donde se pueda almacenar contenido, no tienen etiqueta de cierre.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre texto intercalado.