Semantica HTML5 para vistas o grids.

[rjulio21]

Buenas estimados, Tengo una pequeña duda y espero puedan ayudarme.
Estoy creando un sitio web ahora y para no perder el margen de la actualización estoy utilizando HTML5 y sus etiquetas. Sin embargo, no estoy del todo seguro de que el uso sea 100% correcto. y quiero discutirlo.
Pongo ejemplos:
El sitio es un sitio de compras en internet, con su buscador, carro de compras y productos. Entonces al listar los productos bien sea por categoria, o por busqueda personalizada. Utilice un codigo mas o menos asi

Código HTML:

<section class="listaproductos">
    <article>
           <section class='imagen'><img/></section>
           <section class='descripcion>Aqui van el titulo, precio etc....</section>
    </article>
    <article>
           <section class='imagen'><img/></section>
           <section class='descripcion>Aqui van el titulo, precio etc....</section>
    </article>
</section>
 

De este modo, talcomo he leido no uso div repetitivos ni uso tablas. cosas que considero es mejor. sin embargo, realmente esta bien estructurado? De la misma manera cree el carro de compras que se va llenando según la seleccion...

Pero adicionalmente a eso. Tengo los grids para el usuario administrador, los cuales siempre he hecho con tablas. Por ejemplo el grid donde se listan todas las categorias registradas, con las opciones de modificar, eliminar y nueva..... pregunto, es mejor en estos grids tambien usar los nuevos tags? o sigo trabajandolo con tablas?


Muchas gracias a quien me responda.

[autonotel]

Bueno, desde mi punto de vista la parte del administrador, mientras funcione en los navegadores y el layout sea entendible y manejable no tienes por qué cambiarlo si supone un grandísimo trabajo.
No creo que los navegadores dejen de leer un layout hecho con divs en mucho tiempo. Lo que sí evitaría serían las tablas, si fuese posible.
Saludos

[hackjose]

Tal vez va a sonar raro
pero deberias usar tablas

ejemplo

Código HTML:

<section id="listaCompras">
<!-- es la seccion de lista compras -->
 
<table>
<caption>Lista de compras</caption>
<thead>
<tr>
<th>
producto
</th>
<th>
precio
</th>
<th>
etc
</th>
</tr>
</thead>
 
<tfoot>
<tr>
<td>subtotal</td>
<td>total</td>
<td>...</td>
</tr>
</tfoot>
 
<tbody>
<tr>
<td><img /></td>
<td>$567</td>
<td>...</td>
</tr>
</tbody>
 
 
 
</table>
 
</section>
 

Los nombres de los productos los deberias encerrar en <strong> para que te ayude al SEO.

Saludos

[arturosl]

Mi opinion es la siguiente:

*Yo no usaría tantos section dentro de los article, los cambiaria por div's y concuerdo con @hackjose sobre lo de usar tablas.

Html5 no es sinónimo de usar todas las etiquetas nuevas, los divs y tablas son opciones validas (no usar tablas para maquetar, eso es pecado) y solo recuerda que todos los abusos son malos.

[daPhyre]

Section es para indicar una sección dentro de un artículo. Se supone que no se deben usar los divs si hay una etiqueta alterna que describa mejor la parte que deseas meter dentro de dicha etiqueta. En este caso, las imágenes no son una sección del artículo, por lo que es probable que sea mejor usar div. (Lo demás, quizá si sean section, depende los datos que vayan adentro).

Lo que dices de las tablas, me das a entender que son precisamente eso: Tablas de datos. Y las tablas son para hacer tablas (Vaya la redundancia), por lo que si quieres mostrar tablas, debes usar la etiqueta table. Si quieres mostrar otro dato que no sean tablas, entonces si debes usar div o la etiqueta que resulte mejor.

Suerte