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 <br>, <span>, <em>, <strong>, <small>, <s>, <cite>, <q>, <dfn>, <abbr>, <time>, <kbd>, <sub>, <sup>, <i>, <b> y <mark>.

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.

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

Para modificar el aspecto visual de las categorías, se deben utilizar las propiedades de 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>
span.personaje {
  font-weight: bold;
}

span.lugar {
  font-style: oblique;
}

span.superpoder {
  color: red;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

É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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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> En HTML 5 la etiqueta &lt;s&gt; se usa para marcar información obsoleta.
ERROR (no puede mostrarse el objeto)
Enlace externo

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 de Milan Kundera que leí fue <cite>La vida está en otra parte</cite>.</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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 y Chrome resaltan los elementos <dfn> con atributo title con un subrayado punteado (propiedad CSS 3 text-decoration: underline dotted black), pero Edge no lo hace.

<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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

Teclado: <kbd>

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

Chrome, Firefox y Edge destacan la etiqueta <kbd> usando un tipo de letra no proporcional (propiedad font-family: monospace). Edge aumenta también el tamaño de la fuente.

<p>En los navegadores, pulsando <kbd>Ctrl+t</kbd> se abre una nueva pestaña.</p>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo

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>
ERROR (no puede mostrarse el objeto)
Enlace externo