dudas con html5 semantico

primary · #1 (**permalink**) 15/05/2015, 07:36

Hola no acabo de entender bien como usar las etiquetas html5 se que esta en discusion aun pero se que en este foro los mas expertos me podran ayudar, se trata de una web de productos de segunda mano el documento html seria este:

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
 
<body>
<header>
  <figure>logotipo</figure>
  <nav>menu principal de navegacion(toda la web tiene este menu)</nav>
</header>
<section>
  <nav>menu navegacion de los diferentes productos</nav>
  <h1>tipo de productos</h1>
  <!-- todos los productos pueden haber hasta 30 productos en un documento -->
  <div> 
    <img src="producto">
    <h3>nombre producto </h3>
    <p>descripcion producto</p>
  </div>
  <div> 
    <img src="producto">
    <h3>nombre producto </h3>
    <p>descripcion producto</p>
  </div>
  <div> 
    <img src="producto">
    <h3>nombre producto </h3>
    <p>descripcion producto</p>
  </div>
  
  <div>paginador de los productos</div>
</section>
<aside>contenido que se sale un poco fuera de lugar del principal</aside>
<footer>
   <a href="">quienes somos</a> 
   <a href="">contactar</a> 
   <a href="">mapa sitio</a>
</footer>
</body>
</html>

tengo varias dudas por ejemplo si en vez de un section usar un article con su header, o el mismo section dentro un article con su header, o archicle y en cada producto un section pero claro en cada pagina tendria como 30 productos, alguien me intenta ayudar para crear la estructura de la mejor forma posible, saludos.

tanatos_neon · #2 (**permalink**) 15/05/2015, 08:57

Hola.

La estructra es bastante sencilla y no vas desencaminado.

Únicamente modificaria esta parte:

Código HTML:

<div> 
    <img src="producto">
    <h3>nombre producto </h3>
    <p>descripcion producto</p>
  </div>

Por esta:

Código HTML:

<article> 
    <img src="producto">
    <h3>nombre producto </h3>
    <p>descripcion producto</p>
  </article>

Esta seria basicamente la forma de estructurarlo.

Como ves, dentro de SECTION van los ARTICLE (dentro de la SECCIÓN los ARTICULOS (tiene su logica))

Espero que te sirva

primary · #3 (**permalink**) 15/05/2015, 09:25

Hola gracias, entonces los nav están bien situados o no?esque algunos dicen solo debe haber un nav otros dicen tantos como se necesite, ya me lio.
Saludos

tanatos_neon · #4 (**permalink**) 15/05/2015, 09:31

Hola.

Si, estan correctos, unicamente, para mejorarlos de vista a estructura, aplica un id diferente a cada nav y resuelto.

hackjose · #5 (**permalink**) 15/05/2015, 09:46

Código HTML:

Ver original<header>
  <figure>logotipo</figure>
  <nav>menu principal de navegacion(toda la web tiene este menu)</nav>
</header>

el elemento <figure> esta mal, porque su contenido debería ser referenciado desde el contenido principal de la pagina, hasta donde tengo entendido <figure> No es un "contenedor generico de imagenes"

Código HTML:

Ver original<header>
  <img src="logotipo" />
  <nav>menu principal de navegacion(toda la web tiene este menu)</nav>
</header>

tanatos_neon · #6 (**permalink**) 15/05/2015, 09:50

Cierto... ni me fije...

fede5426 · #7 (**permalink**) 15/05/2015, 10:16

Esta seria la forma de usar el figure:

Código HTML:

Ver original<figure>
  <img src="logotipo.jpg" />
</figure>

hackjose · #8 (**permalink**) 15/05/2015, 10:59

Cita:

Iniciado por fede5426

Esta seria la forma de usar el figure:

Código HTML:

Ver original<figure>
  <img src="logotipo.jpg" />
</figure>

Claro asi se utiliza, pero en este caso debe utilizarce? teniendo en cuenta que es el logo de la pagina

fede5426 no digo que estes mal o que yo estoy bien, solo que siento que deberíamos en este caso de html5 decir "esta mal por esto" o "esta bien por esto otro"

Saludos

primary · #9 (**permalink**) 15/05/2015, 11:01

Hola, el figure lo tengo como dice fede5426, se entiende que si esta en el header va referenciado en todo el documento no?
ahora ya tengo mis dudas alguna aportacion mas para despejarmelas?
saludos.

primary · #10 (**permalink**) 15/05/2015, 11:09

Hola no vi tu respuesta, entonces deberia no usar figure para el logotipo pero si para los div del section como dijo el amigo deberia usar article en esas imagenes si deberia usar figure

Código HTML:

Ver original<article> 
    <figure><img src="producto"></figure>
    <h3>nombre producto </h3>
    <p>descripcion producto</p>
  </article>

cualquier conclusion o aportacion estaria bien ya que al final aprendere y todo con vuestras ayuda, saludos

hackjose · #11 (**permalink**) 15/05/2015, 12:46

Cita:

Iniciado por primary

Hola no vi tu respuesta, entonces deberia no usar figure para el logotipo pero si para los div del section como dijo el amigo deberia usar article en esas imagenes si deberia usar figure

Código HTML:

Ver original<article> 
    <figure><img src="producto"></figure>
    <h3>nombre producto </h3>
    <p>descripcion producto</p>
  </article>

cualquier conclusion o aportacion estaria bien ya que al final aprendere y todo con vuestras ayuda, saludos

Exacto, pero ahora quita el <h3> y utiliza <figcaption><h3>nombre producto</h3></figcaption>

saludos

aqui esta la info oficial
http://www.w3.org/TR/html5/

primary · #12 (**permalink**) 15/05/2015, 14:13

Pero dejando el h3 dentro del figcaption te refieres asi:

Código HTML:

Ver original<article> 
    <figure><img src="producto"></figure>
    <figcaption><h3>nombre producto </h3></figcaption>
    <p>descripcion producto</p>
  </article>

aparte tengo otra pequella duda, estoy pensando para no hacer muy extenso el documento en la descripcion poner solo una pequella parte de la descripcion con un enlace para ver con detalle ese producto pero entonces no deberia ser un article porque no esta toda la descripcion o seria igual?

quedaria algo asi:

Código HTML:

Ver original<div> 
    <figure><img src="producto"></figure>
    <figcaption><h3>nombre producto </h3></figcaption>
    <p>descripcion producto lo que sea <a href='descripcion.html'>seguir leyendo</a></p>
  </div>

o debo seguir usando article?

perdonar mis dudas y gracias, saludos.

hackjose · #13 (**permalink**) 15/05/2015, 16:34

Si es poca informacion entonces el <div>

Ya cuando sea toda entonces el <article>

vas bien

fede5426 · #14 (**permalink**) 15/05/2015, 19:00

Cita:

Iniciado por hackjose

Claro asi se utiliza, pero en este caso debe utilizarce? teniendo en cuenta que es el logo de la pagina

fede5426 no digo que estes mal o que yo estoy bien, solo que siento que deberíamos en este caso de html5 decir "esta mal por esto" o "esta bien por esto otro"

Saludos

No, no debería utilizarse en el logo, solo quería aclarar cómo se emplea la etiqueta figure.

Figure es más para usarla en imágenes o fotos que acompañan el texto principal del contenido. De cualquier forma, no son obligatorias.

PHPeros · #15 (**permalink**) 16/05/2015, 06:59

Por si quieres leer:

Errores comunes en HTML5.

La etiqueta figure no tiene por qué ser únicamente para imágenes, también para vídeo audio etc.

primary · #16 (**permalink**) 16/05/2015, 07:37

Hola gracias nuevamente a todos, seguramente la parte de los productos y descripcion la pondre individualmente aparte pero tengo dudas lo estructure asi, haber si me confirmais errores.

Código HTML:

Ver original<html>
<body>
<header> <img src='logotipo'>
  <nav>menu principal de navegacion(toda la web tiene este menu)</nav>
</header>
<section>
  <article>
    <header>
      <div> fecha producto </div>
      <div> provedor que tiene producto </div>
    </header>
    <section>
      <div>
        <h1>nombre producto</h1>
        <p>descripcion producto completa</p>
      </div>
      <div> <img src="producto1"> <img src="producto2"> </div>
    </section>
  </article>
  <aside> 
    veces visto este producto
    4 productos en stock 
    </aside>
</section>
<footer> <a href="">quienes somos</a> <a href="">contactar</a> <a href="">mapa sitio</a> </footer>
</body>
</html>

hackjose · #17 (**permalink**) 16/05/2015, 09:24

Pienso que quedaria asi

Código HTML:

Ver original<html>
<body>
<header> 
  <img src='logotipo'>
  <nav>menu principal de navegacion(toda la web tiene este menu)</nav>
</header>
 
<section>
  <article>
 
    <header>
        <h1>nombre producto</h1>
    </header>
    <p>descripcion producto completa</p>
 
    <div> 
        <img src="producto1"> <img src="producto2"> 
    </div>
 
   <footer> 
        <p>veces visto este producto</p>
        <p>4 productos en stock </p>
        <p>fecha producto</p>
        <p>provedor que tiene producto</p>
    </footer>
 
  </article>
</section>
 
<footer> <a href="">quienes somos</a> <a href="">contactar</a> <a href="">mapa sitio</a> </footer>
</body>
</html>

hackjose · #18 (**permalink**) 16/05/2015, 09:28

Aparte no olvides poner el <!doctype html>

primary · #19 (**permalink**) 18/05/2015, 03:16

Gracias hackjose, ya empiezo a entender como estructurar, otra duda al utilizar html5 es necesario usar los atributos role por ejemplo para el contenido principal.

Código HTML:

Ver original<section role="main">
  <article>
 
    <header>
        <h1>nombre producto</h1>
    </header>
    <p>descripcion producto completa</p>
 
    <div> 
        <img src="producto1"> <img src="producto2"> 
    </div>
 
   <footer> 
        <p>veces visto este producto</p>
        <p>4 productos en stock </p>
        <p>fecha producto</p>
        <p>provedor que tiene producto</p>
    </footer>
 
  </article>
</section>

La duda la tengo porque semanticamente ya se entiende que el section contiene la parte principal pero no se si es mejor indicarlo.
saludos

PHPeros · #20 (**permalink**) 18/05/2015, 10:10

El atributo role fue una invención de WAI-ARIA y se utilizaba cuando aún no existían las etiquetas semánticas de HTML5. Ahora puedes añadir ambos para dar soporte a todos los navegadores aunque no es necesario.

primary · #21 (**permalink**) 18/05/2015, 15:47

Gracias PHPeros, saludos.

superweb360 · #22 (**permalink**) 18/05/2015, 21:13

En esta web pone que los <section> pueden contener <article> y también viceversa. http://html5doctor.com/the-article-element/

An <article> with <section>s. You can use the <section> element to split the article into logical groups of content with headings:

Código HTML:

Ver original<article>
  <h1>Apple varieties</h1>
  <p>The apple is the pomaceous fruit of the apple tree...</p>
 
  <section>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many supermarkets...</p>
  </section>
 
  <section>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for apple pies...</p>
  </section>
    
</article>

A <section> containing <article>s

Código HTML:

Ver original<section>
  <h1>Articles on: Fruit</h1>
 
  <article>
    <h2>Apple</h2>
    <p>The apple is the pomaceous fruit of the apple tree...</p>
  </article>
 
  <article>
    <h2>Orange</h2>
    <p>The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine...</p>
  </article>
 
  <article>
    <h2>Banana</h2>
    <p>Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red...</p>
  </article>
    
</section>