Actualizado el 14-01-2007
versión para imprimir
Títulos, párrafos y saltos de línea
Titulos
En html hay etiquetas reservadas para las cabeceras, títulos o subtítulos dentro de la pagina. Van numeradas del 1 al 6, de mayor a menor, es decir:
<h1></h1> <h2></h2> <h3></h3> ... <h6></h6>
El texto inserto en esas etiquetas aparecerá en forma de título, y en el tamaño mayor o menor segun el número asignado.
Y es hora de que empieces a oir hablar de un concepto, sobre el que volveremos: Etiquetas físicas v. etiquetas lógicas. Todas las etiquetas en html tienen una finalidad. Esta finalidad puede ser conseguir dar al elemento una determinada apariencia, por ejemplo que una frase se lea
en cursiva, o puede tener la finalidad de ofrecer información sobre el elemento.
Las
primeras etiquetas se llaman etiquetas físicas y las segundas,
etiquetas lógicas. Se trata de un concepto muy claro y
sencillo, que tiende a confundir el hecho de que los navegadores dan un
tratamiento visual tanto a las etiquetas físicas como a a las lógicas.
Para que te hagas una idea, el texto que acabamos de escribir «etiquetas fisicas» aparece en negrita porque está rodeado de dos etiquetas b que ordenan que esa sea su apariencia. Y el texto «etiquetas lógicas» está rodeado por dos etiquetas lógicas (strong: fuerte, importante) que indican que ese texto es importante, a resaltar; el navegador visualiza igual los dos textos, pero el significado es distinto. En el primer caso, el navegador solo sabe que debe presentar el texto en negrita. En el segundo caso, el navegador sabe que ese texto marcado con strong es importante.
Y esto venía al hilo de las etiquetas cabeceras. Estas
etiquetas no solo indican que el texto debe visualizarse a determinado tamaño, en una línea aparte, sino que además expresan su importancia. Y además su importancia
relativa o jerarquica, ya que las cabeceras van del H1 al H6. Por ello los
autores puristas desaprueban que se use una cabecera H1 y como subtitulos una
cabecera H3, pues sostienen que debe utilizarse el orden numerico
escalonadamente: H1, H2, H3, etc, de tal forma que se pueda seguir el diseño jerarquico del documento.
Y una cosa mas: estas etiquetas de
cabecera son de las denominadas formadoras de bloque, ya que forman un
bloque con el texto que contienen que rompe el flujo del texto de la página. Lo
que visualmente se traduce en un salto de linea (linea vacia) antes y despues de
la cabecera.
añadiendo párrafos
El texto y el resto de los elementos de la pagina, como hemos dicho, se escribirá dentro de las etiquetas body. Para indicar al navegador el comienzo y final de cada párrafo emplearemos la pareja de etiquetas <p></p>
Estas etiquetas son tambien de las que se denominan formateadoras,
o formadoras de bloques: el texto que engloban
formará un bloque separado del resto de la pagina por lineas en blanco. En el
navegador por tanto el párrafo siguiente aparecerá tras un punto y
aparte.
Atención... en muchos manuales y en muchas páginas vereis que se usa
una sola etiqueta <p> de inicio, sin etiqueta de cierre. Esto es posible
porque el navegador "adivina" que el párrafo termina cuando encuentra la siguiente etiqueta <p> (que indica un nuevo párrafo). Pero
ni es buena práctica omitir la etiqueta de cierre, ni es correcto desde el punto
de vista del lenguaje desde la última formulación del standard xhtml. En
consecuencia, no olvideis nunca cerrar vuestros párrafos:
<p> .... aqui va un parrafo ... </p> <p> .... aqui va el segundo parrafo ... </p>
Saltos de linea
Y si queremos introducir un salto de línea (retorno de carro) en un párrafo, pero sin romper el bloque, usamos la etiqueta <br>. Recordad que en navegador presenta en pantalla el texto atendiendo a las instrucciones dadas por las etiquetas. Por eso aunque al escribir la página en nuestro editor introdujeramos múltiples líneas en blanco pulsando la tecla enter, el navegador presentaría todo el texto como una sola línea, mientras no especifiquemos lo contrario con <p> o <br>
Pongamos junto todo lo que hemos visto:
<html> <head> <title>una pagina de ensayo</title> </head> <body> <h1>Frases célebres</h1> <h2>adios mundo cruel ...</h2> <p>en este primer párrafo hablariamos de esta conocida despedida. Y pese a aparentar que escribimos varias lineas el navegador las pondría juntas hasta donde llegue la anchura de la pantalla, mientras no indiquemos un punto y aparte.<br> Este sigue siendo el mismo párrafo</p> <p>Y esto sería un segundo párrafo.</p> </body> </html>
Pulsa aqui para verlo. Comprueba que el navegador hace caso omiso de los saltos de linea que no estén marcados con la etiqueta correspondiente, y que asimismo pasa olimpicamente de respetar el número de espacios en blanco entre palabras, dejando típicamente solo uno.
non break space
Si deseamos forzar la aparicion de mas de un espacio en blanco entre palabras podemos usar la entidad (non break space). Su uso original era precisamente el de asegurar que dos palabras no se separarian, esto es, indican que aunque estén al final de una linea, el navegador no debe separarlas (pasando la segunda palabra a la linea de abajo) sino que debe mostrarlas juntas en todo caso:
coca ~ cola
coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola coca ~ cola
Su uso generalizado (e impropio) hoy en dia es con fines de diseño: simular el efecto de tabuladores en párrafos, etc.