Las etiquetas que componen la web semántica, que no ofrecen ninguna nueva funcionalidad, pero que son útiles para estructurar los sitios web, y añadir un significado específico más allá de las etiquetas generales <div>. <div> son nuevas etiquetas estructurales que reemplazan el <nav> general y tradicional, <header>, <footer>, <aside> o <article>. En 2004, Ian Hickson, autor de la especificación HTML5, analizó 1.000.000.000 páginas web en la web para identificar la forma en que el sitio web de Google fue construido utilizando el motor y la forma en que fue construido. Uno de los resultados de este análisis fue la publicación de una lista de nombres de clase más utilizados. Esta investigación muestra que los desarrolladores utilizan identificadores comunes para estructurar clases o documentos. Esto le llevó a decidir que sería una buena idea crear etiquetas específicas para reflejar estas estructuras.
<DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <div id="header"> <a href="/"><img src=logo.png alt="home"></a> <h1>My Weblog</h1> <p class="tagline"> A lot of effort went into making this effortless. </p> </div> <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div> <div class="articles"> <div class="article"> <p class="post-date">October 22, 2009</p> <h2> <a href="#" title="link to this post">Travel day</a> </h2> <div class="content"> Content goes here... </div> <div class="comments"> <p><a href="#">3 comments</a></p> </div> </div> </div> <div class="aside"> <div class="related"></div> <div class="related"></div> <div class="related"></div> </div> <div id="footer"> <p>§</p> <p>© 2013–9 <a href="#">Arkaitz Garro</a></p> </div> </body> </html>
<!DOCTYPE html> <html> <body> <header> <a href="/"><img src=logo.png alt="home"></a> <hgroup> <h1>Title</h1> <h2 class="tagline"> A lot of effort went into making this effortless. </h2> </hgroup> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav> <section class="articles"> <article> <time datetime="2009-10-22">October 22, 2009</time> <h2> <a href="#" title="link to this post">Travel day</a> </h2> <div class="content"> Content goes here... </div> <section class="comments"> <p><a href="#">3 comments</a></p> </section> </article> </section> <aside> <div class="related"></div> <div class="related"></div> <div class="related"></div> </aside> <footer> <p>§</p> <p>© 2013–9 <a href="#">Arkaitz Garro</a></p> </footer> </body> </html>