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
Estructura en HTML4 y HTML5
Master SEO desde 1992 experto programador web director de la compañía marketing Web. Master SEO since 1992 expert web programmer / director of web marketing company
A cerca de nosotros
Somos una compañia de marketing digital enfocada en ayudar a nuestros clientes a conseguir resultados en áreas claves de sus negocios.
Solicite una cotización
Ofrecemos un servicio profesional SEO que ayuda a incrementar de una manera drástica y orgánica las búsquedas a su sitio, de esa manera uno podrá competir por palabras clave mejor valoradas.
Más entradas
Ver todas las entradas
Entradas recientes
- Programación Web en Acapulco 23 septiembre, 2020
- Programación Web en Torreón 8 septiembre, 2020
- Diseño Web en Veracruz 29 julio, 2020