Enlaces básicos (segunda parte)

El otro atributo básico de la etiqueta <a> es name, que permite definir enlaces dentro de una misma página web. Si una página es muy larga, puede ser útil mostrar enlaces de tipo "Saltar hasta la segunda sección", "Volver al principio de la página", etc.

Este tipo de enlaces son especiales, ya que la URL de la página siempre es la misma para todas las secciones y por tanto, debe añadirse otra parte a las URL para identificar cada sección.

<a name="primera_seccion"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
...
<a name="segunda_seccion"></a>
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
...

El atributo name permite crear "enlaces vacíos" que hacen referencia a secciones dentro de una misma página. Una vez definidos los "enlaces vacíos", es posible crear un enlace que apunte directamente a una sección concreta de una página:

<!-- Enlace normal a la página -->
<a href="http://www.ejemplo.com/pagina1.html">Enlace a la página 1</a>

<!-- Enlace directo a la segunda sección de la página -->
<a href="http://www.ejemplo.com/pagina1.html#segunda_seccion">Enlace a la sección 2 de la página 1</a>

La sintaxis que se utiliza con estos enlaces es la misma que con los enlaces normales, salvo que se añade el símbolo # seguido del nombre de la sección a la que se apunta. Cuando el usuario clickea sobre uno de estos enlaces, el navegador accede a la página apuntada por la URL y baja directamente a la sección cuyo nombre se indica después del símbolo #.

También es posible utilizar este tipo de enlaces con URL relativas en una misma página. El siguiente ejemplo añade enlaces de tipo "Volver al inicio de la página" en varias secciones:

<a name="inicio"></a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

Los enlaces directos a secciones también funcionan con el atributo id de cualquier elemento. El siguiente ejemplo es equivalente al ejemplo anterior:

<h1 id="inicio">Título de la página</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris id ligula eu felis
adipiscing ultrices. Duis gravida leo ut lectus. Praesent condimentum mattis ligula.</p>
<a href="#inicio">Volver al inicio de la página</a>
...
<p>Pellentesque malesuada. In in lacus. Phasellus erat erat, lacinia a, convallis eu,
nonummy et, odio. Aenean urna elit, ultrices id, placerat varius, facilisis eget,
dolor.</p>
<a href="#inicio">Volver al inicio de la página</a>
...

El nombre de la sección que se indica después del símbolo # puede utilizar el valor de los atributos id de cualquier elemento. De hecho, se recomienda utilizar los atributos id de los elementos ya existentes en la página en vez de crear "enlaces vacíos" de tipo <a name="nombre_seccion"></a>.

Enlaces básicos (primera parte)

Los enlaces en HTML se crean mediante la etiqueta <a> (su nombre viene del inglés "anchor", literalmente traducido como "ancla"). A continuación se muestra la definición simplificada de <a>.

 

El atributo más importante de la etiqueta <a> es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario clickea sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href. Las URL de los enlaces pueden ser absolutas, relativas, internas y externas.

Con la definición anterior, para crear un enlace que apunte a la página principal de Google solamente habría que incluir lo siguiente en un documento HTML:

<a href="http://www.google.com">Página principal de Google</a>

Como el atributo href indica una URL, un enlace puede apuntar a cualquier tipo de recurso al que pueda acceder el navegador. El siguiente enlace apunta a una imagen, que se mostrará en el navegador cuando el usuario clickee sobre el enlace:

<a href="http://www.ejemplo.com/fondo_escritorio.jpg">Imagen interesante para un fondode escritorio</a>

De la misma forma, los enlaces pueden apuntar directamente a documentos PDF, Word, etc.

<a href="http://www.ejemplo.com/informe.pdf">Descargar informe completo [PDF]</a>
<a href="http://www.ejemplo.com/informe.doc">Descargar informe completo [DOC]</a>

Un truco muy útil con los enlaces es el uso de URL relativas para poder volver al inicio del sitio web desde cualquier página web interior:

<a href="/">Volver al inicio</a>

