Párrafos

Los párrafos estructuran el contenido. Contienen una o más frases relacionadas entre sí, igual que en el mundo real. Si queremos crear un párrafo, metemos el texto entre las etiquetas <p> y </p> .

Por ejemplo:

<p>
Hola, me llamo Luke Skywalker y soy piloto
de una X- Wing en el Rogue Squadron. También
soy un Jedi del Lado Luminoso de la Fuerza.
Mis maestros han sido Yoda y Obi -Wan Kenobi.
</p>

Si pruebas este ejemplo en el navegador, notarás que pasa por alto los saltos de línea. Podrías haber puesto todo el párrafo en la misma línea y hubieras obtenido el mismo resultado.

Saltos de línea

Hay veces que necesitamos forzar un salto de línea dentro de un párrafo. Para ello, usamos la etiqueta <br /> , así:

<p>
Dark Chest of Wonders <br />
Seen trought the eyes <br />
Of the one with pure heart <br />
Once , so long ago.
</p>

Aunque estéticamente podamos obtener el mismo resultado mediante párrafos (con <p> ) que con saltos de línea ( <br /> ) de forma indiscriminada, debemos recordar que un documento XHTML utiliza un lenguaje semántico, es decir que lo importante para que esté bien estructurado es el significado de las etiquetas que utilizamos y no el efecto estético que generan.

Los títulos (headings)

Los títulos agrupan y ordenan información. Imaginemos la sección de enlaces de nuestra página. El título principal podría ser Mis links favoritos. Luego tendríamos los links clasificados por secciones, cada una de ellas bajo un subtítulo diferente: Blogs, descargas y videojuegos. Incluso podríamos tener subcategorías dentro de una misma sección, como por ejemplo RPG’s, Aventuras Gráficas y Arcades.

Para conseguir esto, tenemos las etiquetas <hx> y </hx> , donde x es un número del 1 al 6. <h1> corresponde al título más importante y sólo debería haber uno por página. Luego le siguen <h2> , <h3> , y así sucesivamente. Los elementos de encabezado, deben guardar un orden lógico y no debemos saltar ninguno de los niveles.

Ejemplo:

<h1>Mis links favoritos</h1>
<h2>Blogs</h2>
<! -- bla bla bla -->
<h2>Videojuegos</h2>
<h3>RPG ?s</h3>
<! -- bla bla bla -->
<h3>Arcades</h3>
<! -- bla bla bla -->

Si ves el código anterior en un navegador, aparecerán los títulos más importantes de mayor tamaño que los menos importantes (pero el tamaño de cada título siempre puede cambiarse con CSS).

Citas

Hay tres etiquetas diferentes para escribir citas: <blockquote> , <q> y <cite> . Con <blockquote> y <q> escribimos la cita en sí, mientras que con <cite> marcamos su origen (persona, libro, canción, etc.).

La diferencia entre <blockquote> y <q> es que <blockquote> se emplea para escribir citas largas, esta etiqueta contiene párrafos, en cambió <q> funciona a la inversa porque está hecha para escribir citas cortas, entonces va dentro de párrafos. Técnicamente hablando, <blockquote> es un elemento block, y <q> es inline, los elementos inline no pueden ir “sueltos” en un documento xhtml.

Para ejemplificar todo lo anterior:

<p>Aquí os dejo un fragmento de la canción
<cite>Die for Rock ?n? Roll </cite>, de Dover:</p>

<blockquote>
<p>
Everybody danced (while)<br />
I was lying on the floor <br />
I was ready to die <br />
for Rock ?n? Roll <br />
</p>
</blockquote>

<p>Mi parte preferida es cuando dice lo de
<q>I was ready to die [...] </q>.</p>

Separadores horizontales

Para los separadores horizontales se emplea la etiqueta <hr /> (horizontal rules), pero actualmente casi no son utilizados gracias a que el empleo de estilos CSS permite crear bordes delimitadores muy interesantes.

Ejemplo:

<h2>Los videojuegos</h2>
<p>Bla bla bla?</p>
<hr />
<h2>Música</h2>
<p>Bla bla bla?</p>


Comentarios

Los comentarios se utilizan para indicar partes del código de una página a modo de nota, pero son invisibles para el navegador. Sirven como guía para el desarrollador o como ayuda para usuarios que utilizan navegadores especiales, como por ejemplo los no videntes.

Para escribir un comentario en el código fuente, lo hacemos entre <!-- y -->, recordando siempre de hacerlo en una sola línea:

<!-- Esto es un comentario -->