Otros elementos de texto intercalados

Hemos cubierto la mayoría de los elementos HTML, pero definitivamente no todos. Un área que no analizamos son los elementos de texto intercalados. Contrariamente a lo que se cree, el lenguaje HTML se diseñó 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 aquí se analizarán brevemente.

Ejemplos de código y escritura técnica

Cuando documentes ejemplos de código, usa el elemento <code>. De de forma predeterminada, el contenido del texto se muestra en fuente monoespaciada. Cuando incluyas varias líneas de código, anida el <code> dentro de un El elemento <pre>, que representa el 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 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 de el elemento. Si el contenido de <data> está relacionado con la hora o la fecha, el objeto <time> que representa un período específico, se debe usar en su lugar.

El elemento <time> puede incluir el atributo datetime para proporcionar horas y fechas fáciles de usar en un formato compatible con computadoras. Como 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 <samp>. para encerrar el texto. Por lo general, el navegador también renderizará este resultado de muestra o entre comillas en una fuente espaciada.

Cuando se proporcionan instrucciones para la interacción con el teclado, la <kbd> un elemento de Kubernetes. Representa entradas textuales 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 marcado XML Lenguaje de marcación matemático para describir la notación matemática.

La potencia de dos en el teorema de Pitágoras usó el superíndice <sup> . Existe un elemento subíndice <sub> similar que especifica texto intercalado que se debe mostrar como subíndice solo por razones tipográficas. Los superíndices y subíndices son números, figuras, símbolos u otras anotaciones que sean más pequeñas que la línea normal de tipo y se encuentren ligeramente por encima o por debajo de la línea; respectivamente.

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

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

Definiciones y compatibilidad de idiomas

Cuando incluyas abreviaturas o siglas, incluye siempre la versión expandida completa del término en texto sin formato la primera vez que se usa. cuando ingreses la representación abreviada del término entre la apertura y el cierre <abbr> etiquetas; a menos que el lector conozca el término, por ejemplo, "HTML" y "CSS" de esta serie. Solo en este primer caso, cuando se define la abreviatura o el acrónimo, es <abbr>. El atributo title no es necesario ni útil.

Cuando definas un término que no sea una abreviatura ni un acrónimo, usa la definición <dfn>. para identificar el término que se define en el contenido que lo rodea.

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

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

Algunos grupos de caracteres incluyen pequeñas anotaciones ubicadas arriba o a la derecha de los caracteres para proporcionar información en la pronunciación. El elemento <ruby> es el contenedor que usan para contener estas anotaciones que hacen que los idiomas escritos como el coreano, el chino y el japonés sean más fáciles de leer. Rita también se puede usar en hebreo, árabe y vietnamita.

Se incluyó el paréntesis rubí (<rp>) en la especificación para contienen paréntesis de apertura y cierre para los navegadores que no admite la visualización de <ruby>. Cuando los navegadores admiten <ruby>, como todos los navegadores perdurables sí, el contenido de cualquier elemento <rp> no se muestran. El elemento de texto rubí (<rt>) contiene las anotaciones reales. Ambos están anidados dentro de <ruby>.

Ten en cuenta que el paréntesis no será visible si tu navegador es compatible con <ruby>.

Destacar texto

Hay varios elementos que se pueden usar para enfatizar texto basándose en la razón semántica para enfatizar el texto (en lugar de por motivos de presentación, ya que es un trabajo para CSS).

• Usa el elemento <em> para enfatizar o destacar 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 datos semánticos y se puede usar para informar a usuarios-agentes auditivos como lectores de pantalla, Alexa y Siri para enfatizar el tema.
• Usa el elemento <mark> para identificar o destacar texto. que sea de alguna manera relevante, como destacar (o "marcar") los casos en que aparecen los términos de búsqueda en los resultados de la búsqueda. Esto permite contenido marcado para identificarse rápidamente sin agregar énfasis ni importancia.
• El elemento <strong> identifica el texto como sólido importancia. Por lo general, los navegadores renderizan el contenido con un grosor de fuente más grueso.
• El elemento <cite>, que se aborda en los conceptos básicos de texto Se usa para marcar títulos de libros, artículos u otras obras creativas, o una referencia abreviada o metadatos de cita para tal fin. como el número ISBN de un libro.

Hay tres elementos que dejaron de estar disponibles temporalmente, pero que se volvieron a agregar en HTML. Deben usarse con moderación, si lo hacen, ya que proporcionan poco o ningún valor semántico y siempre se debe usar CSS para aplicar estilo a elementos HTML.

<i>

Los elementos <i> se pueden usar para términos técnicos o palabras extranjeras (de nuevo, con el atributo lang identificando la lenguaje), los pensamientos o los nombres de naves. El elemento se usa para diferenciar el contenido intercalado del texto que lo rodea por un motivo específico. como texto idiomático, términos técnicos y designaciones taxonómicas. Este elemento no debe usarse simplemente para aplicar cursiva al texto.

MLW usa un elemento <span> para el texto extraño que está en la parte inferior de la opinión del taller de Toasty McToastface. La <span> proporciona un contenedor intercalado genérico que no tiene semántica ni 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, configuramos 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: te recomendamos anotar palabras mal escritas a sabiendas. De forma predeterminada, el contenido está subrayado, pero esto se puede controlar con CSS, como agregar un subrayado ondulado en rojo para imitar los indicadores de errores gramaticales 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 el texto que no se importantes. Este elemento no transmite información semántica especial y solo debe usarse cuando ninguna de las otras elementos de esta sección se ajustan al propósito. No se brinda ningún ejemplo, ya que no pude encontrar un caso de uso válido. así es como el "último recurso" este elemento.

Espacio en blanco

Si quieres saltos con líneas, 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 separación temática, 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 tus usuarios realmente buscan, incluye una <hr>. . RR.HH. significa "regla horizontal". Si bien los navegadores suelen renderizar una línea horizontal, este elemento tiene un significado semántico. El el role predeterminado es separator.

HTML también tiene un elemento que permite romper palabras. La <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 romper la línea de manera opcional. Esto se usa comúnmente 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. Código de bytes no tiene espacios. Para permitir que una larga cadena de código de bytes se divida solo entre bytes si la línea se debe unir, incluimos el elemento <wbr> en cada oportunidad de receso:

<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 están anidados. ni texto. Como ninguno de estos tiene un "interior" donde se puede almacenar el contenido, no tienen etiqueta de cierre.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre texto intercalado.