¿Cuál es la estructura Básica de un documento html5?

aprende html 5 gratis y facil

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!!!