Estructura en HTML4 y HTML5
Estructura en HTML5 y HTML4
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 en HTML5 y HTML4.
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>
<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>
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>
<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>
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 en HTML5 y HTML4
alcance, lo normal es que nos surjan dudas. Un sencillo algoritmo que nos puede ayudar a como crear una pagina web