sudo: Jack of all trades, master of some

Elementos de nivel de texto semánticos de HTML

Comentarios desactivados en Elementos de nivel de texto semánticos de HTML

Muchas veces se hace un (ab)uso incorrecto de alguno de los elementos de texto HTML (en cualquiera de sus versiones). Es por ello que en esta entrada trataré de ilustrar lo más entendible posible y con ejemplos el uso recomendado de estas importantes etiquetas.

Lista (no exahustiva)

Elemento Descripción
em Representa un texto enfatizado
strong Representa un texto de especial importancia
s Representa un contenido que ya no es correcto o relevante
cite Representa el título de una obra (libro, artículo, etc)
q Cita textual inline
abbr Representa una abreviatura o acrónimo
code Código
i Texto expresado en una voz alternativa
b Representa un texto para llamar la atención sin transmitir importancia
u Anotación no textual sin-articular, como etiquetar un texto como mal escrito
mark Representa un texto resaltado o destacado para referencia
ins Representa un contenido añadido al documento
del Representa un contenido eliminado del documento
blockquote Representa una cita textual que agrupa varios elementos

Ejemplos

Es <strong>importante</strong> utilizar <em>elementos semánticos</em> en un documento HTML.

Es importante utilizar elementos semánticos en un documento HTML.

Precio: <s>$9.99</s> <u>$8.99</u>

Precio: $9.99 $8.99

<q cite="http://es.wikiquote.org/wiki/Linus_Torvalds">Si piensas que tus usuarios son idiotas, sólo los idiotas lo usarán.</q>

Si piensas que tus usuarios son idiotas, sólo los idiotas lo usarán.

<blockquote>
    <p>Si piensas que tus usuarios son idiotas, sólo los idiotas lo usarán.</p>
    <cite>Linus Torvalds</cite>
</blockquote>

Si piensas que tus usuarios son idiotas, sólo los idiotas lo usarán.Linus Torvalds

<abbr title="HyperText Markup Language">HTML</abbr>

HTML

<code>echo "esto es código"</code>

echo "esto es código"

<b>Lorem Ipsum</b> es un bloque de texto utilizado como <i>placeholder</i>.

Lorem Ipsum es un bloque de texto utilizado como placeholder.

<mark>Editado: </mark><del>La variable necesaria es foo.</del> <ins>La variable necesaria es bar.</ins>

Editado: La variable necesaria es foo. La variable necesaria es bar.

Conclusiones

El post se trata de incentivar la utilización de estos elementos de forma semántica y no para dar un estilo visual particular (para eso está CSS). Es importante remarcar que en muchos casos hay confusiones a la hora de decidir qué etiqueta usar, por ejemplo: <i> o <em>; <strong> o <b>. La decisión depende de nosotros y de saber aplicar correctamente la semántica.

Referencias