Lo más novedoso de HTML5 son las nuevas API y los nuevos elemento y la semántica para darle más dinamismo a las páginas con menos código y facilitando al programador el maquetado de las paginas web.
En anteriores artículos vimos la introducción y el elemento doctype, en esta ocasión veremos la estructura básica que debe tener una página web con HTML5 y algunas mejoras establecidas en la misma.
Ya no tienes que usar DIV’s para maquetar la estructura de tu documento. Ahora cada parte tiene su propia etiqueta.
Estructura básica en HTML5:
<DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"/> <title>Lección 2 de HTML5</title> <link rel="stylesheet" type="text/css" href="css/estilos.css"> <link rel="shortcut icon" href="favicon"/> </head> <body> <header> <h1>Lección 2 de HTML5</h1> <h2>Cómo ser experto en html5</h2> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Programas</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </header> <section> <article> <h2>Titulo del articulo</h2> <p>Aqui va el artículo</p> <img src="images/logo.png"> </article> </section> <aside> <h2>ASIDE</h2> <p>Puede haber mas de uno, y se les da formato diferente asignándoles ID o CLASS con CSS</p> </aside> <footer> <h2>FOOTER</h2> <p>Aqui todo el contenido del footer</p> </footer> </body> </html>
La etiqueta DOCTYPE no pasa de moda, tu documento debe empezar definiendo que tipo de documento es, de ahí que deba incluir <!DOCTYPE html>. Mientras tanto la etiqueta <HTML> se usa para abrir tu documento html.
HEAD: Es para indicar la cabeza de tu documento. No debes confundir esto con header que se define más adelante.
- META. Con esto defines el tipo de codificación del documento por ejemplo utf-8
- TITLE: Sirve para especificar el título del documento. Este aparece en la barra del navegador. Esta es muy importante incluirla a los documentos creados, ya que la asociamos a una identidad por medio de su título.
HEADER: En esta sección va la cabecera de tu sitio web. El nombre, slogan y logo deben ir aquí.
NAV: Es la principal barra de navegación o menú de navegación de tu sitio web. La posición y el estilo lo defines mediante CSS. Regularmente dentro de NAV estarán <ul> y <li>, que te sirven para dar forma y estilo a tu menú.
SECTION: Es la sección dónde va el contenido de tu sitio. Este a su vez puede agrupar articles
ARTICLE: Como su nombre lo indica, contiene un artículo. A su vez cada ARTICLE puede contener etiquetas <h2> para definir el título del artículo. Se recomienda que haya solo un <H1> por cada página que representa el título de tu página. A google no le gustan muchos <h1>, esto para tomarlo en cuenta en tu estrategia seo.
ASIDE: Contiene una barra lateral, como para poner enlaces a facebook, twitter y demás. Así divides el cuerpo de tu página en dos columnas. Una donde va el contenido, artículos, etc y otro donde van banners, ligas, etc.
FOOTER: Como su nombre lo indica este contiene el pie de página de tu sitio.
En la siguiente lección veremos más a detalle cada una de las etiquetas y Nuevas etiquetas estructurales de HTML5 como: <header>, <hgroup>, <footer>, <nav>, <aside>, <section> y <article>.
Envíanos tus comentarios, sugerencias u observaciones, tus comentarios ayudan a enriquecer y mejorar los artículo. De antemano gracias!!!
