Para estructurar un texto el procedimiento más sencillo consiste en separalo por párrafos. Además, HTML permite incluir títulos que delimitan cada una de las secciones.
Párrafos
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:
| <p>Este es el texto que forma el primer párrafo de una entrada de blogger. 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 misma entrada 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> <p>El tercer párrafo y todos los demás se definen igualmente, recordando que este procedimiento se utiliza cuando se redacta el texto en Edición HTML.</p> |
El ejemplo anterior se visualiza de la siguiente manera en cualquier navegador:
| Este es el texto que forma el primer párrafo de una entrada de blogger. Los párrafos pueden ocupar varias líneas y el navegador se encarga de ajustar su longitud al tamaño de la ventana. El segundo párrafo de la misma entrada también se define encerrando su texto con la etiqueta p. El navegador también se encarga de separar automáticamente cada párrafo. El tercer párrafo y todos los demás se definen igualmente, recordando que este procedimiento se utiliza cuando se redacta el texto en Edición HTML. |
Definición formal de la etiqueta <p> | <p> | Párrafos |
| Atributos comunes | básicos, ¡18n y eventos |
| Atributos específicos | - |
| Tipo de elemento | Bloque |
| Descripción | Delimita el contenido de un párrafo de texto |
Los párrafos creados con HTML son elementos de bloque, por lo que siempre ocupan toda la anchura de la ventana del navegador.
Secciones
Según las necesidades se pueden crear entradas, mediante Edición HTML, con una estructura más compleja que las que se pueden crear solamente con párrafos. Es el caso de las entradas (posts) divididas en diferentes secciones jerárquicas.
Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la entrada. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una entrada 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. La importancia del resto de etiquetas es descendente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.
Definición formal de la etiqueta <h1>
| <h1> | Sección o título de nivel 1 |
| Atributos comunes | básicos, ¡18n y eventos |
| Atributos específicos | - |
| Tipo de elemento | Bloque |
| Descripción | Define los títulos de las secciones de mayor importancia de la página |
Al igual que la etiqueta <p>, las etiquetas de título de sección son elementos de bloque y no tienen atributos específicos. Así 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 deben 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:
| <h1>Título</h1> <p>Párrafo de introducción...</p> <h3>Primera sub-sección</h3> <p>Párrafo de contenido...</p> <h3>Otra subsección</h3> <p>Más párrafos de contenido...</p> |
Los navegadores mostrarán el anterior ejemplo así:
TítuloPárrafo de introducción... Primera sub-sección Párrafo de contenido... Otra subsección Más párrafos de contenido... |
Los navegadores asignan de forma automática 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.
En el caso de Blogger el aspecto de algunos títulos de sección se aplican por defecto, dependiendo de la estructura de la plantilla. Por ejemplo en la plantilla Mínima, el tamaño por defecto con el que los navegadores muestran los títulos que se quieren mostrar en las entradas, es el siguiente:
Título de nivel 1TÍTULO DE NIVEL 2Título de nivel 3 Título de nivel 4Título de nivel 5Título de nivel 6 |
Como se puede observar el título de nivel 2 no corresponde al tamaño lógico en el nivel descendente, además las letras son mayúsculas. En el título de nivel 3 el color es el mismo de los títulos de las entradas del blog.
Solución
- Identificando en la plantilla las líneas de código que están asignando el tamaño y el color, que no son los que se quieren aplicar con las etiquetas <h1>, ..., <h6>, y hacer las modificaciones correspondientes en Diseño >> Fuentes y colores.
- Si lo anterior no es posible se reemplazan las etiquetas del nivel afectado, que en este caso son <h2> y <h3>, por otras, así:
| <strong><span style="font-size:170%;">Título de nivel 2</span></strong> <strong><h3><font color="#ffffff">Título de nivel 3</font></h3></strong> |
Que se verán así:
| Título de nivel 2 Título de nivel 3 |
Explicación - La etiqueta <strong> está resaltando el título.
- La etiqueta <span style="font-size:170%;"> aumenta el tamaño de los caracteres del título, tomando como base el 100%, que es el tamaño por defecto de la fuente.
- La etiqueta <font color="#ffffff"> está asignando un color al título.
Evidentemente, el aspecto que los navegadores aplican por defecto a los títulos de sección se puede modificar utilizando las
hojas de estilos de CSS.
