Uso de la etiquetas semánticas
El uso de las etiquetas semánticas es bastante simple e intuitivo, según las características de cada una que acabamos de ver. Realmente no existen normas fijas, cada diseñador puede darles el uso que considere más apropiado. El único límite es el sentido común, no debemos perder de vista que los buscadores las utilizarán para indexar la página, por lo tanto, nos interesa usar las etiquetas semánticas con la lógica para la que fueron diseñadas.
Es importante aclarar que las etiquetas semánticas no añaden ningún formato. Es decir, por usar NAV no se crea un menú, ni el HEADER tiene un tipo de letra más grande. El formato debemos definirlo nosotros de la forma habitual, con CSS. La excepción es que muchos navegadores incorporan la propiedad display: block a las etiquetas semánticas.
Veamos un ejemplo sencillo. Un sitio de cocina con dos secciones, artículos dentro de cada sección, una cabecera, un pie y publicidad.
Esta es la estructura básica:
<body><header>
<h1 >Recetas de cocina</h1>
<nav>
<a href="#" >Carnes</a>
<a href="#" >Pescados</a>
</nav>
</header><section >
<h2>Recetas de carne</h2>
<article>
<h3>Conejo al ajillo</h3>
<p>Explicación de la receta 1</p>
</article>
<article>
<h3>Cordero al horno</h3>
<p>Explicación de la receta 2</p>
</article>
</section>
<section >
<h2>Recetas de pescado</h2>
<article>
<h3>Dorada a la sal</h3>
<p>Explicación de la receta 3</p>
</article>
</section><aside>
<p>Publicidad</p>
</aside><footer>
<p>autor: aulaClic</p>
</footer>
</body>
Veamos cómo queda sin formato: Recetas-sin-formato.
Ahora le daremos un poco de formato, añadiendo esta hoja de estilo:
body {
font-family:Verdana,sans-serif;font-size:0.9em;
}
header {
margin:5px;margin-bottom:15px;padding:8px;
font-family: Arial, Helvetica, sans-serif;
color:blue}
footer {
font-style:italic;
font-size:0.8em;
}
section {
margin-left:25px;
font-style:italic
}
article {
margin-left:25px;
font-style:normal;
color:green;
font-family: Arial, Helvetica, sans-serif;
}
aside {
background-color:#ddd;
}
nav ul {
margin:0;padding:0; background-color:#a44
}
nav ul li {
display:inline; margin:15px;
}
p {
color:black;
}
</style>
Con formato: Recetas
En este ejemplo sólo tenemos dos niveles sección y artículo, ¿y si necesitamos un tercer nivel?
Por ejemplo si queremos tener tres puntos en cada receta para la Descripción con foto, los Ingrediente y el Modo de elaboración. Podríamos anidar otro ARTICLE o usar DIV. Personalmente, prefiero usar DIV con un CLASS para crear el tercer nivel. De esta forma un artículo quedaría asi:
<article>
<h3>Conejo al ajillo</h3>
<div class="descripcion">
<p>Una de las formas más tradicionales de preparar el conejo es esta, con abundantes ajos.</p>
<p><img src="../graficos/conejos-al-ajillo.jpg" alt="Conejo al ajillo" width="400" height="218" align="right" /></p>
</div>
<div class="ingredientes">
<h4>Ingredientes:</h4>
<ul>
<li> 1 conejo</li>
<li> 1 cabeza ajos</li>
<li> 1 vaso vino blanco</li>
<li> aceite</li>
<li> sal</li>
</ul>
</div>
<div class="elaboracion">
<h4>Elaboracion:</h4>
<p class="elaboracion">Primero partimos el conejo en trozos pequeños y ponemos a freírlos en una sartén con abundante aceite, a fuego lento. Le añadimos el vino y esperamos a que se dore.</p>
</div> </article>
La página quedaría asi, después de añadirle un poco más de formato para colocar la publicidad en una columna a la derecha.
Versión con 3 niveles mediante DIV: Recetas
Además de usar DIV para crear más niveles, también se pueden poner DIV utilizándolos para dar formato y por lo tanto pueden abarcar SECTION, ARTICLE y HEADER. En nuestro último ejemplo, hemos utilizado un DIV que contiene SECTION, ARTICLE y FOOTER, para poder colocar la publicidad en una columna a la derecha en la etiqueta ASIDE.
<div id="columna_izquierda">
<section >
... resto contenido ... </div>