Muchos diseñadores utilizan html o xhtml separando o agrupando los elementos en capas con div. El problema es que si tenemos 50 div cada uno separado con su clase definiendo la estructura de la página web, esto tendrá sentido para el diseñador o programador pero no para los buscadores ya que no pueden distinguir que es cada clase si es una cabecera, sección, articulo, pie de pagina, etc.



A continuación definiremos las mas importantes en sentido semántico:

• header : define el bloque de la cabecera de la página web y encerrar el contenido de la cabecera.
• nav : define un bloque que representa un menú, por lo tanto los buscadores al encontrar esta etiqueta saben que es la estructura de navegación.
• hgroup: define y agrupa títulos y así darle distintas importancia a cada titulo.
• section y article: Los anteriores elementos que definen capas div> y se cambian por las etiquetas section y article, que tienen un sentido más semántico al definir secciones y artículos dentro de las secciones.
• aside : define y agrupa elementos de tipo tangencial de la pagina web. Es decir contenido que no es el principal como por ejemplo las columnas laterales o Sidebar de la web
• footer : define y agrupa elementos en el pie de pagina de la web.

Utilizando capas xhtml div en HTML5 semántico para SEO

La utilización de HTML5 no implica que se deje de utiliza XHTML, siguen siendo muy buenas para organizar la estructura y agrupar elementos de la pagina web o invocar de Jquery, recordemos que HTML5 sirve para darle sentido semántico pero dento del bloque se puede seguir utilizando cualquier otra etiqueta XHTML. Veamos un ejemplo a continuacion

 <div id="cabecera">
	    <header>
		    <hgroup>
			    <h1>Titulo de la web</h1>
			    <h2>Subtitulo</h2>
		    </hgroup>
		    <div id="logo">logo de la web</div>
	    </header>
</div>

Podemos ver que con las capas se ha definido la estructura y dentro se definió la cabecera header y un hgroup para agrupar los títulos, además de una capa que contiene el logo.

Así las capas XHTML nos permiten definir la estructura de página web para tener una mejor organización para el programador, entonces XHTML nos sirve para definir bloques con sentido para la estructura y HTML5 nos permite crear bloques con sentido para los buscadores y el SEO. Como se utiliza la etiqueta section en HTML5 para SEO.

Utilizar la etiqueta section es muy similar a utilizar una capa div, con la diferencia que section aporta el sentido semántico y todos los elementos encerrados en section están relacionados con la semántica de la web. Es importante No utilizar section para agrupar elementos en un bloque cualquiera porque necesitemos tener agrupado elementos sin sentido para asignarle estilos CSS o algún efecto de programación.

Si el motivo de crear un bloque es para aplicarle CSS o utilizarlo desde código con algún script, entonces sera mejor no utilizar HTML5, ya que el bloque no tiene un contenido semántico. En este caso deberemos crear un bloque con la capa div de xhtml. Como se ve en el ejemplo anterior, el logo no tiene sentido utilizar HTML5 ya que se utiliza CSS para mostrar la imagen.

Cómo se utiliza la etiqueta article en HTML5 para SEO

Cuando utilizamos el elemento article estamos definiendo un bloque que tiene sentido semántico y contenido que los buscadores pueden rastrear. La etiqueta article no necesariamente refiere a una nota de texto, puede ser un producto, imágenes o un formulario.

Vemos un ejemplo sencillo de una página web y su código en HTML5:

<header>
    <h1>Autos Online</h1>
</header>
<article>
    <header>
	    <h3>Honda Civic</h3>
    </header>
    <img src=image/honda-civic.jpg width="318" height="237" />
    <p>Descripci&oacute;n Honda Civic </p>
</article>
<article>
    <header>
	    <h3>Toyota VIO</h3>
    </header>
    <img src=image/toyota.jpg width="300" height="200" />
    <p> Descripci&oacute;n Toyota VIOS </p>
</article>

El resultado será la siguiente web sin diseño de momento pero apreciamos los bloques definidos.

Como dentro de article podemos poner capas o párrafos u otros elementos xhtml en algunos casos el contenido de la web podría tener solo un article y en el caso de que la página tenga listados o catálogos como el caso anterior de Autos Online podremos tener un article por cada producto mostrado y también su propia cabecera para dar mas relevancia a los títulos.

A los elementos HTML5 también podemos aplicarle estilos css, veamos un ejemplo sencillo para un blog online con HTML5 y CSS3.

<style>
    #cabecera {
	    padding: 20px;
	    background: #ff9900;
	    background-size: 50%;
    }
    #blog {
	    padding: 44px;
	    background: #f8f8f8;
	    background-size: 50%;
	    border-radius: 22px;
    }

    .comentario {
	    margin-top: 10px;
	    padding: 44px;
	    background: #99CC00;
	    width: 600px;
	    border-radius: 22px;
    }
</style>

<header id="cabecera">
    <h1>Blog Online</h1>
</header>
<section id="blog">
    <article class="comentario">
	    <header>
		    <h2>Titulo 1</h2>
		    <p>Posteado <time datetime="06 de Diciembre de 2014">06 de Diciembre de 2014</time> por  <a href="#">Sergio</a> - <a href="#">3 comentarios</a></p>
	    </header>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
    </article>
    <article class="comentario">
	    <header>
		    <h2>Titulo 2</h2>
		    <p>Posteado <time datetime="01 de Diciembre de 2014">01 de Diciembre de 2014</time> por  <a href="#">Sergio</a> - <a href="#">20 comentarios</a></p>
	    </header>
	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus odio, ultricies eu pharetra dictum, laoreet id odio...</p>
    </article>
</section>

Esto demuestra que no solo son elementos semánticos sino que también pueden ser parte del diseño y estructura de la página web.

Cómo se utiliza la etiqueta aside en HTML5 para SEO

Este elemento sirve para definir un bloque secundario dentro de la estructura de la pagina web, es contenido o datos que queramos mostrar al visitante pero no es un contenido principal.

Podemos asociar la etiqueta aside con las columnas laterales o comúnmente conocidas como Sidebar que tendrán como contenido menú de navegación secundaria, enlaces a otras páginas web, formularios de login. También podemos crear un aside dentro de un article esto significa que lo que esta dentro de aside es un complemento del contenido de article pero no forma parte directa de ese contenido, por ejemplo si tenemos un articulo sobre algún ventas y en un aside publicamos estadísticas.

Para finalizar recordar el objetivo de Maquetar: