Espacios en blanco y nuevas líneas en html

El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro). El siguiente ejemplo ilustra este comportamiento:

<html>
<head><title>Ejemplo de etiqueta p</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
de
línea
y otro tipo de espaciado.</p>
</body>
</html>

El anterior código HTML se visualiza en cualquier navegador de la siguiente manera: 

Los dos párrafos de la imagen anterior se ven idénticos, aunque el segundo párrafo incluye varios espacios en blanco y está escrito en varias líneas diferentes. La razón de este comportamiento es que HTML ignora todos los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son el espacio en blanco que separa las palabras.

No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas.

Marcado genérico de texto en html

El estándar HTML incluye numerosas etiquetas para marcar los contenidos de texto. No obstante, la infinita variedad de posibles contenidos textuales hace que no sean suficientes. Si se considera el siguiente ejemplo:

Importante: si quiere ponerse en contacto con la empresa ACME, puede hacerlo en el teléfono 900 555 555 o a través de la dirección de correo electrónico contacto@acme.org

El texto del ejemplo anterior contiene elementos de texto importantes, siglas, números de teléfono y direcciones de correo electrónico. XHTML define la etiqueta <strong> para marcar los elementos importantes y <acronym> para marcar las siglas:

<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym>ACME</acronym>, puede hacerlo en el teléfono 900 555 555 o a través de la dirección de correo electrónico contacto@acme.org

Desafortunadamente, HTML no define ninguna etiqueta específica para marcar números de teléfono o direcciones de correo electrónico. De la misma forma, no define etiquetas para otros posibles elementos que se pueden encontrar en los contenidos de texto.

Por este motivo, el estándar HTML incluye una etiqueta llamada <span> que se emplea para marcar cualquier elemento que no se puede marcar con las otras etiquetas definidas. Siguiendo con el ejemplo anterior, la etiqueta <span> se utiliza para marcar el teléfono y la dirección de correo electrónico:

<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym>ACME</acronym>, puede hacerlo en el teléfono <span>900 555 555</span> o a través de la dirección de correo electrónico <span>contacto@acme.org</span>

La etiqueta <span> se visualiza por defecto con el mismo aspecto que el texto normal. Por tanto es habitual utilizar esta etiqueta junto con los atributos id y class para modificar posteriormente su aspecto con CSS:

<strong>Importante</strong>: si quiere ponerse en contacto con la empresa <acronym>ACME</acronym>, puede hacerlo en el teléfono <span class="telefono">900 555 555</span> o a través de la dirección de correo electrónico <span class="email">contacto@acme.org</span>

La etiqueta <span> sólo se puede utilizar para encerrar contenidos y etiquetas en línea. Cuando se quieren estructurar elementos de bloque, se utiliza la etiqueta <div>.

Marcado avanzado de texto en html (tercera parte)

HTML incluye una etiqueta que se puede utilizar para marcar un texto como una citación:

 

En ocasiones, no está clara la diferencia entre <cite> y <blockquote>. El elemento <cite> marca el autor de la cita (persona, documento, etc.) y <blockquote> marca el contenido de la propia cita. En el siguiente ejemplo, <blockquote> encierra el contenido de una frase célebre y <cite> encierra el nombre de su autor:

Como dijo <cite>Mahatma Gandhi</cite>: <blockquote>Vive como si fueras a morir mañana y aprende como si fueras a vivir para siempre.</blockquote>

Marcado avanzado de texto en html (segunda parte)

En ocasiones resulta útil incluir la definición de una palabra extraña o cuyo uso está restringido a un entorno muy determinado. HTML incluye la etiqueta <dfn> para proporcionar al usuario la definición de todas las palabras para las que se considere apropiado. La definición formal de esta etiqueta se muestra a continuación:

El siguiente ejemplo muestra cómo se utiliza la etiqueta <dfn> para incluir la definición completa de una palabra cuyo uso no es habitual fuera de los ámbitos médicos y psicológicos:

<p>Con estos síntomas, podría tratarse de un caso de <dfn title="Imagen o sensación subjetiva, propia de un sentido, determinada por otra sensación que afecta a un sentido diferente">sinestesia</dfn></p>

Marcado avanzado de texto en html (primera parte)

Las páginas y documentos más avanzados suelen incluir otros elementos importantes que se deben marcar de forma adecuada. Por ello, HTML incluye muchas otras etiquetas que permiten marcar más elementos del texto.

La etiqueta <abbr> marca las abreviaturas de un texto y la etiqueta <acronym> se emplea para marcar las siglas o acrónimos del texto. Su definición es la siguiente:

En ambos casos, el atributo title se puede utilizar para incluir el significado completo de la abreviatura o sigla. Ejemplo:

<html>
<head>
<title>Ejemplo de etiqueta acronym</title>
</head>
<body>
<p>El lenguaje <acronym title="HyperText Markup Language">HTML</acronym> es estandarizado por el <acronym title="World Wide Web Consortium">W3C</acronym>.</p>
</body>
</html>

La mayoría de navegadores muestran por defecto un borde inferior punteado para todos los elementos <abbr> y <acronym>. Al posicionar el puntero del ratón sobre la palabra subrayada, el navegador muestra un pequeño recuadro (llamado tooltip en inglés) con el valor del atributo title:

Marcado básico de texto en html (tercera parte)

En muchos tipos de páginas (artículos, noticias) es habitual citar literalmente un texto externo. HTML define la etiqueta <blockquote> para incluir citas textuales en las páginas web. La definición de la etiqueta HTML con el nombre más largo se muestra a continuación:

 

<html>
<head><title>Ejemplo de etiqueta blockquote</title></head>
<body>
<p>Según el W3C, el valor del atributo <em>cite</em> en las etiquetas <strong>blockquote</strong> tiene el siguiente significado:</p>
<blockquote cite="http://www.w3.org/TR/html401/struct/text.html">"El valor de este atributo es una dirección URL que indica el documento original de la cita."</blockquote>
</body>

</html>

El aspecto que muestra el ejemplo anterior en cualquier navegador es el siguiente:

 

Para indicar de forma clara que el texto es una cita externa, los navegadores muestran por defecto el texto del elemento <blockquote> con un gran margen en la parte izquierda.

Marcado básico de texto en html (segunda parte)

HTML también permite marcar de forma adecuada las modificaciones realizadas en el contenido de una página. En otras palabras, HTML permite indicar de forma clara el texto que ha sido eliminado y el texto que ha sido añadido a un determinado texto original. Las etiquetas utilizadas son <ins> y <del>, cuya definición formal es la siguiente:

 

Las dos etiquetas cuentan con los mismos atributos específicos, que opcionalmente se pueden añadir para proporcionar más información sobre los cambios realizados. El atributo cite se emplea para indicar la dirección de un documento externo en el que se puede encontrar más información relacionada con la inserción o el borrado de texto. El atributo datetime puede utilizarse para indicar la fecha y la hora en la que se realizó cada cambio.

<html>
<head><title>Ejemplo de etiqueta ins y del</title></head>
<body>
<h3>Ejemplo de etiqueta ins y del</h3>
<p>El HTML, acrónimo inglés de Hyper Text Markup Language (lenguaje de
<del datetime="20091025" cite="http://www.librosweb.es/mas_informacion.html">marcado de hipertexto</del> <ins datetime="20091026" cite="http://www.librosweb.es/mas_informacion.html"> marcas hipertextuales</ins>) es un lenguaje de marcación diseñado para estructurar textos y presentarlos en forma de hipertexto.</p>
</body>
</html>

Los navegadores muestran el ejemplo anterior de la siguiente manera:

 

Por defecto, el texto eliminado (marcado con la etiqueta <del>) se muestra tachado de forma que el usuario pueda identificarlo fácilmente como un texto que formaba parte del texto original y que ya no tiene validez. El texto insertado (marcado con la etiqueta <ins>) se muestra subrayado, de forma que el usuario pueda identificarlo como un texto nuevo que no formaba parte del texto original.

Marcado básico de texto en html (primera parte)

Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto. Los textos habituales están formados por elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc.

HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto. Entre las etiquetas más utilizadas para marcar texto se encuentran <em> y <strong>. La definición formal de estas dos etiquetas se muestra a continuación:

 

La etiqueta <em> marca un texto indicando que su importancia es mayor que la del resto del texto. La etiqueta <strong> indica que un determinado texto es de la mayor importancia dentro de la página. Ejemplo:

<html>
<head>
<title>Ejemplo de etiqueta em y strong</title>
</head>
<body>
<p>El lenguaje HTML permite marcar algunos segmentos de texto como <em>muy importantes</em> y otros segmentos como <strong>los más importantes</strong>.</p>
</body>
</html>

Por defecto, los navegadores muestran los elementos <em> en cursiva para hacer evidente su importancia y muestran los elementos <strong> en negrita, para indicar que son los más importantes.

Secciones en html

Las páginas HTML habituales suelen tener una estructura más compleja que la que se puede crear solamente mediante párrafos. De hecho, es habitual que las páginas se dividan en diferentes secciones jerárquicas.

Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una página puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.

Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.

A continuación se muestra la definición formal de la etiqueta <h1>, siendo idéntica la definición del resto de etiquetas referidas a los títulos de sección:

Al igual que la etiqueta <p>, las etiquetas de título de sección son elementos de bloque y no tienen atributos específicos.

Las etiquetas <h1>, ..., <h6> definen títulos de sección, no secciones completas. Por este motivo, no es necesario encerrar los contenidos de una sección con su etiqueta correspondiente.

Solamente se debe encerrar con las etiquetas <h1>, ..., <h6> los títulos de cada sección. El siguiente ejemplo muestra el uso de las etiquetas de título de sección:

<html>
<head>
<title>Ejemplo de texto estructurado con secciones</title>
</head>
<body>
<h1>Titular de la página</h1>
<p>Párrafo de introducción...</p>
<h2>La primera sub-sección</h2>
<p>Párrafo de contenido...</p>
<h2>Otra subsección</h2>
<p>Más párrafos de contenido...</p>
</body>
</html>

Los navegadores muestran el ejemplo anterior de la siguiente manera:

Los navegadores asignan de forma automáticamente el tamaño del título de cada sección en función de su importancia. Así, los títulos de sección <h1> se muestran con el tamaño de letra más grande, ya que son el nivel jerárquico superior, mientras que los títulos de sección <h6> se visualizan con un tamaño de letra muy pequeño, adecuado para el nivel jerárquico de menor importancia.

Párrafos en html

Una de las etiquetas más utilizadas de HTML es la etiqueta <p>, que permite definir los párrafos que forman el texto de una página. Para delimitar el texto de un párrafo, se encierra ese texto con la etiqueta <p>, como muestra el siguiente ejemplo:

<html>
<head>
<title>Ejemplo de texto estructurado con párrafos</title>
</head>
<body>
<p>Este es el texto que forma el primer párrafo de la página. Los párrafos pueden ocupar varias líneas y el navegador se encarga de ajustar su longitud al tamaño de la ventana.</p>
<p>El segundo párrafo de la página también se define encerrando su texto con la etiqueta p. El navegador también se encarga de separar automáticamente cada párrafo.</p>
</body>
</html>

El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:

La siguiente tabla recoge la definición formal de la etiqueta <p>:

Los párrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchura de la ventana del navegador. Además, no tienen atributos específicos, pero sí que se les pueden asignar los atributos comunes de HTML básicos, de internacionalización y de eventos.