Después de un par de años (creo) sin postear absolutamente nada por acá, haber engordado y subido unos cuantos niveles de Front-End Developer, vengo a plantear un tópico que quizás muchos de nosotros tenemos la duda y quizás por vergüenza o vaya a saber qué, nunca conversamos.
Desde que @freddier y @cvander comenzaron a hablar de HTML5y sus beneficios en relación a lo que se viene en la web y una larga lista de etc, pues me puse manos a la obra con el estudio de dicho standard y ya hace un buen rato que lo aplico.
En el transcurso de la variedad de desarrollos que he realizado, me he dado cuenta que siempre me surgieron dudas con esto de la web semántica y me he dedicado a buscar respuestas y la verdad es que no se encuentran muchos tópicos en referencia a la estructura de los tags.
Algunas de las dudas que me planteo:
- ¿Podré repetir el tag <nav></nav>? (ejemplo: en el header y el footer)
- ¿Cual es la forma correcta de estructurar el contenido? (a nivel de orden de cajas)
La última es como la que más me intriga, porque he visto muchos casos donde se aplica el orden de estructura totalmente distinto al que yo desarrollo, ejemplo:
<advertencia>El siguiente código te puede causar diarrea</advertencia>
Código HTML:
<div>
<section>
<h2>Lorem Ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
</section>
<section class="section2">
<h2>Lorem Ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
</section>
<section class="section3">
<h2>Lorem Ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</p>
</section>
</div>
y con unos asides por ahí muy desordenados.
Generalmente yo trabajo con la siguiente estructura:
Código HTML:
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Web semántica</title>
</head>
<body>
<header>
<a href="#" target="_self" title="Volver al inicio" id="logo"></a>
<nav>
<ul>
<li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
<li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
<li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
<li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
<li><a href="link.html" target="_self" title="Link menu">Link menu</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>Título del artículo.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
<aside>
<!-- Redes sociales y otras shits -->
</aside>
<footer>
<p>Blah blah blah</p>
</footer>
</body>
</html> donde eventualmente varío la posición del aside dependiendo de donde quiera que se muestre.
Ahí les fue... la pregunta del millón
¿Cómo trabajan ustedes el código?