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.
¿Qué elemento se debe usar para mostrar una muestra de código?
<code>
<kbd>
<data>
¿Para qué se usa el elemento <ruby>
?