Como estamos diciendo todo el texto de la página estará
dentro del <body>
, el texto dentro del <body>
debe
estar, principalmente, dentro de párrafos. En HTML, los párrafos se identifican con la
etiqueta <p></p>
.
Dentro de los párrafos colocaremos texto e imágenes, y algunas
etiquetas que nos permitan dar formato al texto. Dentro de un párrafo no debe haber
otros párrafos anidados.
A su vez, dentro del <body>
, disponemos de encabezados que nos permiten organizar
los títulos o rótulos del texto. Los encabezados van desde el <h1></h1>
de mayor
tamaño, al <h6></h6>
, el más
pequeño. Por ejemplo, utilizaríamos un <h1>
para poner
el rótulo principal de la página, <h2>
para los
títulos de los apartados, <h3>
para los apartados de segundo nivel, etc. El propio texto de cada apartado
iría fuera del encabezado contenido en párrafos <p></p>
u otras etiquetas.
Una
de las peculiaridades del texto, es que los espacios en blanco
consecutivos y saltos de línea no se muestran como en el código fuente.
Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si
en el código fuente escribimos Bienvenido a aulaClic
se verá Bienvenido a aulaClic
.
Si queremos poner varios espacios seguidos, utilizaremos el código html
para el espacio,
El navegador también ignora los saltos de línea. Así si dentro
de un párrafo colocamos varios saltos de línea pulsando Intro,
estos no se verán. Para crear un salto de línea dentro de
un párrafo, utilizamos la etiqueta <br />
.
Cada etiqueta <p></p>
lleva implicito un salto de línea.
Veremos con más detalle y ejemplos la etiqueta <p>
, un poco más adelante, en esta misma unidad.
Otras formas de agrupar el contenido dentro de la página web es con las etiquetas <div>
y <span>
. La etiqueta <div>
se utiliza a nivel de bloque y la etiqueta <span>
a nivel de línea o palabras. Estas etiquetas son básicamente contenedores genéricos de contenido. El contenido se escribe entre las etiquetas de apertura y de cierre <div>
contenido
</div>
, el criterio para agrupar contenido no está definido estrictamente, por lo tanto podemos utilizarlas para lo que queramos, por ejemplo para dar estilo al contenido.
Podríamos decir que las etiquetas <div>
y <span>
son unas etiquetas neutras dentro de la semántica de HTML. Por el contrario, en HTML 5 han surgido nuevas etiquetas semánticas para agrupar el contenido según su significado. Estas nuevas etiquetas a nivel de bloque son, section para secciones, article para artículos, header para cabeceras, nav para menús, footer para pies de página y aside para contenido en el lateral. A nivel de línea o texto tenemos muchas etiquetas semánticas como strong, em, cite. A lo largo del curso iremos viéndolas con detalle.
El uso de estas nuevas etiquetas semánticas no es obligatorio, pero sí recomendable, sobre todo para tener la información mejor estructurada y también para que los buscadores sean capaces de identificar mejor el contenido de nuestra página. Resumiendo, lo recomendable es utilizar las etiquetas semánticas y en los casos en los que no exista una etiqueta semántica apropiada utilizar etiquetas <div>
y <span>
. En la unidad 12 veremos todo esto con más detalle.
Otras etiquetas para agrupar y organizar el contenido (texto, imágenes, ...) en formatos estructurados son las listas (ul, ol, li) y las tablas (table, tr, td)
En este curso veremos todo esto progresivamente, en esta unidad vamos a empezar por las etiquetas para representar texto, los párrafos, encabezados, saltos de línea, etc.
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.