Ahora que ya sabemos las etiquetas necesarias para dividir una web o estructurar una web de forma general, veremos una estructura básica de un body completo con HTML5.
Utilizaremos todas las etiquetas vistas en el punto 1.2.2 Etiquetas de secciones del documento.
Podremos apreciar la falta de uso de div id, div class y span a favor de estas etiquetas mucho mas semánticas para dividir el documento.
La misma estructura básica que vamos a ver pero creada en HTML4.0.1 o XHTML1.0.1 se podría ver como en el siguiente ejemplo:
….
<body>
<div id=”header”>
<h1>Logo</h1>
<h2>Eslogan</h2>
</div><!—fin header-->
<div id=”navegador”>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
….
</ul>
</div><!—fin navegador-->
<div id=”section”>
<div id=”article”>
….
</div><!—fin article-->
</div><!—fin section-->
<div id=”aside”>
….
</div><!—fin aside-->
<div id=”footer”>
….
</div><!—fin footer-->
</body>
….
Y ahora la veremos en HTML5 y podremos ver la diferencia:
….
<body>
<header>
<hgroup>
<h1>Logo</h1>
<h2>Eslogan</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
<li><a href=”#”>Item1</a></li>
….
</ul>
</nav>
<section>
<article>
….
</article>
</section>
<aside>
….
</aside>
<footer>
….
</footer>
</body>
….
La diferencia es enorme en cuanto a semántica se refiere, a partir de ahora con HTML5 tendremos que utilizar etiquetas especificas para un fin y no solo distribuir mediante div id y div class las zonas o apartados de nuestra web.
No hay comentarios:
Publicar un comentario