Texto

En XHTML, todo el texto de un documento debe estar contenido por alguna de las etiquetas que se comentan en esta página. En principio se puede utilizar cualquier etiqueta para cualquier fin, pero la costumbre es utilizar cada etiqueta para un tipo determinado de texto. Algunos programas que analizan páginas web, por ejemplo los buscadores, utilizan las etiquetas para interpretar el contenido de la página.

Nota: El texto de una página web puede encontrarse también en una estructura especial (una lista, una tabla o un formulario), pero estas estructuras no se tratan aquí.

Existen tres tipos de etiquetas aplicables a texto sin ninguna estructura predeterminada, las etiquetas de bloque, las etiquetas en-línea y las etiquetas de contenedores de texto:

Las etiquetas de bloque son las que no necesitan estar contenidas dentro de ninguna etiqueta (salvo <body> y <html>).
Las etiquetas en-línea necesitan estar contenidas dentro de otras etiquetas de bloque, ya que están pensadas para afectar a sólo una parte del texto.
Las etiquetas de contenedores de texto son etiquetas que pueden contener en su interior etiquetas de bloque

Etiquetas de bloque

Título: <title>

La etiqueta <title> identifica el título de la página, que se muestra en la barra de título de la ventana del navegador. La etiqueta <title> es obligatoria y sólo puede aparecer una vez en el documento, en la sección <head>. No se le puede aplicar prácticamente ningún estilo (y el único que se le podría aplicar, la dirección de escritura, no funciona actualmente (diciembre de 2011) en los navegadores, como se puede comprobar con esta página de ejemplo.

Párrafo: <p>

La etiqueta de texto más común es la etiqueta <p>, pensada para contener párrafos, es decir todo lo que no tenga un significado especial (títulos, etc).

<p>Tabla de los capítulos que contiene 
esta famosa historia del valeroso caballero
don Quijote de la Mancha.</p>

<p>CAPÍTULO PRIMERO Que trata de la condición 
y ejercicio del famoso y valiente hidalgo 
don Quijote de la Mancha.</p>

<p>CAPÍTULO SEGUNDO Que trata de la primera 
salida que de su tierra hizo el ingenioso 
don Quijote.</p>

<p>...</p>

Tabla de los capítulos que contiene esta famosa historia del valeroso caballero don Quijote de la Mancha.

CAPÍTULO PRIMERO Que trata de la condición y ejercicio del famoso y valiente hidalgo don Quijote de la Mancha.

CAPÍTULO SEGUNDO Que trata de la primera salida que de su tierra hizo el ingenioso don Quijote.

CAPÍTULO TERCERO Donde se cuenta la graciosa manera que tuvo don Quijote en armarse caballero.

...

En general, los navegadores no muestran los espacios en blanco ni los saltos de línea del código fuente (salvo en la etiqueta <pre>).

<p>Un Dos Tres</p>

<p>Un
Dos
Tres</p>

<p>Un                 Dos             Tres</p>

Un Dos Tres

A diferencia de los procesadores de textos, en los que se pueden separar dos párrafos mediante párrafos vacíos, si un párrafo <p> no contiene nada, los navegadores no lo muestran (salvo que la hoja de estilo incluya bordes o márgenes)

<p>Tabla de los capítulos que contiene 
esta famosa historia del valeroso caballero 
don Quijote de la Mancha.</p>

<p></p>

<p></p>

<p>CAPÍTULO PRIMERO Que trata de la condición 
y ejercicio del famoso y valiente hidalgo 
don Quijote de la Mancha.</p>

Tabla de los capítulos que contiene esta famosa historia del valeroso caballero don Quijote de la Mancha.

CAPÍTULO PRIMERO Que trata de la condición y ejercicio del famoso y valiente hidalgo don Quijote de la Mancha.

Cabeceras: <h1> <h2> <h3> <h4> <h5> <h6>

Para los títulos y subtítulos de los apartados de un documento debes utilizar las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. Debes utilizar la etiqueta <h1> para el título principal del documento (a no confundir con la etiqueta <title>, que corresponde al texto de la barra de título de la ventana del navegador). Debes utilizar la etiqueta <h2> en los títulos de los apartados del documento, <h3> para los subapartados de cada apartado, y así sucesivamente.

<h1>Cabecera 1</h1>

<h2>Cabecera 2</h2>

<h3>Cabecera 3</h3>

<h4>Cabecera 4</h4>

<h5>Cabecera 5</h5>

<h6>Cabecera 6</h6>

Cabecera 1

Cabecera 2

Cabecera 3

Cabecera 4

Cabecera 5

Cabecera 6

La hoja de estilo por omisión de los navegadores suele mostrar las cabeceras en tamaño cada vez más pequeño (incluso más pequeño que el tamaño de los párrafos <p>), en negrita y con márgenes mayores que los los párrafos <p>.

Preformateado <pre>

La etiqueta <pre> se utiliza cuando se quiere conservar los espacios en blanco y los saltos de línea del texto original. En el resto de etiquetas, los navegadores no muestran ni las líneas en blanco ni varios espacios en blanco seguidos.

<pre>body {

  text-align: justify;

}</pre>

<p>body {

  text-align: justify;

}</p>

body { 
  text-align: justify;
}

body { text-align: justify;}

La hoja de estilo por omisión de los navegadores suele mostrar el bloque preformateado <pre> en tipo de letra monospace (normalmente Courier).

Dirección <address>

La etiqueta <address> está pensada para contener información de contacto del autor de la página.

<address>Autor: Bartolomé Sintes Marco<br />

Última modificación: 22 de diciembre de 2011</address>

Autor: Bartolomé Sintes Marco
Última modificación: 22 de diciembre de 2011

La hoja de estilo por omisión de los navegadores suele mostrar el bloque de dirección <address> en cursiva.

Volver al principio de la página

Etiquetas en-línea

Las etiquetas en-línea son las que abarcan porciones de texto (una o varias palabras) que están contenidas en alguna etiqueta de bloque.

Salto de línea <br />

La etiqueta <br /> (del inglés break) permite insertar saltos de línea en un párrafo (o cualquier etiqueta de bloque). Por ejemplo, para mostrar varios versos de un poema o canción:

<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.

Tipo de información

<abbr>

Pensada para etiquetar abreviaturas. El significado de la abreviatura debe escribirse mediante el atributo title.

Nota: Internet Explorer 7 muestra correctamente esta etiqueta. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.

<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.

<acronym>

Pensada para etiquetar acrónimos (siglas que se pronuncian como palabras). El significado del acrónimo debe escribirse mediante el atributo title.

Nota: Internet Explorer 7 muestra correctamente esta etiqueta. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE7 e IE6.

<p>Sitúa el cursor del ratón sobre el acrónimo 
<acronym title="Rogamos Empujen Nuestros Ferrocarriles 
Estropeados (es broma)">RENFE</acronym> para ver su 
significado.</p>

Sitúa el cursor del ratón sobre el acrónimo RENFE para ver su significado.

<cite>

Pensada para identificar una cita o referencia a otras fuentes.

Los navegadores suelen mostrar la etiqueta <cite> en cursiva.

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

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

<code>

Pensada para etiquetar fragmento de código de ordenador.

Los navegadores suelen mostrar la etiqueta <code> en tipo de letra monospace (normalmente Courier).

<p>El primer programa que se enseña en un lenguaje 
de programación suele ser algo así como 
<code>main() { printf ("Hola, mundo"); }</code></p>

El primer programa que se enseña en un lenguaje de programación suele ser algo así como main() { printf ("Hola, mundo"); }

<del>

Pensada, junto con la etiqueta <ins>, para etiquetar modificaciones en un texto. Esta etiqueta debería etiquetar el texto que se ha eliminado de una página al revisarlo (si se quiere que se sepa que se ha eliminado, claro).

Los navegadores suelen mostrar la etiqueta <del> tachada.

<p>Internet Explorer 6 era un navegador bastante 
<del>malo</del> mejorable. Internet Explorer 7 
cumplía mejor las recomendaciones del W3C.</p>

Internet Explorer 6 era un navegador bastante ~~malo~~ mejorable. Internet Explorer 7 cumplía mejor las recomendaciones del W3C.

<dfn>

Pensada para identificar la primera aparición de un término en un texto.

Los navegadores suelen mostrar la etiqueta <dfn> en cursiva.

<p>En 2005 se empezaron a comercializar discos duros que empleaban la 
<dfn>grabación magnética perpendicular</dfn> 
para aumentar la densidad de información.</p>

En 2005 se empezaron a comercializar discos duros que empleaban la grabación magnética perpendicular para aumentar la densidad de información.

<em>

Pensada para resaltar una porción de texto dándole énfasis, aunque no tanto como con la etiqueta <strong>.

Los navegadores suelen mostrar la etiqueta <em> en cursiva.

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

Es la última vez que te lo digo.

<ins>

Pensada, junto con la etiqueta <del>, para etiquetar modificaciones en un texto. Esta etiqueta debería etiquetar el texto que se ha añadido a una página al revisarlo (si se quiere que se sepa que se ha añadido, claro).

Los navegadores suelen mostrar la etiqueta <ins> subrayada.

<p>La verdad es que Microsoft podría mejorar su 
navegador<ins>, respetando las recomendaciones 
del W3C</ins>.</p>

La verdad es que Microsoft podría mejorar su navegador, respetando las recomendaciones del W3C.

<kbd>

Pensada para identificar el texto que debe teclear el usuario.

Los navegadores suelen destacar la etiqueta <kbd> cambiando el tipo de letra.

<p>En Amaya, para seleccionar un elemento, debes
pulsar la tecla <kbd>F2</kbd>.</p>

En Amaya, para seleccionar un elemento, debes pulsar la tecla F2.

<samp>

Pensada para identificar un ejemplo de la salida de un programa o de un script.

Los navegadores suelen destacar la etiqueta <samp> cambiando el tipo de letra.

<p>Al ejecutar tu primer programa, en la pantalla 
podrás leer <samp>Hola, mundo</samp>.</p>

Al ejecutar tu primer programa, en la pantalla podrás leer Hola, mundo.

<strong>

Pensada para resaltar una porción de texto dándole énfasis, aún más que con la etiqueta <em>.

Los navegadores suelen mostrar la etiqueta <strong> en negrita.

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

Es la última vez que te lo digo.

<var>

Pensada para identificar una instancia de una variable o de un argumento de programa.

Los navegadores suelen mostrar la etiqueta <var> en cursiva.

<p><var>$saludo</var> = "Hola, mundo";</p>

$saludo = "Hola, mundo";

Elemento carácter

Estas etiquetas están en su mayoría desaconsejadas, ya que pueden conseguirse sus efectos utilizando las propiedades correspondientes de las hojas de estilo.

<b>

Desaconsejada. Originalmente pensada para etiquetar texto en negrita.

Los navegadores suelen mostrar la etiqueta <b> en negrita.

<p>Esta palabra está <b>resaltada</b>.</p>

Esta palabra está resaltada.

<bdo>

Pensada para elegir la dirección del texto (de izquierda a derecha o de derecha a izquierda). Es obligatorio especificar el atributo dir, con el valor rtl (de derecha a izquierda) o ltr (de izquierda a derecha).

<p><bdo dir="rtl">Esta frase está escrita al derecho, 
pero debería leerse al revés</bdo>.</p>

Esta frase está escrita al derecho, pero debería leerse al revés.

<big>

Desaconsejada. Originalmente pensada para etiquetar texto de mayor tamaño.

Los navegadores suelen mostrar la etiqueta <big> con la propiedad font-size: larger.

<p>Esta palabra está <big>aumentada</big>.</p>

Esta palabra está aumentada.

<i>

Desaconsejada. Originalmente pensada para etiquetar texto en itálica.

Los navegadores suelen mostrar la etiqueta <i> con la propiedad font-style: italic.

<p>Esta palabra está en <i>itálica</i>.</p>

Esta palabra está en itálica.

<q>

Pensada para identificar una cita o referencia a otras fuentes. La recomendación HTML 4.0 especifica que los navegadores deben añadir automáticamente comillas al texto marcado.

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

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

Nota: Internet Explorer 8 muestra correctamente esta etiqueta. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

<small>

Desaconsejada. Originalmente pensada para etiquetar texto de menor tamaño.

Los navegadores suelen mostrar la etiqueta <small> con la propiedad font-size: smaller.

<p>Esta palabra está <small>reducida</small>.</p>

Esta palabra está reducida.

<sub>

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 H₂ + O₂ → 2 H₂O

<sup>

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 xⁿ + yⁿ = zⁿ no tiene soluciones enteras para x, y y z cuando n > 2.

<tt>

Desaconsejada. Originalmente pensada para etiquetar texto de fuente de espaciado fijo.

Los navegadores suelen mostrar la etiqueta <tt> en tipo de letra monospace (normalmente Courier).

<p>Estas palabras tienen un <tt>espaciado fijo</tt>.</p>

Estas palabras tienen un espaciado fijo.

Volver al principio de la página

Etiquetas de contenedores de texto

Bloque de cita: <blockquote>

La etiqueta <blockquote> está pensada para identificar una cita larga, que puede contener varios párrafos u otras etiquetas.

Los navegadores suelen mostrar la etiqueta <blockquote> con márgenes a izquierda y derecha.

<p>Plan de Instrucción Pública de J. Pidal, año 1845. Exposición 
de motivos</p>
<blockquote><p>Antiguamente eran las universidades independientes 
entre sí, y hasta del Gobierno mismo: cada cual tenía su régimen, sus estudios, 
sus métodos y aun sus pretensiones distintas: no sólo disponian arbitrariamente 
de sus fondos, sino que hasta era también arbitraria en ellas la enseñanza. Ya 
desde fines del siglo pasado trató el Gobierno de poner diques a semejante 
anarquía, que, tras del desconcierto general de todas las ciencias, mantenia a 
éstas en atraso lastimoso, perpetuando rancias ideas, doctrinas desacreditadas 
y perjudiciales preocupaciones.</p>
<p>La enseñanza de la juventud no es una mercancía que puede dejarse 
entregada a la codicia de los especuladores, ni debe equipararse a las demás 
industrias en que domina sólo el interés privado. Hay en la educación un interés 
social, de que es guarda el Gobierno, obligado a velar por él cuando puede ser 
gravemente comprometido. No existe entre nosotros ley alguna que prescriba la 
libertad de enseñanza; y aun cuando existiera, debería, como en todas partes, 
sujetarse esta libertad a las condiciones que el bien público reclama, siendo 
preciso dar a los padres aquellas garantías que han menester cuando tratan de 
confiar a manos ajenas lo mas precioso que tienen, y precaverlos contra las 
brillantes promesas de la charlatanería, de que por desgracia se deja harto 
fácilmente seducir su credulidad y mal aconsejado cariño. </p></blockquote>

Plan de Instrucción Pública de J. Pidal, año 1845. Exposición de motivos

Antiguamente eran las universidades independientes entre sí, y hasta del Gobierno mismo: cada cual tenía su régimen, sus estudios, sus métodos y aun sus pretensiones distintas: no sólo disponian arbitrariamente de sus fondos, sino que hasta era también arbitraria en ellas la enseñanza. Ya desde fines del siglo pasado trató el Gobierno de poner diques a semejante anarquía, que, tras del desconcierto general de todas las ciencias, mantenia a éstas en atraso lastimoso, perpetuando rancias ideas, doctrinas desacreditadas y perjudiciales preocupaciones.

La enseñanza de la juventud no es una mercancía que puede dejarse entregada a la codicia de los especuladores, ni debe equipararse a las demás industrias en que domina sólo el interés privado. Hay en la educación un interés social, de que es guarda el Gobierno, obligado a velar por él cuando puede ser gravemente comprometido. No existe entre nosotros ley alguna que prescriba la libertad de enseñanza; y aun cuando existiera, debería, como en todas partes, sujetarse esta libertad a las condiciones que el bien público reclama, siendo preciso dar a los padres aquellas garantías que han menester cuando tratan de confiar a manos ajenas lo mas precioso que tienen, y precaverlos contra las brillantes promesas de la charlatanería, de que por desgracia se deja harto fácilmente seducir su credulidad y mal aconsejado cariño.

División <div>

Las divisiones son el mecanismo más importante para agrupar diversos elementos. Se tratan en otra página de este curso.

Los navegadores no suelen mostrar la etiqueta <div> de ninguna manera en especial.

Volver al principio de la página

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 22 de diciembre de 2011

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.