Otros elementos de texto intercalados

Cubrimos la mayoría de los elementos HTML, pero no todos. Un área que no hemos analizado son los elementos de texto intercalados. Al contrario de lo que se cree, el lenguaje HTML se creó originalmente para compartir documentos, 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 elemento <code>. De forma predeterminada, el contenido de texto se muestra en una fuente de ancho fijo. Cuando incluyas varias líneas de código, anida el elemento <code> dentro de un elemento <pre>, 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 elemento <data> vincula un fragmento de contenido determinado con una traducción legible por máquinas. 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 fecha o la hora, se debe usar el elemento <time>, que representa un período específico.

El elemento <time> puede incluir el atributo datetime para proporcionar fechas y horas fáciles de entender en un formato legible por máquinas. El atributo datetime es legible para las máquinas, lo que proporciona información útil para aplicaciones, como calendarios y motores de búsqueda.

Cuando proporciones una muestra de la salida de un programa, usa el elemento <samp> para incluir el texto. Por lo general, el navegador también renderiza este ejemplo o la salida entre comillas en una fuente monoespaciada.

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

El elemento <var> 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 elemento <sup> como superíndice. Existe un elemento de subíndice <sub> similar que especifica 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 se escribe con un tamaño de fuente más pequeño que el texto normal y se ubica 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 atributo cite establecido en el recurso que explica el cambio y el atributo datetime con la fecha o la fecha y hora en formato legible por máquina. El elemento tachado, <s>, se puede usar para indicar que el contenido ya no es pertinente, pero no se quita del documento.

El <ins> es lo opuesto al elemento <del>. Este elemento se usa para indicar texto que se agregó o "insertó", y puede incluir 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 la primera vez que lo uses. Luego, presenta la representación abreviada del término entre las etiquetas de apertura y cierre <abbr>. 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 lector conoce bien el término, como HTML y CSS en esta serie.

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

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

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

Algunos conjuntos de caracteres incluyen pequeñas anotaciones que se colocan arriba o a la derecha de los caracteres para proporcionar información sobre la pronunciación. El elemento <ruby> es el contenedor que se usa para incluir 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 los navegadores que no admiten la visualización de <ruby>. Cuando los navegadores admiten <ruby>, como todos los navegadores perennes, no se muestra el contenido de ningún elemento <ruby>.<rp> El elemento de texto ruby (<rt>) contiene las anotaciones reales. Ambos están anidados dentro de <ruby>.

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

Cómo enfatizar texto

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

• Usa el elemento <em> para enfatizar o destacar un tramo 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 los lectores de pantalla, Alexa y Siri, para proporcionar énfasis.
• Usa el elemento <mark> 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 renderizan el contenido con un peso de fuente más grueso.
• El elemento <cite>, que se explica en conceptos básicos del texto, se usa para marcar los títulos de libros, artículos o cualquier otro trabajo creativo, o bien los metadatos abreviados de referencia o cita de estos, como el número ISBN de un libro.

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

<i>

Los elementos <i> se pueden usar para términos técnicos, palabras extranjeras (con el atributo lang 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 que aparece en la parte inferior de la revisión del taller de Toasty McToastface. El elemento <span> proporciona un contenedor intercalado genérico que no tiene semántica y no representa nada. Este también habría sido un uso adecuado de <i>.

El diseño predeterminado del elemento <i> es renderizar el elemento en fuente cursiva. En este ejemplo, establecemos font-style: normal porque los caracteres que se usan no están disponibles en cursiva.

<u>

El elemento <u> es para el contenido que tiene anotaciones no textuales. Por ejemplo, es posible que quieras anotar palabras con errores ortográficos conocidos. 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 de los procesadores de texto.

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

<b>

El elemento <b> se puede usar para llamar la atención sobre texto que no es importante de otra manera. 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 descanso 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 elemento <hr>. Las letras HR significan "horizontal rule" (línea horizontal). Si bien los navegadores suelen renderizar una línea horizontal, este elemento tiene un significado semántico. El rol predeterminado es separator.

HTML también tiene un elemento que permite separar 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, de manera opcional, insertar un salto de línea. Se usa comúnmente para separar 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 interrumpa solo entre bytes si la línea necesita ajustarse, incluimos el elemento <wbr> en cada oportunidad de interrupció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 ningún nodo secundario, ni elementos anidados ni texto. Como ninguno de estos elementos tiene un "interior" en el que se pueda almacenar contenido, no tienen una etiqueta de cierre.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre el texto intercalado.