Hemos cubierto la mayoría de los elementos HTML, pero definitivamente no todos. Un área que no mencionamos son los elementos de texto intercalados.
Contrariamente a lo que se suele creer, el lenguaje HTML estaba destinado originalmente a compartir documentos, no a videos de gatos. Hay muchos elementos que proporcionan semántica de texto para la documentación. Hay un módulo que abarca vínculos y el elemento <a>. El resto de estos elementos se analizarán 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 monoespaciada. Cuando incluyas varias líneas de código, anida el <code> dentro de un elemento <pre>, que represente 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áquina; el atributo value del elemento proporciona la traducción del contenido del elemento legible por máquina. Si el contenido de <data> está relacionado con la hora o la fecha, se debe usar el elemento <time>, que representa un período específico.
El elemento <time> puede incluir el atributo datetime para proporcionar la hora y las fechas amigables con las personas en un formato legible por máquina.
Debido a que es legible por máquina, el atributo datetime proporciona información útil para aplicaciones como calendarios y motores de búsqueda.
Cuando proporciones un resultado de muestra de un programa, usa el elemento <samp> para encerrar el texto. Por lo general, el navegador renderizará este resultado de muestra o entre comillas en una fuente monoespaciada.
Cuando se proporcionan instrucciones con la interacción del teclado, se puede usar el elemento <kbd>. Representa la entrada textual del usuario desde un teclado, una 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 muchos cálculos matemáticos, considera usar MathML, el lenguaje de marcación matemático basado en XML, para describir la notación matemática.
La potencia de dos en el teorema de Pitágoras usaba el elemento de superíndice <sup>. Hay un elemento de subíndice <sub> similar 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 y otras anotaciones que son más pequeños que la línea de tipo normal y se colocan ligeramente encima o debajo de la línea, respectivamente.
Usa <del> para indicar el texto que se quitó o que se “borró”.
De manera opcional, puedes incluir el cite configurado en el recurso que explica el cambio y el atributo datetime con la fecha o la fecha y hora en un formato de fecha y hora legibles para la máquina. Se puede usar el elemento tachado, <s>, para indicar que el contenido ya no es relevante, pero que en realidad no se quitó del documento.
<ins> es lo opuesto al elemento <del>; se usa para indicar texto que se agregó, o "se insertó", y también, opcionalmente, los atributos cite o datetime.
Compatibilidad con definiciones y lenguajes
Cuando incluyas abreviaturas o acrónimos, proporciona siempre la versión expandida completa del término en texto sin formato en el primer uso, a medida que introduzcas la representación abreviada del término entre las etiquetas <abbr> de apertura y cierre, a menos que el lector lo conozca bien, como "HTML" y "CSS" en esta serie. Solo en este primer caso, cuando se define la abreviatura o el acrónimo, se necesita <abbr>. El atributo title no es necesario ni útil.
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.
Si el término que quieres definir no está en el mismo idioma que el texto que lo rodea, asegúrate de incluir el atributo lang para identificar el idioma.
Cuando se escriben idiomas en diferentes direcciones, HTML proporciona el elemento <bdi> para tratar texto potencialmente bidireccional independiente del texto que lo rodea. Este elemento de internacionalización resulta especialmente útil cuando se inserta contenido de dirección 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 grupos de caracteres incluyen anotaciones pequeñas colocadas arriba o a la derecha de los caracteres para proporcionar información sobre la pronunciación. El elemento <ruby> es el contenedor que se debe usar para contener estas anotaciones que facilitan la lectura de los idiomas escritos, como el coreano, el chino y el japonés. Ruby también se puede usar para hebreo, árabe y vietnamita.
Se incluyó el paréntesis de rubí (<rp>) en la especificación a fin de contener paréntesis de apertura y cierre para navegadores que no admiten la visualización de <ruby>. Cuando los navegadores admiten <ruby>, algo que sí lo hacen todos los navegadores perdurables, no se muestra el contenido de los elementos <rp>. El elemento de texto rubí (<rt>) contiene las anotaciones reales. Ambos están anidados en <ruby>.
Ten en cuenta que el paréntesis no podrá verse si tu navegador es compatible con <ruby>.
Cómo enfatizar el texto
Hay varios elementos que se pueden usar para enfatizar texto según la razón semántica para enfatizar el texto (en lugar de por razones de presentación, ya que es un trabajo para CSS).
- Usa el elemento
<em>para enfatizar 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 usuarios-agentes auditivos, como lectores de pantalla, Alexa y Siri, para dar énfasis. - Usa el elemento
<mark>para identificar o destacar texto que de alguna manera es relevante, como destacar (o "marcar") el caso de los términos de búsqueda en los resultados de la búsqueda. Esto permite que el contenido marcado se identifique rápidamente sin agregar énfasis ni importancia. - El elemento
<strong>identifica que el texto tiene una importancia importante. Los navegadores suelen procesar el contenido con un grosor de fuente más grueso. - El elemento
<cite>, que se incluye en los conceptos básicos del texto, se usa para marcar los títulos de libros, artículos y otras obras creativas, o bien una referencia abreviada o metadatos de citas para estos, como el número ISBN de un libro.
Hay tres elementos que dejaron de estar disponibles temporalmente, pero se volvieron a agregar en HTML. Se deben usar con moderación, si corresponde, ya que proporcionan poco o ningún valor semántico, y CSS siempre debe usarse para definir el estilo en los elementos HTML.
<i>
Los elementos <i> se pueden usar para términos técnicos, palabras extranjeras (de nuevo, con el atributo lang que identifica el idioma), pensamientos o nombres de envíos. El elemento se usa para diferenciar el contenido intercalado del texto que lo rodea por un motivo específico, como el texto idiomático, los términos técnicos y las designaciones taxonómicas. Este elemento no debe usarse solo para aplicar cursiva al texto.
MLW usa un elemento <span> para el texto extraño 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 estilo predeterminado del elemento <i> consiste en renderizar el elemento en cursiva. En este ejemplo, se establece font-style: normal porque los caracteres usados no están disponibles en cursiva.
<u>
El elemento <u> es para contenido que tiene anotaciones no textuales. Por ejemplo, es posible que desees anotar palabras mal escritas a sabiendas. De forma predeterminada, el contenido aparece subrayado, pero esto se puede controlar con CSS. Por ejemplo, se puede agregar un subrayado ondulado de color rojo para imitar los indicadores de error gramatical del procesador de textos.
<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 sea importante de otra manera. Este elemento no transmite información semántica especial y solo debe usarse cuando ninguno de los otros elementos de esta sección se ajusta al propósito. No se proporciona ningún ejemplo porque no pude crear un caso de uso válido. Así es como es el "último recurso" de este elemento.
Espacio en blanco
Cuando deseas saltos de línea, como cuando escribes poesía o una dirección física, el elemento de salto de línea de cierre automático, <br>, se usa 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 pausa temática entre secciones de contenido tangencial, como entre los capítulos de un libro o entre el monólogo de 5,000 palabras y la receta que los usuarios buscan, incluye un elemento <hr>. RR.HH. significa "regla horizontal". Si bien los navegadores generalmente renderizan una línea horizontal, este elemento tiene significado semántico. El rol predeterminado es separator.
HTML también tiene un elemento que permite romper palabras. El elemento <wbr> de cierre automático sugiere al navegador que, si una palabra puede desbordar su contenedor, este es un punto en el que el navegador puede romper la línea. Por lo general, se usa para dividir palabras en URL largas, pero no agrega guiones.
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 debe ajustarse, incluimos el elemento <wbr> en cada oportunidad de pausa:
<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 elementos vacíos, lo que significa que no pueden tener nodos secundarios, ni elementos anidados ni texto. Como ninguno de ellos tiene una "parte interior" en la que se puede almacenar el contenido, no tienen etiqueta de cierre.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre texto intercalado.
¿Qué elemento se debe usar para mostrar una muestra de código?
<code><data><kbd>¿Para qué se usa el elemento <ruby>?