Estructura en HTML4 y HTML5

14 septiembre, 2017
Desarrollo Web, Diseño Web

Estructura en HTML4 y HTML5

Estructura en HTML4 y HTML5 Estructura en HTML4 y HTML5 Estructura en HTML4 y HTML5 services content strategy

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>

<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 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