Hemos hablado que existen múltiples etiquetas HTML dentro del lenguaje HTML5. Y la mayoría pertenecen a dos grupos principales:
- Las etiquetas que contienen fragmentos de texto (dan significado o contexto a esos fragmentos)
- Las etiquetas que agrupan otras etiquetas (contienen y agrupan información variada)
En este apartado vamos a hablar del primer grupo, que son las etiquetas que utilizamos para separar fragmentos de textos por motivos semánticos (lo más importante de entender) y/o motivos visuales.
En el siguiente fragmento de código, tenemos la etiqueta <p>, que pertenece al segundo grupo (agrupación), mientras que la etiqueta <strong> forma parte del primer grupo (semántica de texto):
<p>Hola, esto es un pequeño <strong>ejemplo</strong>.</p>
Hay que entender que las etiquetas de agrupación, por lo general son etiquetas de bloque. Por otro lado, las etiquetas que permiten dar semántica a los textos son etiquetas en línea. Esto es muy importante entenderlo, ya que nos ayudará a diferenciarlas rápidamente.
Si no conoces la diferencia entre etiquetas de bloque (block) y en línea (inline), echa un vistazo a la documentación de LenguajeCSS, concretamente a la propiedad display de CSS.
Fragmentos de texto
En primer lugar, existe una serie de etiquetas HTML simples para seleccionar un fragmento de texto y dotarlo de un significado semántico especial. Lo principal es entender que no se hace sólo por mera intención visual, sino porque se le quiere dar un significado semántico, y además, quizás también por una cuestión visual:
| Etiqueta | Descripción | Ejemplo | Más info |
|---|---|---|---|
<a> | Fragmento de texto que enlaza a otra página diferente. | manz.dev | <a> |
<strong> | Fragmento de texto importante o palabras clave. | Texto importante | <strong> |
<em> | Fragmento de texto enfatizado respecto a la frase que lo contiene. | Texto enfatizado | <em> |
<mark> | Fragmento de texto resaltado, simulando estar marcado con rotulador amarillo. | Texto marcado | <mark> |
<b> | Fragmento de texto sin importancia destacable (fines utilitarios). | Texto destacado | <b> |
<i> | Fragmento de texto con voz o tono alternativo al resto. | Texto alternativo | <i> |
<u> | Fragmento de texto para nombres propios o escritura incorrecta intencionada. | «Manz» | <u> |
<s> | Fragmento de texto inexacto o que ya no es relevante. | <s> | |
<span> | Fragmento de texto genérico sin significado (útil para seleccionar). | Fragmento de texto | <span> |
Estas son unas de las etiquetas más utilizadas para separar fragmentos de texto en HTML. Sin embargo no son las únicas, hay algunas más que veremos a continuación.
OJO: Algunas de estas etiquetas, en versiones anteriores de HTML tenían un significado diferente, como por ejemplo las etiquetas
<b>,<i>o<u>.
Fragmentos con significado
Las siguientes etiquetas HTML también nos permiten modificar el significado semántico de la información que contienen de una forma muy particular. Son menos utilizadas que las anteriores, sin embargo, también forman parte de la lista de etiquetas semánticas de texto:
| Etiqueta | Descripción | Ejemplo | Más info |
|---|---|---|---|
<sup> | Superíndice | 242 | <sup> |
<sub> | Subíndice | 242 | <sub> |
<small> | Anotaciones menores | Pequeña puntualización | <small> |
<cite> | Fragmento de texto con el título de un trabajo creativo: obras, libros... | Videojuego: To the Moon | <cite> |
<q> | Cita o frase extraída de otro contexto. | Frase | <q> |
<abbr> | Abreviatura o acrónimo. | JS | <abbr> |
<dfn> | Definición: término que posteriormente será definido. | CSS | <dfn> |
Fragmentos técnicos/informáticos
Existen una serie de etiquetas HTML ligeramente orientadas a aspectos matemáticos o informáticos como combinaciones de teclado del usuario, mensajes de programas o representación de variables matemáticas o informáticas:
| Etiqueta | Descripción | Ejemplo | Más info |
|---|---|---|---|
<kbd> | Entrada de información del usuario (generalmente, combinación de teclado). | CTRL | <kbd> |
<samp> | Salida de información de un programa informático. | ERROR 5 | <samp> |
<var> | Variable (contexto matemático o informático). | x | <var> |
<time> | Indica una fecha/hora legible para humanos, con formato para máquinas opcional. | <time> | |
<data> | Información equivalente orientado a máquinas. | El señor de los anillos | <data> |
<code> | Fragmento de código fuente (en línea). | const x = 4; | <code> |
Fragmentos de edición
Por último, tenemos unas etiquetas orientadas a la edición posterior a la publicación de un texto o página web. Son útiles para saber rápidamente los cambios o modificaciones que se han realizado:
| Etiqueta | Descripción | Más info |
|---|---|---|
<ins> | Fragmento de texto o información añadida a posteriori de la publicación inicial. | <ins> |
<del> | Fragmento de texto o información eliminada a posteriori de la publicación inicial. | <del> |
