Texto en línea

Las etiquetas de texto en línea se emplean para identificar fragmentos de texto que tienen un significado especial. Normalmente, los elementos de texto en línea se encuentran dentro de elementos de bloque, modificaciones o tablas.

En esta lección se comentan las etiquetas de texto en línea <em>, <strong>, <small>, <s>, <cite>, <q>, <dfn>, <abbr>, <time>, <kbd>, <sub>, <sup>, <i>, <b>, <mark>, <span> y <br>.

Las etiquetas como <s>, <i> o <b> que tenían un significado visual en HTML4 fueron cayendo en desuso, pero HTML 5 las ha recuperado dándoles un significado semántico, no visual. El tiempo dirá si vuelven a utilizarse con su nuevo significado o siguen en desuso.

La etiqueta de enlace <a>, que también es una etiqueta de texto en línea, se trata en la lección Enlaces.

Las etiquetas de texto en línea menos utilizadas <data>, <code>, <var>, <samp>, <u>, <ruby>, <rb>, <rt>, <rtc>, <rp>, <bdi>, <bdo> y <wbr> se tratan en la lección Otros elementos de HTML 5.

Énfasis: <em>

La etiqueta <em> está pensada para dar énfasis a su contenido, es decir, para llamar la atención sobre ese contenido.

Los navegadores suelen mostrar la etiqueta <em> en cursiva (propiedad font-style: oblique).

<p>Es la <em>última</em> vez que te lo digo.</p> 

Es la última vez que te lo digo.

Importante: <strong>

La etiqueta <strong> está pensada para indicar la importancia, seriedad o urgencia de su contenido.

Los navegadores suelen mostrar la etiqueta <strong> en negrita (propiedad font-weight: bold).

<p>Acuérdate de apagar las luces y <strong>cerrar 
la puerta con llave</strong> al salir de casa.</p>

Acuérdate de apagar las luces y cerrar la puerta con llave al salir de casa.

Comentario: <small>

La etiqueta <small> está pensada para indicar que se trata de información secundaria, es decir lo que se suele llamar letra pequeña.

Los navegadores suelen mostrar la etiqueta <small> con un tamaño de letra más pequeño (propiedad font-size: smaller).

<p>PVP: 999€ <small>(IVA no incluido)</small>.</p>

PVP: 999€ (IVA no incluido).

Incorrecto: <s>

La etiqueta <s> está pensada para indicar que se trata de información incorrecta o irrelevante.

Los navegadores suelen mostrar la etiqueta <s> tachando el contenido (propiedad text-decoration: line-through).

<s>La etiqueta &lt;s&gt; estaba desaconsejada 
en HTML 4.</s> La etiqueta &lt;s&gt;
se usa para marcar información obsoleta.

La etiqueta <s> estaba desaconsejada en HTML 4. La etiqueta <s> se usa para marcar información obsoleta.

Obra: <cite>

La etiqueta <cite> está pensada para identificar una referencia a una obra cultural (títulos o autores de libros, películas, etc.).

Los navegadores suelen mostrar la etiqueta <cite> en cursiva (propiedad font-style: oblique).

<p>El primer libro que leí de Milan Kundera 
fue <cite>La vida está en otra parte</cite>.</p>

El primer libro que leí de Milan Kundera fue La vida está en otra parte.

Cita: <q>

La etiqueta <q> está pensada para identificar una cita o referencia a otras fuentes.

Los navegadores deben añadir automáticamente comillas al texto marcado, por lo que no deben escribirse comillas.

<p>Como escribió Robert Browning, <q>The best 
is yet to be</q>.</p>

Como escribió Robert Browning, The best is yet to be.

La etiqueta <q> puede incluir un atributo cite que contenga una URL que enlace a la fuente de la cita. Ese enlace no tiene por qué ser accesible al usuario.

<p>La cita de Mark Twain <q cite="http://ianchadwick.com/">
Es más fácil engañar a la gente que convencerla
de que ha sido engañada</q> es seguramente apócrifa.</p>

La cita de Mark Twain Es más fácil engañar a la gente que convencerla de que ha sido engañada es seguramente apócrifa.

Definición: <dfn>

La etiqueta <dfn> está pensada para identificar dónde se define un término en un texto. La etiqueta abarca el término definido y su definición debe encontrarse en el mismo bloque (párrafo, elemento de lista, etc.)

Los navegadores suelen mostrar la etiqueta <dfn> en cursiva (propiedad font-style: oblique).

<p>Un <dfn>byte</dfn> son ocho bits.</p>

Un byte son 8 bits.

Abreviatura: <abbr>

La etiqueta <abbr> está pensada para etiquetar abreviaturas o acrónimos. Si la etiqueta incluye el atributo title, este debe contener el significado de la abreviatura.

Firefox resalta los elementos <dfn> con atributo title con un subrayado punteado (propiedad CSS 3 text-decoration: underline dotted black), pero Internet Explorer y Google Chrome no lo hacen.

<p>Sitúa el cursor del ratón sobre la abreviatura
<abbr title="cónfer (compárese, véase)">cf</abbr>
para ver su significado.</p>

Sitúa el cursor del ratón sobre la abreviatura cf para ver su significado.

Fecha y hora: <time>

La etiqueta <time> está pensada para incluir en su atributo datetime la misma información que el texto (una fecha u hora), pero en un formato legible para máquinas.

El atributo datetime puede tomar valores de fecha y hora en muchos formatos:

Los navegadores no muestran la etiqueta <time> de ninguna forma especial.

<p>La recomedación HTML 5 se aprobó el <time 
datetime="2014-10-28">28 de octubre de 2014</time>.</p>

La recomedación HTML 5 se aprobó el .

Teclado: <kbd>

La etiqueta <kbd> está pensada para identificar pulsaciones de teclas o texto tecleado por el usuario.

Firefox destaca la etiqueta <kbd> usando un tipo de letra no proporcional (propiedad font-family: monospace). Internet Explorer destaca la etiqueta <kbd> usando un tipo de letra más pequeño (propiedad font-size: smaller). Chrome no modifica el aspecto.

<p>En los navegadores, pulsando 
<kbd>Ctrl+t</kbd> se abre una nueva pestaña.</p>

En los navegadores, pulsando Ctrl+t se abre una nueva pestaña.

Subíndice: <sub>

La etiqueta <sub> está pensada para identificar texto en subíndice.

<p>2 H<sub>2</sub> + O<sub>2</sub> &rarr; 
2 H<sub>2</sub>O</p>

2 H2 + O2 → 2 H2O

Superíndice: <sup>

La etiqueta <sup> está pensada para identificar texto en superíndice.

<p>El último teorema de Fermat dice que la ecuación 
x<sup>n</sup> + y<sup>n</sup> = z<sup>n</sup> no tiene
soluciones enteras para <var>x</var>, <var>y</var> y
<var>z</var> cuando <var>n</var> &gt; 2.</p>

El último teorema de Fermat dice que la ecuación xn + yn = zn no tiene soluciones enteras para x, y y z cuando n > 2.

Tecnicismo: <i>

La etiqueta <i> está pensada para identificar texto con un significado especial, como nombres de especies, términos técnicos, expresiones extranjeras, etc.

Los navegadores suelen mostrar la etiqueta <i> en cursiva (propiedad font-style: italic).

<p>El nombre científico del perro 
es <i>canis lupus</i>.</p>

El nombre científico del perro es canis lupus.

Atención: <b>

La etiqueta <b> está pensada para identificar texto sobre el que se quiere llamar la atención, pero sin que eso signifique que es importante, como los términos clave en un resumen, nombre de productos comerciales, etc.

Los navegadores suelen mostrar la etiqueta <b> en negrita (propiedad font-weight: bold).

<p>Polillas que se desacatan<br /> 
<b>Nopol</b>, <b>Nopol</b>, <b>Nopol</b> las mata.</p>

Polillas que se desacatan
Nopol, Nopol, Nopol las mata.

Resaltado posterior: <mark>

La etiqueta <mark> está pensada para resaltar una porción de texto que originalmente no estaba resaltada, pero que en el contexto actual se quiere resaltar.

Los navegadores suelen mostrar la etiqueta <mark> con color de fondo amarillo (propiedad background-color: yellow).

<p>La primera frase de la recomendación HTML 5 es 
<q>The World Wide Web's markup language has
<mark>always</mark> been HTML</q>.</p>

La primera frase de la recomendación HTML 5 es The World Wide Web's markup language has always been HTML.

Otros significados: <span>

La etiqueta <span> no tiene un significado definido y es la que se debe utilizar cuando las otras etiquetas no son adecuadas. Se suele incluir el atributo class para especificar el significado que se le quiere dar a la etiqueta.

Los navegadores no muestran la etiqueta <span> de ninguna forma especial.

<p><span class="personaje">Superman</span> vive en 
<span class="lugar">Metrópolis</span> y tiene muchos
superpoderes: <span class="superpoder">superfuerza</span>,
<span class="superpoder">supervisión</span>, etc.</p>
Superman vive en Metrópolis y tiene muchos superpoderes: superfuerza, supervisión, etc.

Para identificar visualmente las categorías, se deben utilizar las hojas de estilo.

<p><span class="personaje">Superman</span> vive en 
<span class="lugar">Metrópolis</span> y tiene muchos
superpoderes: <span class="superpoder">superfuerza</span>,
<span class="superpoder">supervisión</span>, etc.</p>
Superman vive en Metrópolis y tiene muchos superpoderes: superfuerza, supervisión, etc.
span.personaje { 
font-weight: bold;
}

span.lugar {
font-style: oblique;
}

span.superpoder {
color: red;
}

Salto de línea: <br />

La etiqueta <br /> está pensada para insertar saltos de línea en un bloque (por ejemplo, para mostrar varios versos de un poema). La separación entre líneas es la misma que dentro de un bloque (normalmente, inferior a la separación entre bloques).

<p>Tristes guerras<br />
si no es amor la empresa.<br />
Tristes. Tristes.</p>

<p>Tristes armas<br />
si no son las palabras.<br />
Tristes. Tristes.</p>

<p>Tristes hombres<br />
si no mueren de amores.<br />
Tristes. Tristes.</p>

Tristes guerras
si no es amor la empresa.
Tristes. Tristes.

Tristes armas
si no son las palabras.
Tristes. Tristes.

Tristes hombres
si no mueren de amores.
Tristes. Tristes.