El enlace anterior utiliza una URL relativa con una ruta que apunta directamente a la raíz del servidor. Para obtener la URL absoluta, el navegador añade el mismo protocolo y el mismo nombre de servidor de la página en la que se encuentra el enlace. El resultado es que cuando se pincha ese enlace, siempre se vuelve al inicio del sitio web, independientemende de la página en la que se incluya el enlace.

El origen y el destino del enlace se encuentran muy alejados

Cuando el origen y el destino de un enlace se encuentran muy alejados (pero en el mismo servidor) las URL relativas se pueden complicar en exceso. Aunque es posible utilizar ../ para subir por la jerarquía de directorios y se puede entrar en cualquier directorio indicando su nombre, las URL relativas que se obtienen son demasiado largas y complicadas.

En estos casos, lo más sencillo es indicar la ruta completa hasta el recurso enlazado comenzando desde la raíz del servidor web. Por lo tanto, estas URL relativas sólo omiten el protocolo y el nombre del servidor.

Origen: http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado: Página web llamada pagina2.html y que se guarda en un directorio llamado ruta7 que se
encuentra en la raíz del servidor
URL absoluta: http://www.ejemplo.com/ruta7/pagina2.html
URL relativa:  /ruta7/pagina2.html

Cuando la URL relativa comienza por /, el navegador considera que es la ruta completa comenzando desde la raíz del servidor, por lo que sólo le añade el protocolo y el nombre del servidor origen.

El destino del enlace se encuentra cerca de su origen y en un nivel inferior

Este caso es muy similar al anterior, pero más sencillo. Si el recurso enlazado se encuentra en algún directorio inferior al que se encuentra el origen, sólo es necesario indicar el nombre de los directorios a los que debe entrar el navegador.

Origen: http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado: Página web llamada pagina2.html y que se encuentra en un directorio inferior llamado
ruta4
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/pagina2.html
URL relativa: ruta4/pagina2.html

De la misma forma, se pueden indicar varios directorios seguidos para que el navegador descienda jerárquicamente por la estructura de directorios:

Origen:  http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado: Página web llamada pagina2.html y que se encuentra en un directorio inferior llamado ruta6 que está dentro del directorio ruta5 y que a su vez está dentro del directorio ruta4
URL absoluta: http://www.ejemplo.com/ruta1/ruta2/ruta3/ruta4/ruta5/ruta6/pagina2.html
URL relativa: ruta4/ruta5/ruta6/pagina2.html

El destino del enlace se encuentra cerca de su origen y en un nivel superior

En este caso, el recurso que se enlaza no está en el mismo directorio que el origen del enlace pero sí que está cerca y en algún directorio superior. La URL relativa debe indicar de alguna manera que es necesario subir un nivel en la jerarquía de directorios para llegar hasta el recurso.

Para indicar al navegador que debe subir un nivel, se incluyen dos puntos y una barra (../) en la ruta del recurso enlazado. De esta forma, cada vez que aparece ../ en una URL relativa, significa que se debe subir un nivel.

Origen: http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html 

Recurso enlazado: Página web llamada pagina2.html y que se encuentra en el directorio superior llamado

ruta2

URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa:  ../pagina2.html

Cuando el navegador encuentra la URL relativa ../pagina2.html, sabe que para encontrar el recurso enlazado (pagina2.html) tiene que subir un nivel desde el lugar en el que se encuentra esa URL relativa. La página que incluye esa URL se encuentra en el directorio ruta1/ruta2/ruta3, por lo que subir un nivel equivale entrar en el directorio ruta1/ruta2.

De la misma forma, si el destino se encuentra un par de niveles por encima, se debe incluir ../ dos veces seguidas:

Origen: http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado: Página web llamada pagina2.html y que se encuentra en el directorio superior llamado ruta1

URL absoluta: http://www.ejemplo.com/ruta1/pagina2.html
URL relativa: ../../pagina2.html

Además de subir niveles, también se puede entrar en otros directorios para obtener los recursos:

Origen: http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado: Página web llamada pagina2.html y que se encuentra en un directorio llamado ruta4 que
se encuentra en la raíz del servidor 

URL absoluta: http://www.ejemplo.com/ruta4/pagina2.html 

URL relativa: ../../../ruta4/pagina2.html

Si se intentan subir más niveles de los que es posible, el navegador ignora todos los ../ sobrantes. Si la página que tiene el enlace es http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html y la URL relativa que se incluye es ../../../../../pagina2.html, el navegador realmente la interpreta como ../../../pagina2.html.

Como el objetivo de las URL relativas es crear URL más cortas y sencillas que las URL absolutas, este método sólo se puede utilizar cuando el origen y el destino se encuentran cerca, porque de otro modo la URL relativa se complica demasiado.

El origen y el destino del enlace se encuentran en el mismo directorio

Si desde una página web se quiere enlazar un recurso que se encuentra en el mismo directorio del servidor, la URL relativa puede prescindir de todas las partes de la URL absoluta salvo el nombre del recurso enlazado.

Origen:  http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina1.html
Recurso enlazado: Página web llamada pagina2.html y que se encuentra en el mismo directorio
URL absoluta:  http://www.ejemplo.com/ruta1/ruta2/ruta3/pagina2.html
URL relativa:  pagina2.html

Cuando el navegador encuentra una URL relativa que sólo consiste en el nombre de un recurso, supone que el protocolo, servidor y directorio del recurso enlazado son los mismos que los del origen del enlace.

Enlaces relativos y absolutos

Cuando hacemos click sobre algunos enlaces, el navegador abandona el sitio web para acceder a páginas que se encuentran en otros sitios. Estos enlaces se conocen como "enlaces externos". Sin embargo, la mayoría de enlaces de un sitio web apuntan a páginas del propio sitio web, por lo que se denominan "enlaces internos".

Además de internos/externos, la otra característica que diferencia a los enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.

Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.

Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que comienzan con HTML, son tan útiles que todos los sitios web las utilizan.

Imagina que dispones de una página publicada en http://www.ejemplo.com/ruta1/ruta2/ pagina1.html y quieres incluir en ella un enlace a otra página que se encuentra en http://www.ejemplo.com/ruta1/ruta2/pagina2.html. Como las URL identifican de forma única a los recursos de Internet y proporcionan la información necesaria para llegar hasta ellos, el enlace debería utilizar la URL completa de la segunda página.

Las URL completas también se llaman URL absolutas, ya que el navegador no necesita disponer de información adicional para localizar el recurso enlazado. Si se utilizan siempre las URL absolutas, los enlaces están completamente definidos.

Sin embargo, escribir siempre las URL completas es bastante aburrido, cuesta mucho tiempo y hace imposible cambiar la ubicación de los contenidos de un sitio web. Por ese motivo, casi todos los sitios web de Internet utilizan URL relativas siempre que es posible.

Una URL relativa es una versión abreviada de una URL absoluta. Su objetivo es eliminar todas las partes de la URL absoluta que se pueden adivinar a partir de la información de contexto de la página web. En otras palabras, las URL relativas aprovechan la inteligencia de los navegadores para crear URL incompletas que los navegadores pueden completar deduciendo la información que falta.

Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la página origen, por lo que la URL relativa puede prescindir de esas partes:

URL absoluta: http://www.ejemplo.com/ruta1/ruta2/pagina2.html
URL relativa: /ruta1/ruta2/pagina2.html

En el ejemplo anterior, las dos URL son equivalentes porque cuando no se indica el protocolo y el servidor de una URL, los navegadores suponen que son los mismos que los de la página origen.

Por lo tanto, cuando el navegador encuentra la URL /ruta1/ruta2/pagina2.html, realiza el siguiente proceso:

1. La URL no es absoluta, por lo que se debe determinar la URL absoluta a partir de la URL relativa para poder cargar el recurso enlazado.
2. A la URL relativa le falta el protocolo y el servidor, por lo que se supone que son los mismos que los de la página origen (http:// y www.ejemplo.com).
3. Se añaden las partes que faltan a la URL relativa para obtener la URL absoluta: http://+ www.ejemplo.com + /ruta1/ruta2/pagina2.html = http://www.ejemplo.com/ruta1/ruta2/pagina2.html.

URL (segunda parte)

La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes.

http://www.alistapart.com/comments/webstandards2008?page=5#42

Las cinco partes que forman la URL anterior son:

▪ Protocolo (http://)

▪ Servidor (www.alistapart.com)

▪ Ruta (/comments/webstandards2008)

▪ Consulta (?page=5): información adicional necesaria para que el servidor localice correctamente el recurso que se quiere acceder. Siempre comienza con el carácter ? y contiene una sucesión de palabras separadas por = y &

▪ Sección (#42): permite que el navegador se posicione automáticamente en una sección de la página web. Siempre comienza con el caracter #

Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres están reservados y no se pueden utilizar libremente. Además, algunos caracteres no están reservados pero pueden ser problemáticos si se utilizan en la propia URL.

Si es necesario incluir estos caracteres reservados y especiales en una URL, se sustituyen por combinaciones de caracteres seguros. Esta sustitución se denomina codificación de caracteres y el servidor realiza el proceso inverso (decodificación) cuando le llega una URL con los caracteres codificados.

A continuación se muestra la tabla para codificar los caracteres más comunes:

Por otra parte, aunque desde hace tiempo ya es posible incluir en las URL caracteres de otros idiomas que no sean el inglés, aún no es completamente seguro utilizar estos caracteres en las URL. Si se utilizan letras como ñ, á, é o ç, es posible que algunos navegadores no las interpreten de forma correcta.

La solución consiste en codificar todos los caracteres que no existen en inglés. La siguiente tabla muestra la codificación de los caracteres más utilizados:

Teniendo en cuenta las dos tablas anteriores de codificación de caracteres, es fácil crear las URL correctas sin caracteres problemáticos:

<!-- URL problemática -->
http://www.ejemplo.com/estaciones/otoño.html
<!-- URL correcta -->
http://www.ejemplo.com/estaciones/oto%F1o.html

<!-- URL problemática -->
http://www.ejemplo.com/ruta/nombre página.html
<!-- URL correcta -->
http://www.ejemplo.com/ruta/nombre%20p%E1gina.html

URL (primera parte)

Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.

La URL de un recurso tiene dos objetivos principales:

▪ Identificar de forma única a ese recurso
▪ Permitir localizar de forma eficiente ese recurso

En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.

Si se accede a la página principal de Google, la dirección que muestra el navegador es:

http://www.google.com

La cadena de texto http://www.google.com es la URL completa de la página principal de Google. La URL de las páginas es imprescindible para crear los enlaces, ya que permite distinguir una página de otra.

El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:

http://www.ebooks.es/xhtml/capitulo4.html

Las partes que componen la URL anterior son:

▪ Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las páginas web utilizan http://. Las páginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).

▪ Servidor (www.ebooks.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre.

▪ Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.

Por tanto, las URL no sólo identifican de forma única a cada recurso de Internet, sino que también proporcionan a los navegadores la información necesaria para poder llegar hasta ese recurso.

Enlaces html

El lenguaje de marcado HTML se definió teniendo en cuenta algunas de las características que existían en ese momento para la publicación digital de contenidos. Entre los conceptos utilizados en su creación, se encuentra el mecanismo de "hipertexto".

De hecho, las letras "HT" de la sigla HTML significan "hipertexto" (hypertext en inglés), por lo que el significado completo de HTML podría traducirse como "lenguaje de marcado para hipertexto". 

La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. 

El elemento principal del hipertexto es el "hiperenlace", también llamado "enlace web" o simplemente "enlace".

Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces  elacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.

Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en inglés, que se puede traducir literalmente como "anclas".

Codificación de caracteres en html (segunda parte)

Los caracteres propios de los idiomas diferentes al inglés también pueden ser problemáticos. El motivo es que desde que se crea una página web hasta que llega al navegador del usuario, intervienen numerosos procesos:

▪ El diseñador crea la página web con su editor HTML (por ejemplo Dreamweaver).

▪ Si se trata de una aplicación dinámica, el programador recorta la página HTML del diseñador y la mezcla con el resto del código de la aplicación (por ejemplo PHP).
▪ El servidor web almacena las páginas HTML estáticas o el código de la aplicación web y sirve las páginas solicitadas por los usuarios.
▪ El usuario solicita y visualiza las páginas web a través de su navegador. 

Si en todos los procesos anteriores se utiliza la misma codificación de caracteres, los caracteres propios de los idiomas se pueden escribir directamente:

<p>Este párrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>

La palabra párrafo del ejemplo anterior incluye la letra á. Si el editor HTML del diseñador utiliza la codificación UTF-8, el entorno de desarrollo del programador también utiliza UTF-8, el servidor web sirve las páginas con esa codificación y el navegador del usuario es capaz de visualizar las páginas con formato UTF-8, el texto anterior se verá correctamente en el navegador del usuario.

Sin embargo, muchas veces no es posible que todos los procesos involucrados utilicen la misma codificación de caracteres. Por limitaciones técnicas o por decisiones de los diseñadores y programadores, los textos pueden pasar de codificación UTF-8 a codificación ISO-8859 en cualquier momento. Si se produce este cambio sin realizar una conversión correcta, el navegador del usuario mostrará caracteres extraños en todos los acentos y en todas las letras como la ñ.

La solución más sencilla para asegurar que todos estos caracteres potencialmente problemáticos se van a visualizar correctamente en el navegador del usuario consiste en sustituir cada carácter problemático por su entidad HTML:

 

Así, el párrafo de texto del ejemplo anterior, se podría escribir de la siguiente manera:

<p>Este p&aacute;rrafo contiene caracteres acentuados y se almacena en formato UTF-8</p>

Si se utilizan las entidades HTML en vez de los caracteres problemáticos, es indiferente pasar de una codificación de caracteres a otra diferente.

Codificación de caracteres en html (primera parte)

Una consideración importante directamente relacionada con el texto de las páginas HTML es la codificación de los caracteres y la inserción de caracteres especiales. Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las páginas web:

▪ Los caracteres que utiliza HTML para definir sus etiquetas (<, > y ") no se pueden utilizar libremente.

▪ Los caracteres propios de los idiomas que no son el inglés (ñ, á, ç, ¿, ¡, etc.) pueden ser problemáticos dependiendo de la codificación de caracteres utilizada.

La solución a la primera limitación consiste en sustituir los caracteres reservados de HTML por unas expresiones llamadas entidades HTML y que representan a cada carácter:

De esta forma, si se considera el siguiente texto:

Los caracteres <, >, " y & pueden dar problemas con los textos en HTML

Para mostrar correctamente el texto anterior en una página HTML, se debe sustituir cada carácter especial por su entidad HTML:

<p>Los caracteres &lt;, &gt;, &quot; y &amp; pueden dar problemas con los textos en HTML</p>

Texto preformateado en html (segunda parte)

La etiqueta <code>, se utiliza para mostrar código fuente de cualquier lenguaje de programación. La definición formal de <code> es la siguiente:

En la mayoría de páginas web, no tiene sentido utilizar la etiqueta <code>. Sin embargo, en muchas páginas web técnicas que incluyen listados de programas, trozos de código o etiquetas HTML, lo correcto es emplear la etiqueta <code>. Ejemplo:

<html>
<head><title>Ejemplo de etiqueta code</title></head>
<body>
<code>
La etiqueta code
no respeta los espacios en blanco
</code>
Introducción a XHTML Capítulo 3. Texto
www.librosweb.es 43
<p>La etiqueta code es similar a la
etiqueta pre, sobre todo en el formato
del texto.</p>
</body>
</html>

El navegador muestra claramente el comportamiento de <code> y sus diferencias con <pre>:

Al igual que sucede con los elementos <pre>, el texto encerrado por la etiqueta <code> se muestra con un tipo de letra especial de ancho fijo. Por el contrario, el elemento <code> no respeta los espacios en blanco ni las líneas, por lo que su comportamiento es similar a la etiqueta <p>. La última diferencia es que <code> es un elemento en línea, mientras que <pre> es un elemento de bloque.

Texto preformateado en html (primera parte)

En ocasiones, es necesario mostrar los espacios en blanco de un texto que no se puede modificar. Se trata de un caso habitual cuando una página web debe mostrar directamente el texto generado por alguna aplicación.

En estos casos, se puede utiliza la etiqueta <pre>, que muestra el texto tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. La definición formal de la etiqueta se muestra a continuación:

 

El siguiente ejemplo muestra el uso de la etiqueta <pre>:

<html>
<head><title>Ejemplo de etiqueta pre</title></head>
<body>
<pre>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</pre>
<p>
La etiqueta pre
respeta los espacios en blanco
y
muestra el texto
tal y como
está escrito
</p>
</body>
</html>

El ejemplo anterior incluye el mismo texto (con espacios en blanco y varias líneas) dentro de una etiqueta <pre> y dentro de una etiqueta <p>. Las diferencias visuales en un navegador son muy evidentes:

El primer texto se ve en pantalla tal y como se ha escrito, respetando todos los espacios en blanco y todas las nuevas líneas. El segundo texto se ve como un párrafo normal, ya que HTML ha eliminado todos los espacios en blanco sobrantes. Los elementos <pre> son especiales, ya que los navegadores les aplican las siguientes reglas:

▪ Mantienen todos los espacios en blanco (tabuladores, espacios y nuevas líneas)
▪ Muestra el texto con un tipo de letra especial, denominado "de ancho fijo", ya que todas sus letras son de la misma anchura
▪ No se ajusta la longitud de las líneas (las líneas largas producen un scroll horizontal en la ventana del navegador)

Esta última característica diferencia por completo a los párrafos de los elementos <pre>. Como se ha visto, los navegadores ajustan la anchura de los párrafos de texto para que ocupen todo el tamaño de la ventana. Sin embargo, los elementos <pre> se muestran tal y como son originalmente, por lo que una línea muy larga dentro de un elemento <pre> provoca que la anchura de la página sea superior a la anchura de la ventana del navegador.

Si en el ejemplo anterior se añade más texto al final de la segunda línea (para producir una línea larga), el navegador muestra un scroll horizontal ya que el texto completo no cabe en el tamaño de la ventana y las líneas de los elementos <pre> nunca se ajustan.

Espacios en blanco en html

La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas. Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto &nbsp; (es importante incluir el símbolo & al principio y el símbolo ; al final).

Así, el código HTML del ejemplo anterior se debe rehacer para incluir los espacios en blanco adicionales:

<html>
<head>
<title>Ejemplo de entidad &nbsp;</title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y &nbsp;&nbsp; otro &nbsp; tipo &nbsp; de &nbsp; espaciado.</p>
</body>
</html>

Ahora el navegador sí que muestra correctamente los espacios en blanco (y las nuevas líneas) del segundo párrafo:

 

Cada texto &nbsp; solamente equivale a un espacio en blanco, por lo que se deben escribir tantos &nbsp; seguidos como espacios en blanco seguidos existan en el texto.

Nuevas líneas en html

Para incluir una nueva línea en un punto y forzar a que el texto que sigue se muestre en la línea inferior, se utiliza la etiqueta <br>. En cierta manera, insertar la etiqueta <br> en un determinado punto del texto equivale a presionar la tecla ENTER (o Intro) en ese mismo punto. La definición formal de <br> se muestra a continuación:

La etiqueta <br> es una de las pocas etiquetas especiales de HTML. La particularidad de <br> es que es una etiqueta vacía, es decir, no encierra ningún texto. De esta forma, la etiqueta debe abrirse y cerrarse de forma consecutiva: <br></br>.

En estos casos, HTML permite utilizar un atajo para indicar que una etiqueta se está abriendo y cerrando de forma consecutiva: <br/> (también se puede escribir como <br />). Utilizando la etiqueta <br> se puede rehacer el ejemplo anterior para que respete las líneas que forman el segundo párrafo:

<html>
<head>
<title>Ejemplo de etiqueta br</title>
</head>
<body>
<p>Este primer párrafo no contiene saltos de línea ni otro tipo de espaciado.</p>
<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y otro tipo de espaciado.</p>
</body>
</html>

El navegador ahora sí que muestra correctamente las nuevas líneas que se querían insertar: