etiqueta section

n0ck · #1 (**permalink**) 23/11/2011, 04:32

hola a todos,

debido a que section se ha creado para no poner mas div id="#", mi pregunta es la siguiente:

- ¿dentro de un section pueden haber varios section?, tengo una web, en la cual uso un section id="View" como principal, ya que es el contendor de carga, y dentro tengo 3 bloques con un ancho de 350px por ejemplo y cuyo contenido es importante en los tres, entonces seria correcto hacer esto?

<section id="View">
<section ="seidebar-left"></section>
<section ="seidebar-center"></section>
<section ="seidebar-right"></section>
</section>

o debería poner los section de dentro usando otras etiquetas de html5 ó incluso div class?

gracias de antemano

cvander · #2 (**permalink**) 23/11/2011, 07:47

Más que se ha creado para eliminar los DIVs, es una etiqueta semántica que demuestra que hay una "sección" de contenido en tu documento.

Veo que vos quieres usar 3 secciones, una columna a la derecha, contenido al centro y otra con contenido a la izquierda. Alguna de estas tiene que ver con una barra de navegación? Porque podrías usar tranquilamente <nav>.

Y para la otra, si es contenido extra, una barra con enlaces, referencias, etc., también puedes usar <aside>

Importante, en navegadores viejos estas etiquetas no son reconocidas y hay que incluirles en los estilos que son de tipo caja. O bien usar el html5 enable script que se encarga de eso.

Tedel · #3 (**permalink**) 24/11/2011, 13:49

<section> es para poner tu contenido principal, por si acaso.

andres_aquino · #4 (**permalink**) 24/11/2011, 18:19

La etiqueta <section> se ha creado justamente para separa el contenido importante dentro de una web. De acuerdo a lo que entendí según la descripción que has dado, veo que tenés tres bloques que quieres destacar pero solo uno es el más importante, "seidebar-center". Si éste del medio será el que tendrá contenido relevante para tus visitantes, debes dejarlo como <section> y las de los lados ("left" y "right") puedes ponerlos usando <aside> como bien lo dijo @cvander para tener todo bien organizado y con sentido semántico relevante.

Para terminar, quiero dejar algunos ejemplos que podrían serte útiles.

3 columnas: contenido al centro, dos barras laterales

Código HTML:

Ver original<aside class="left">
    <!-- tags, categorías, blog roll, etc. -->
</aside>
<section class="center">
    <h1>Título</h1>
    <p>Contenido del artículo</p>
</section>
<aside class="right">
    <!-- suscripciones rss, twitter, facebook, etc. -->
</aside>

3 columnas: contenido al centro, información del autor, barra lateral

Código HTML:

Ver original<section class="left">
    <!-- información del autor del post -->
</section>
<section class="center">
    <h1>Título</h1>
    <p>Contenido del artículo</p>
</section>
<aside class="right">
    <!-- suscripciones rss, twitter, facebook, etc. -->
</aside>

3 columnas: contenido al centro, navegación segundaria, barra lateral

Código HTML:

Ver original<aside class="left">
    <!-- menú de navegación secundaria -->
</aside>
<section class="center">
    <h1>Título</h1>
    <p>Contenido del artículo</p>
</section>
<aside class="right">
    <!-- suscripciones rss, twitter, facebook, etc. -->
</aside>

También podes leer un poco más del uso semántico de la etiqueta nav aquí:
http://html5doctor.com/nav-element/

Saludos

kokoou · #5 (**permalink**) 25/11/2011, 13:58

andres_aquino, mirando tus ejemplos, en el tercero:

Código:

<aside class="left">
    <!-- menú de navegación secundaria -->
</aside>

Sería:

Código:

<nav class="left">
    <!-- menú de navegación secundaria -->
</nav>

No?

andres_aquino · #6 (**permalink**) 25/11/2011, 14:03

Uh! Cierto, tenés razón @kokoou... por hacer copy&paste de mi propia código me olvidé de reemplazar una

abermejo · #7 (**permalink**) 28/11/2011, 14:35

No es que se hayan eliminado los divs, estos sirven ahora solo para su utilizacion con el css para posicionar bloques etc, en cuanto a cuando vas a maquetar tu pagina, primero debes pensar en las relaciones que tienen cada una de las partes que la van a componer

Junta los contenidos que tienen relacion y contenlas dentro de una seccion que conceptualmente englobe a las que estan dentro, ahora, estos contenidos bien pueden ser otras secciones si es que tienen una relacion mas bien debil, o pueden ser articulos si es que son practicamente parecidos en cuanto a concepto y estructura.

las etiquetas nav y header pueden ser utilizadas tanto en secciones como en articulos

por ejemplo aqui hay varias maneras de organizar un article http://html5doctor.com/the-article-element/

bueno esa es mi opinion segun mi experiencia

haz siempre un analisis de tu contenido y aprovecha las nuevas etiquetas

saludos

Rafael · #8 (**permalink**) 08/12/2011, 03:42

Yo tengo una duda.

Todo esto implica que a fuerzas toooooodo debe de acabar dentro de una de estas etiquetas, ¿no?
Antes se podía tener un <p></p> ahí en medio del documento, pero ahora a fuerzas debe de estar por lo menos en un section. ¿no?

Y otra pregunta. ¿Un article puede estar fuera de un section?

estilocss · #9 (**permalink**) 08/12/2011, 04:13

oye tengo una duda referente a este temaa, queda mejor poner un "id" a la etiquetal section cuando tienes más de unaa?¿

por ejemplo:

Código HTML:

Ver original<section id="tag1">primer seccion</section>
<section id="tag2">segunda seccion</section>
<section id="tag3">tercera seccion</section>

abermejo · #10 (**permalink**) 09/12/2011, 10:10

Cita:

Yo tengo una duda.

Todo esto implica que a fuerzas toooooodo debe de acabar dentro de una de estas etiquetas, ¿no?
Antes se podía tener un <p></p> ahí en medio del documento, pero ahora a fuerzas debe de estar por lo menos en un section. ¿no?

Y otra pregunta. ¿Un article puede estar fuera de un section?

Cualquier etiqueta como la <p> o <article> la puedes colocar donde quieras, si es que ves que es la mejor posición en la que se relaciona con los demás elementos, no existe una estructura fija para todos los contenidos, pero si hay determinados modelos como por ejemplo la estructura de un blog es fácil definiría con las nuevas etiquetas, pero hay otras webs que no tienen porque seguir el mismo patrón y tienes que buscar la mejor forma de organizar los elementos según las definiciones que encuentres de los nuevos elementos. Juega con los conceptos de los elementos de tu pagina creo que es la mejor forma.

Cita:

oye tengo una duda referente a este temaa, queda mejor poner un "id" a la etiquetal section cuando tienes más de unaa?¿

si claro eso si siguiendo como antes, recuerda colocar siempre nombres sobre el papel que desempenan en el documento y no cosas coomo referencias a que estilos tienen.

Tedel · #11 (**permalink**) 12/12/2011, 12:03

mm... Section contiene <article>s, por si acaso.

leonidasesteban · #12 (**permalink**) 12/12/2011, 13:35

Se le dice "insection" tataaaa, es completamente valido si son secciones de contenido, supongo que ya dentro de ellas vendran los articles y divs si son necesarios

andres_aquino · #13 (**permalink**) 15/12/2011, 00:44

Sí. La etiqueta <section> puede contener varios <article> y, a su vez, la etiqueta <article> puede contener varias etiquetas <section> pero todo depende de acuerdo al contexto en el que vayas a utilizar estas etiquetas, por ser de muy especial uso en semántica. Hay documentación (en inglés mucho mejor) sobre el uso que se le puede dar a estas etiquetas y algunos casos en los que se pueden anidar unas y otras. Hablar solamente del uso de una de ellas es para varias líneas, por ello es que resulta muy recomendable revisar fuentes en inglés (mi recomendación) que explican su uso. De haber en español tal vez sea, pero yo apuesto por buscarlos directamente en inglés.

ryugen · #14 (**permalink**) 15/12/2011, 10:26

Este documento me parece que lo resume de manera correcta a mi entender:
http://oli.jp/2009/html5-structure1/

andres_aquino · #15 (**permalink**) 15/12/2011, 15:09

Este documento lo resume bastante bien, @ryugen. Ahí queda claro un buen ejemplo de uso de las etiquetas <article> y <section> y las posibilidades de poder anidar unas dentro otras. Creo que quedará bien para quienes estén buscando información clara y concisa sobre el uso e implementación de estas etiquetas.

