La maquetación en HTML5 se va imponiendo en el actual desarrollo de los sitios Web actuales, pero lamentablemente hay errores que se están cometiendo al momento de maquetar o tratar de trabajar con HTML5, por ejemplo sitio creado en DreamWeaver usando tablas, maquetación con muchas etiquetas div y un sin fin de errores guiados por un desconocimiento.
Pero siempre debemos comenzar por algo, pero debemos dar seriedad y profesionalismo conociendo las virtudes que hoy nos esta entregado HTML5.
Las nuevas etiquetas nos permiten mejorar la semántica se nuestros sitios, comenzando por <header /> que nos permite identificar la cabecera del sitio, <footer /> identifica el pie de página del sitio, <nav /> tiene la capacidad de agrupar una serie de link, ayudando a los buscadores a detectar la estructura de nuestro sitio Web. y así un variado abanico de tag que son muy importante para SEO.
Hoy en día el uso de la etiqueta <div /> esta más orientada al SEO, no siendo ya una etiqueta "tonta", se puede usar libremente en ayuda de CSS, más aun no ha sido desplazada por completo por la etiqueta <section />. Entonces la podemos usar como ayuda dentro de la estructura, por ejemplo base para un Layout.
Dirigiéndonos en tierra derecha el uso de la etiqueta <section /> es lo mas similar a un
<div /> aportando una mínima carga a los contenidos en la cual puede agrupar distintos elementos de una etiqueta <section />, declarando su contenido relacionado. La diferencia es sutil, por ejemplo si creamos un bloque formando un todo usamos <section /> si esta más relacionado al diseño usaremos <div />.
El uso de la etiqueta <aside />, que nos sirve para indicar que dicho bloque es solo un añadido a los bloques que contiene a su lado. Esta etiqueta es hija de la etiqueta <body />, se trata de un contenido añadido por temas que no tiene nada que ver con el contenido de la página, por ejemplo: Las columnas laterales llenas de tags y banners. Si la incluimos dentro de una etiqueta <article /> nos indica que esa información complementa el articulo pero no forma parte de el.
Y para el final dejamos la etiqueta <article />, quien declara un conjunto de elementos de nuestro sitio Web, al incluir algo dentro de la etiqueta, le estamos diciendo a los buscadores que dentro de <article /> hay contenido único y con significado propio. Esta etiqueta puede contener en su interior otras etiquetas como <header /> <section /> <aside /> <footer />.
Un ejemplo práctico en el uso de las etiquetas solo usando la referencia de cada una de ellas:
<!doctype html>
<html lang="es"><meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Titulo - Sitio Web</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header>
<p class="logo"><a href="...">Logo</a></p>
<nav>
<ul>
<li><a href ... </li>
</ul>
</nav>
</header>
<article>
<header>
<hgroup><h1>Titulo</h1><h3>Otro Titulo</h3></hgroup>
</header>
<section>
<p>Contenido Texto Texto Texto Texto</p>
</section>
<aside>
<p>Datos extras para el contenido Texto</p>
</aside>
</article>
<div class="blocks">
<section>
<hgroup><h2>Bloque 1 que nos ha puesto el diseñador</h2></hgroup>
<ul>
<li>...</li>
</ul>
</section>
<section>
<hgroup><h2>Bloque 2 que nos ha puesto el diseñador</h2></hgroup>
<ul>
<li>...</li>
</ul>
</section>
</div>
<footer>
<ul>
<li><a href="">Derechos reservados....</a></li>
</ul>
</footer>
</body>
</html>
No hay comentarios:
Publicar un comentario