Elementos de nivel de texto semánticos de HTML
Comentarios desactivados en Elementos de nivel de texto semánticos de HTMLMuchas 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.