HTML5 Estructuración semántica del artículo y sección en el sitio web con múltiples subconsportes
Pregunta
¿Cuál de las siguientes, si lo hay, es la forma más correcta de usar el artículo y los elementos de sección en un sitio web con múltiples subconsumnos?
El primer ejemplo Crea este esquema plano como este.
- nombre de empresa
- Navegación de segmento
- Nombre de segmento
- Seggment Sub navegación
- nombre del producto
- Navegación de la subpágina del producto
- Producto sub página 1 Título
- Pie de página
... y se ve así
<header> <!-- MAIN NAVIGATION -->
<h1><a>Company Name</a></h1>
<nav>
<h1>Segment Navigation</h1>
<ul>
<li><a>Segment 1</a></li>
<li><a>Segment 2</a></li>
<li><a>Segment 3</a></li>
</ul>
</nav>
</header>
<header> <!-- SUB NAVIGATION -->
<h1><a>Segment Name</a></h1>
<nav>
<h1>Segment Sub Navigation</h1>
<ul>
<li><a>Product 1</a></li>
<li><a>Product 2</a></li>
<li><a>Product 3</a></li>
</ul>
</nav>
</header>
<header> <!-- PRODUCT PAGE NAVIGATION -->
<h1><a>Product Name</a></h1>
<nav>
<h1>Product Sub Page Navigation</h1>
<ul>
<li><a>Product sub page 1</a></li>
<li><a>Product sub page 2</a></li>
<li><a>Product sub page 3</a></li>
</ul>
</nav>
</header>
<article>
<h1>Product sub page 1 title</h1>
<p>Content from Product sub page 1<p>
</article>
<footer>
<h1>Footer</h1>
<p>Footer content</p>
</footer>
El segundo ejemplo crea un esquema de estructura de árbol como este
- nombre de empresa
- Navegación de segmento
- Nombre de segmento
- Seggment Sub navegación
- nombre del producto
- Navegación de la subpágina del producto
- Producto sub página 1 Título
- Pie de página
... y se ve así
<header> <!-- MAIN NAVIGATION -->
<h1><a>Company Name</a></h1>
<nav>
<h1>Segment Navigation</h1>
<ul>
<li><a>Segment 1</a></li>
<li><a>Segment 2</a></li>
<li><a>Segment 3</a></li>
</ul>
</nav>
</header>
<section> <!-- SEGMENT SECTION -->
<header> <!-- SUB NAVIGATION -->
<h1><a>Segment Name</a></h1>
<nav>
<h1>Segment Sub Navigation</h1>
<ul>
<li><a>Product 1</a></li>
<li><a>Product 2</a></li>
<li><a>Product 3</a></li>
</ul>
</nav>
</header>
<section> <!-- PRODUCT SECTION -->
<header> <!-- PRODUCT PAGE NAVIGATION -->
<h1><a>Product Name</a></h1>
<nav>
<h1>Product Sub Page Navigation</h1>
<ul>
<li><a>Product sub page 1</a></li>
<li><a>Product sub page 2</a></li>
<li><a>Product sub page 3</a></li>
</ul>
</nav>
</header>
<article>
<h1>Product sub page 1 title</h1>
<p>Content from Product sub page 1<p>
</article>
</section>
</section>
<footer>
<h1>Footer</h1>
<p>Footer content</p>
</footer>
Solución
Ambos están bien, pero significan cosas diferentes. Vaya con cualquier esquema que coincida con su intención para la estructura.
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow