¿Cuál es la estructura Básica de un documento html5?
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>.
El elemento DOCTYPE de html5
En la primera lección de HTML5
veremos el elemento DOCTYPE, me imagino que muchos ya saben para que sirve, si
usted no sabe aquí una explicación de que es y para qué sirve.
El elemento DOCTYPE es lo
primero que encontramos en un documento web. En versiones anteriores de HTML ya
existía este elemento, lo que se hizo en HTML5 fue que se simplifico. Este
elemento sirve para identificar la versión de HTML en la que está escrita el
documento, así de sencillo.
Es tan corto que no tendrás
problema en memorizarlo, si utilizas un IDE de programación, más fácil ya que
muchos de estos te generan el DOCTYPE.
El <! DOCTYPE> debe ser
lo primero que debe ir en un documento HTML 5, antes de la etiqueta
<html>. No olvides que <DOCTYPE!>, no es una etiqueta, esto es una
instrucción para el navegador, donde se declara la versión de html que se está
usando.
Importante: Siempre agregue la
declaración <DOCTYPE! html> a los documentos HTML, para que el navegador
sepa qué tipo de documento debe esperar.
El DOCTYPE se activa en HTML5
en todos los navegadores que tienen un modo estándar, incluyendo los navegadores
que no saben nada acerca de HTML5. Por esa razón, usted puede comenzar a usar
el DOCTYPE de HTML5 ahora.
Resumiendo las lecciones ya
vimos la Introducción a HTML5 y el elemento DOCTYPE, nuestra siguiente lección
es la Estructura Básica de un documento en html5, así que no te pierdas ninguna
lección.
0 Comentarios