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 parece funcionar ni en Firefox ni en Internet Explorer).

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

Un bloque de texto contenido dentro de una etiqueta de párrafo <p> se muestra en los navegadores como un párrafo (lógicamente), pero es posible introducir saltos de líneas dentro de un mismo párrafo. Por ejemplo, si escribes un poema o una canción, cada estrofa será un párrafo, pero necesitas hacer un salto de línea al final de cada verso. La etiqueta que lo permite es <br /> (del inglés break).

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

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: 21 de octubre de 2008</address>

Autor: Bartolomé Sintes Marco
Última modificación: 21 de octubre de 2008

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

Volver al índice

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.

Tipo de información

<abbr>

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

Firefox e Internet Explorer 7 muestran la etiqueta <abbr> con un subrayado discontinuo, pero Internet Explorer 6 no lo hacía.

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

Firefox e Internet Explorer 7 muestran la etiqueta <acronym> con un subrayado discontinuo, pero Internet Explorer 6 no lo hacía.

<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 te enseñana en un lenguaje 
de programación suele ser algo así como 
<code>main() { printf ("Hola, mundo"); }</code></p>

El primer programa que te enseñana 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 
cumple mejor las recomendaciones del W3C.</p>

Internet Explorer 6 era un navegador bastante ~~malo~~ mejorable. Internet Explorer 7 cumple 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>La investigación que se está llevando a cabo en 
<dfn>magnetorresistencia extraordinaria</dfn> 
producirá posiblemente discos magnéticos rapidísimos 
y de enorme capacidad.</p>

La investigación que se está llevando a cabo en magnetorresistencia extraordinaria producirá posiblemente discos magnéticos rapidísimos y de enorme capacidad.

<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 mostrar la etiqueta <kbd> en negrita y cursiva.

<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 mostrar la etiqueta <samp> en tipo de letra monospace (normalmente Courier).

<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. Firefox y Amaya lo hacen, pero Internet Explorer no.

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

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

<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 índice

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 índice

Autor: Bartolomé Sintes Marco
Última modificación: 23 de octubre de 2008