Estructura tradicional de un documento HTML5

Como hemos visto con las nuevas etiquetas semánticas introducidas en HTML5, éstas

aportan un significado concreto al documento que estamos definiendo, y por lo tanto,

afectan de manera directa a la forma en la estructuramos el contenido. Vamos a ver

como podemos convertir nuestra actual página con las nuevas etiquetas introducidas en

Estructura tradicional de un documento HTML5.

2.3.1 ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML 4

El siguiente código muestra una estructura «clásica» de documento HTML, donde los

diferentes contenidos de la web se encuentran agrupados por etiquetas <div>. Por sí

mismas, estas etiquetas no aportan ningún tipo de significado diseño grafico, y el atributo id tampoco

se lo proporciona diseño. Si cambiamos <div id=»header»> por <div id=»whatever»>, el

significado sigue siendo el mismo, ninguno paginas web.

<DOCTYPE html PUBLIC»-//W3C//DTD XHTML 1.0 Transitional//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<html>

<body>

<h1>My Weblog</h1>

A lot of effort went into making this effortless.

</p>

</div>

<ul>

<li><a href=»#»>gallery</a></li>

<li><a href=»#»>about</a></li>

</ul>

</div>

<p class=»post-date»>October 22, 2009</p>

<h2>

<a href=»#» title=»link to this post»>Travel day</a>

</h2>

Content goes here…

</div>

<p><a href=»#»>3 comments</a></p>

</div>

</div>

</div>

</body>

</html>

ESTRUCTURA TRADICIONAL DE UN DOCUMENTO EN HTML5

Veamos como podemos añadir un significado a este documento, únicamente aplicando

las nuevas etiquetas semánticas incluidas en HTML5 pagina web.

<!DOCTYPE html>

<html>

<body>

<h1>Title</h1>

A lot of effort went into making this effortless.

</h2>

</hgroup>

</header>

<nav>

<ul>

<li><a href=»#»>gallery</a></li>

<li><a href=»#»>about</a></li>

</ul>

</nav>

<time datetime=»2009-10-22″>October 22, 2009</time>

<h2>

<a href=»#» title=»link to this post»>Travel day</a>

</h2>

Content goes here…

</div>

<p><a href=»#»>3 comments</a></p>

</section>

</article>

</section>

<aside>

</aside>

</footer>

</body>

</html>

Partiendo de la anterior estructura, parece evidente las nuevas etiquetas que debemos

utilizar. Esto no siempre es así, y cuando estructuramos contenidos de mucho mayor Estructura tradicional de un documento HTML5

alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar a como crear una pagina web