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 HTML 4 fueron cayendo en desuso, pero HTML 5 las recuperó 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.
Salto de línea: <br>
La etiqueta vacía <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>
La etiqueta <br> es suficiente para provocar el salto de línea, no es necesario que haya saltos de línea en el código fuente.
<p>Tristes guerras<br>si no es amor la empresa.<br>Tristes. Tristes.</p>
Si se escriben varias <br> seguidas, se mostrarán líneas en blanco.
<p>Tristes guerras<br><br>si no es amor la empresa.<br><br>Tristes. Tristes.</p>
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>
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>
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>
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>
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>
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 <s> estaba desaconsejada en HTML 4.</s> En HTML 5 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 de Milan Kundera que leí fue <cite>La vida está en otra parte</cite>.</p>
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>
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>
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>
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.
Los navegadores resaltan los elementos <abbr> con atributo title con un subrayado punteado (propiedad CSS 3 text-decoration: underline dotted black).
<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>
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:
AAAA-MM-DD
AAAA-MM-DD HH:MM:SS.MMM
HH:MM±HH:MM; (UTC + zona horaria)
etc.
Los navegadores no muestran la etiqueta <time> de ninguna forma especial.
<p>La recomendación HTML 5 se aprobó el <time datetime="2014-10-28">28 de octubre de 2014</time>.</p>
Teclado: <kbd>
La etiqueta <kbd> está pensada para identificar pulsaciones de teclas o texto tecleado por el usuario.
Los navegadores destacan la etiqueta <kbd> usando un tipo de letra no proporcional (propiedad font-family: monospace).
<p>En los navegadores, pulsando <kbd>Ctrl+t</kbd> se abre una nueva pestaña.</p>
Subíndice: <sub>
La etiqueta <sub> está pensada para identificar texto en subíndice.
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> > 2.</p>
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>
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>
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>
