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

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.

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

      <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 H2 + O2 → 2 H2O

<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 xn + yn = zn 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