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

¿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>.

Envíanos tus comentarios, sugerencias u observaciones, tus comentarios ayudan a enriquecer y mejorar los artículo. De antemano gracias!!!

Compartir

Comentarios (0)

Animate deja un comentario!!!

Eres un humano?

Últimos Tweets

Contáctanos

  • Dirección: Plutarco Elias Calles 243, Granjas México, Iztacalco, DF.

  • Teléfono:55-2712-3820 o 55-4164-9484

  • Email: info@developerji.com