Tutoriales en la Web

Tip del día HTML5

Posteado el 17. Sep, 2012 por tuto in Desarrollo Web, HTML y CSS, HTML5

Introducción al HTML5

El principal cambio en el que nos centraremos hoy radica en los elementos de la nueva semántica: Es decir, en el HTML vamos a empezar a utilizar unas etiquetas que son mucho más específicas (en lugar de los ambiguos DIV a los que estábamos acostumbrados).

Esto no significa que dejemos de utilizar DIVs, sino que ahora tenemos más etiquetas.

Por ejemplo, algunas de las más comunes:

Code block

<header><footer><nav><aside><article>

Su mismo nombre ya nos dice más o menos dónde irán ubicadas.
En w3schools tienen una lista completa de todas las etiquetas nuevas.
Vamos a comparar como se creaba antes la estructura de una web y como se hará com HTML5:

Antigua estructura:

Estructura HTML

Code block

<div id="header"><h1>Título de la página</h1></div>
 
<div class="post">Contenido del post</div>
 
<div class="post">Contenido del post</div>
 
<div id="sidebar"><ul><li>Elementos típicos del sidebar</li></ul></div>
 
<div id="footer"><p>Elementos típicos del footer</p></div>

Nueva estructura:

Estructura HTML5

Code block

<header><h1>Título de la página</h1></header>
 
<article>Contenido del post</article>
 
<article>Contenido del post</article>
 
<aside><ul><li>Elementos típicos del sidebar</li></ul></aside>
 
<footer><p>Elementos típicos del footer</p></footer>

Articulos relacionados:

Tags: html5