Nuevas Etiquetas en HTML5Primeros pasos: Maquetacin , , , , , , Juan Ros Pizarro @MetalTux

Antiguamente con HTML 4 Para poder definir la estructura de una pgina web, debamos utilizar etiquetas y definirles una class de CCS especfica para definir sus posiciones dentro del esquema de nuestra pgina, de una forma poco especfica y para nada semntica.

Ahora con HTML 5 Se definen diferentes etiquetas que estn destinadas a identificar las secciones ms importantes de nuestra pgina, de una forma ms semntica y especfica: , , , , .

Ahora con HTML 5 cabecera del documento. elementos de navegacin y botoneras. etiqueta general para cada pgina y/o secciones de la misma. diferentes partes del contenido de cada pgina y/o seccin de la misma. Puede contener secciones. imgenes a mostrar. pie de pgina. informacin adicional y mens laterales.

La etiqueta se recomienda para ser utilizada en la definicin de la cabecera de una pgina Web, como por ejemplo la cabecera de un Blog. Tambin puede ser utilizada para definir la cabecera de un Artculo o de una Seccin . Inclusive podramos definir cabeceras para un (por ejemplo el sidebar de un Blog). Ac va la Cabecera de nuestra pgina Web.

Se utiliza para definir el contenido de una cabecera, agrupando los contenidos desde hasta . Esto es cuando la cabecera tiene mltiples niveles. Ttulo de la Cabecera Subttulo de la Cabecera

Especifica un contenido autnomo e independiente. Su utilizacin se recomienda para: Artculos de Peridicos virtuales. Publicaciones de un Foro. Publicaciones de un Blog. Comentarios de un Blog. Contenido del Artculo.

Permite mostrar un contenido anexo, preferentemente en uno de los costados de la pgina, que tiene relacin directa con el contenido principal de la pgina. Se usa principalmente para mostrar datos en una Barra Lateral. Ejemplo de eso sera un sidebar de un Blog. Link de Sidebar

Define una seccin dentro del documento. Esta seccin puede ser para definir una cabecera, artculos, captulos, pi de pgina o cualquier otra seccin del documento. Ac va la Cabecera de nuestra pgina Web. Artculo 1 Seccin del artculo.

Define una seccin con links de navegacin. No todos los links de navegacin deben ser incluidas en una etiqueta . Este elemento est destinado slo para el bloque principal de enlaces de navegacin. Enlace N 1 Enlace N 2 Enlace N 3 Enlace N 4

Defina el pi de pgina para un Documento o una seccin de este. Tpicamente contiene datos del Autor de la Pgina, Informacin de Copyright, Trminos de Uso, entre otras cosas. El documento puede tener una o ms etiquetas . Tpicamente, el pi de pgina se muestra como ltimo elemento del documento, aunque esto no es obligatorio. Contenido del footer, Copyrigth, entre otras cosas.

Complementando con CSS3 Para complementar las nuevas etiquetas, podemos usar estilos con CSS3, lo cual le da un toque ms profesional a nuestros documentos. Contiene nuevas formas de dar una mejor apariencia a nuestros sitios, tales como bordes redondeados, sombreados, gradientes, entre otras mejoras.

Ejemplo prctico Para complementar lo anteriormente explicado, ahora veremos un Ejemplo prctico simple, en el cual utilizaremos las etiquetas anteriormente mostradas, y las acomodaremos dentro de la pgina utilizando estilos con CSS3.

Juan Ros Pizarro @MetalTux