HTML: Crear secciones diferentes en una página web

Para poder aplicar estilos a una página web se combina con el lenguaje CSS. Muchas veces solo habrá que complementarlo con las pocas etiquetas que hemos aprendido hasta ahora, pero otras veces necesitaremos diferenciar las diferentes partes de una página web para poder aplicar más adelante el estilo por secciones.

<span></span>

Éste elemento lo usamos para definir una sección de un párrafo para más tarde aplicarle un estilo con CSS. El contenido entre las etiquetas será el texto que querramos darle algún formato específico. Los atributos necesarios para ello los trataremos más adelante, en otras entradas.

Un ejemplo sería el siguiente:

<p>Estamos probando un <span>ejemplo</span>.</p>

Luego, usando correctamente CSS, obtendríamos como resultado el siguiente ejemplo:

Estamos probando un ejemplo.

Aclaro que el ejemplo es incompleto. Nos faltaría añadir otro archivo en CSS para definir qué efecto haría la etiqueta <span>.

Si quisiéramos hacer que el párrafo entero tubiese el formato diferente no usaríamos la etiqueta <span>, sino que añadiendo un atributo a <p> que lo relacione con el archivo CSS ya conseguiríamos el mismo efecto de manera más ordenada.

<div></div>

Ahora ya no queremos definir una parte de un texto, sinó toda una sección de una página. Queremos separar el cabezal, el menú y el contenido de la página. Para ello usamos otra etiqueta: la etiqueta <div>.

Dentro del contenido de este elemento deberemos poner todos los párrafos que queremos que compartan estilo (quizás queremos añadirles un color de fondo, un recuadro que lo enmarque o tan solo cambiar el color del texto).

Los atributos necesarios para éllo los trataremos más adelante, en otras entradas.

Un ejemplo sería:

<div>

<h1>MENÚ</h1>

<p>Índice</p>

<p>Información</p>

<p>Contacto</p>

</div>

Luego, con los atributos correctos y usando el lenguaje CSS podríamos cambiar el formato hasta transformarlo en un margen izquierdo de la página, como se usa muy a menudo.

Aclaro que el ejemplo es incompleto. Nos faltaría añadir otro archivo en CSS para definir qué efecto haría la etiqueta <div>.

Ventajas de HTML5

Actualmente tenemos un conjunto de etiquetas que nos ayudan a facilitar las funciones de las etiquetas <span> y <div>. La utilidad de estas nuevas etiquetas nos permiten conseguir el mismo resultado pero de una manera más ordenada y cómoda para el desarrollador.

Dejo una lista de las etiquetas nuevas pero, aclaro de nuevo, hasta que tratemos CSS no voy a entrar en detalle de cómo se usan. Simplemente es importante conocerlas de antemano para profundizar más adelante.

• <header></header> para definir la cabecera de la página
• <nav></nav> para definir la barra o menú de navegación
• <aside></aside> para definir un panel con información adicional (o anuncios).
• <main></main> para la zona de contenido principal.
• <article></article> para las entradas o artículos de la página que van en la zona principal.
• <figure></figure> para las imágenes.
• <footer></footer> para el pie de página.
• <section></section> por si no fueran pocas las etiquetas, tenemos ésta que nos sirve para definir secciones de texto dentro de la página (algo como <div></div>) pero que su nombre no va referente a ninguna parte específica; simplemente una sección cualquiera, la que tu eligas ;)