mariomon17 · #16 (**permalink**) 17/12/2011, 21:50

Osea que dentro de <section> puede ir <article>'s o <sectionn>'s, pero dentro de <article> solo pueden ir <section>'s no <article>'s ?

andres_aquino · #17 (**permalink**) 19/12/2011, 19:09

@mariomon17, te respondo de forma mucho más práctica. Los blogs son un ejemplo bien popular para hacerte entender un poco mejor el uso de estas etiquetas semánticas. Espero poder despejar dudas con el siguiente ejemplo.

1) Uso de <section> como contenedor principal:
En la portada de los blogs, siempre se tiene un listado de los artículos que ahí se postean. Entonces, para hacer uso de semántica harías algo como esto:

Código HTML:

Ver original<section id="articulos">
  <article class="post">
    <h1>Título Post 1</h1>
    <p>Contenido Post 1</p>
  </article>
  <article class="post">
    <h1>Título Post 2</h1>
    <p>Contenido Post 2</p>
  </article>
  <article class="post">
    <h1>Título Post N</h1>
    <p>Contenido Post N</p>
  </article>
</section>

2) Uso de <article> como contenedor principal:
Ahora bien, con <article> se puede diferentes secciones de un post en particular así como en <section> se tiene listado todos los posts del blog.

Código HTML:

Ver original<article id="articulo">
  <section id="introduccion">
    <h1>Título Post N</h1>
    <p>Texto introductorio al Post N, utilizado también para dar una breve reseña en los feeds RSS.</p>
  </section>
  <section id="contenido">
    <p>Contenido del Post N</p>
  </section>
  <section id="autor">
    <h1>Nombre del Autor</h1>
    <p>Descripción del Autor</p>
    <p>Formalidades del Copyright/Copyleft.</p>
  </section>
</article>

En fin, esto es un ejemplo a modo de respuesta y claro ejemplo (valga la redundancia) para que pueda esclarecerse algunas cosas. Lo más recomendable, obviamente, es leer documentación no solo acerca del uso de cada etiqueta, sino acerca del significado semántico que cada etiqueta tiene al hacer uso de ellas en diferentes bloques de información dentro de una web. Hay buena documentación allá afuera en el mar de la W3C y otros cientos de blogs, tanto en inglés como en español.

Espero y haya servido mi pequeñita introducción/documentación

Saludos

leonidasesteban · #18 (**permalink**) 21/12/2011, 04:06

No. No se puede poner mas contenido semantico despues de un article, es totalmente falso no se debe poner section dentro de un article

ryugen · #19 (**permalink**) 21/12/2011, 05:06

Cita:

Iniciado por leonidasesteban

No. No se puede poner mas contenido semantico despues de un article, es totalmente falso no se debe poner section dentro de un article

Esa es tu opinión. Si se puede, las secciones pueden ser subsecciones de un articulo, o cápitulos de un articulos.

en el documento que puse anteriormente dan un ejemplo:

http://oli.jp/2009/html5-structure1/...le-subsections

andres_aquino · #20 (**permalink**) 21/12/2011, 15:20

Cita:

Iniciado por leonidasesteban

No. No se puede poner mas contenido semantico despues de un article, es totalmente falso no se debe poner section dentro de un article

Tal vez deberías documentarte un poco mejor, @leonidasesteban. En la documentación misma de la W3C muestra un claro ejemplo que ya expuse anteriormente, está en http://www.w3.org/TR/html5/sections....ection-element

cvander · #21 (**permalink**) 21/12/2011, 18:49

Así es Leonidas, cuando vez la documentación te das cuenta que hay más cosas allá del article.

Pero en la práctica, no se que tanto llegarías a implementarlo.

Tal vez si estás construyendo un documento universitario, un paper y necesitas que tenga la estructura semántica al 100% usarías una subclasificación dentro del article. Pero luego, retomando el mundo actual, donde los posts y contenidos se hacen en un CMS, la parte del artículo, del post del blog, etc... va a terminar en el <article> simplemente y allí se recogerá el texto que envíe el autor, tal vez formateandolo con espacios, parrafos, algo de formato, pero poco más. Enseñarles esa semántica para que se pongan a crear sections, etc. lo veo poco probable.