Estructura en HTML4 y HTML5

Estructura en HTML4 y HTML5 Estructura en HTML4 y HTML5 illustration mission optimized1

Estructura en HTML4 y HTML5

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

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>&#167;</p>

<p>&#169; 2013&#8211;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>&#167;</p>

<p>&#169; 2013&#8211;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

Estructura en HTML4 y HTML5

#EstructuraenHTML5 y HTML4

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Necesitas crear un sitio genial?
Scan the code