Foros del Web » Creando para Internet » HTML »

etiqueta section

Estas en el tema de etiqueta section en el foro de HTML en Foros del Web. hola a todos, debido a que section se ha creado para no poner mas div id="#", mi pregunta es la siguiente: - ¿dentro de un ...
  #1 (permalink)  
Antiguo 23/11/2011, 03:32
 
Fecha de Ingreso: octubre-2006
Mensajes: 137
Antigüedad: 12 años, 9 meses
Puntos: 2
etiqueta section

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
  #2 (permalink)  
Antiguo 23/11/2011, 06:47
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.634
Antigüedad: 18 años, 3 meses
Puntos: 1790
Respuesta: etiqueta section

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.
__________________
- Christian Van Der Henst
Platzi
  #3 (permalink)  
Antiguo 24/11/2011, 12:49
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 8 años, 6 meses
Puntos: 444
Respuesta: etiqueta section

<section> es para poner tu contenido principal, por si acaso.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #4 (permalink)  
Antiguo 24/11/2011, 17:19
Avatar de andres_aquino  
Fecha de Ingreso: septiembre-2010
Ubicación: $("#place").html("FDW");
Mensajes: 138
Antigüedad: 8 años, 10 meses
Puntos: 24
Información Respuesta: etiqueta section

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
  1. <aside class="left">
  2.     <!-- tags, categorías, blog roll, etc. -->
  3. <section class="center">
  4.     <h1>Título</h1>
  5.     <p>Contenido del artículo</p>
  6. <aside class="right">
  7.     <!-- suscripciones rss, twitter, facebook, etc. -->

3 columnas: contenido al centro, información del autor, barra lateral
Código HTML:
Ver original
  1. <section class="left">
  2.     <!-- información del autor del post -->
  3. <section class="center">
  4.     <h1>Título</h1>
  5.     <p>Contenido del artículo</p>
  6. <aside class="right">
  7.     <!-- suscripciones rss, twitter, facebook, etc. -->

3 columnas: contenido al centro, navegación segundaria, barra lateral
Código HTML:
Ver original
  1. <aside class="left">
  2.     <!-- menú de navegación secundaria -->
  3. <section class="center">
  4.     <h1>Título</h1>
  5.     <p>Contenido del artículo</p>
  6. <aside class="right">
  7.     <!-- suscripciones rss, twitter, facebook, etc. -->

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

Saludos
__________________
Te sirvió mi ayuda? +1 ;D
Andy Aquino - @aquiandres
  #5 (permalink)  
Antiguo 25/11/2011, 12:58
 
Fecha de Ingreso: enero-2008
Ubicación: Buenos Aires
Mensajes: 305
Antigüedad: 11 años, 6 meses
Puntos: 14
Respuesta: etiqueta section

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?
  #6 (permalink)  
Antiguo 25/11/2011, 13:03
Avatar de andres_aquino  
Fecha de Ingreso: septiembre-2010
Ubicación: $("#place").html("FDW");
Mensajes: 138
Antigüedad: 8 años, 10 meses
Puntos: 24
Respuesta: etiqueta section

Uh! Cierto, tenés razón @kokoou... por hacer copy&paste de mi propia código me olvidé de reemplazar una
__________________
Te sirvió mi ayuda? +1 ;D
Andy Aquino - @aquiandres
  #7 (permalink)  
Antiguo 28/11/2011, 13:35
Avatar de abermejo  
Fecha de Ingreso: julio-2011
Mensajes: 20
Antigüedad: 8 años
Puntos: 6
Respuesta: etiqueta section

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
  #8 (permalink)  
Antiguo 08/12/2011, 02:42
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.022
Antigüedad: 16 años, 4 meses
Puntos: 1819
Respuesta: etiqueta section

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?
  #9 (permalink)  
Antiguo 08/12/2011, 03:13
 
Fecha de Ingreso: agosto-2010
Mensajes: 45
Antigüedad: 8 años, 11 meses
Puntos: 3
Respuesta: etiqueta section

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
  1. <section id="tag1">primer seccion</section>
  2. <section id="tag2">segunda seccion</section>
  3. <section id="tag3">tercera seccion</section>
  #10 (permalink)  
Antiguo 09/12/2011, 09:10
Avatar de abermejo  
Fecha de Ingreso: julio-2011
Mensajes: 20
Antigüedad: 8 años
Puntos: 6
Respuesta: etiqueta section

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.
  #11 (permalink)  
Antiguo 12/12/2011, 11:03
Avatar de Tedel  
Fecha de Ingreso: enero-2011
Ubicación: Lima
Mensajes: 2.744
Antigüedad: 8 años, 6 meses
Puntos: 444
Respuesta: etiqueta section

mm... Section contiene <article>s, por si acaso.
__________________
Soy el autor de Heptagrama y tengo un servicio "todo incluido" de marketing web.
  #12 (permalink)  
Antiguo 12/12/2011, 12:35
 
Fecha de Ingreso: septiembre-2011
Ubicación: Tacna Peru
Mensajes: 14
Antigüedad: 7 años, 10 meses
Puntos: 4
si puedes

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
  #13 (permalink)  
Antiguo 14/12/2011, 23:44
Avatar de andres_aquino  
Fecha de Ingreso: septiembre-2010
Ubicación: $("#place").html("FDW");
Mensajes: 138
Antigüedad: 8 años, 10 meses
Puntos: 24
Respuesta: etiqueta section

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.
__________________
Te sirvió mi ayuda? +1 ;D
Andy Aquino - @aquiandres
  #14 (permalink)  
Antiguo 15/12/2011, 09:26
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 10 años, 10 meses
Puntos: 187
Respuesta: etiqueta section

Este documento me parece que lo resume de manera correcta a mi entender:
http://oli.jp/2009/html5-structure1/
  #15 (permalink)  
Antiguo 15/12/2011, 14:09
Avatar de andres_aquino  
Fecha de Ingreso: septiembre-2010
Ubicación: $("#place").html("FDW");
Mensajes: 138
Antigüedad: 8 años, 10 meses
Puntos: 24
Respuesta: etiqueta section

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.
__________________
Te sirvió mi ayuda? +1 ;D
Andy Aquino - @aquiandres
  #16 (permalink)  
Antiguo 17/12/2011, 20:50
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 9 años, 8 meses
Puntos: 34
Respuesta: etiqueta section

Osea que dentro de <section> puede ir <article>'s o <sectionn>'s, pero dentro de <article> solo pueden ir <section>'s no <article>'s ?
  #17 (permalink)  
Antiguo 19/12/2011, 18:09
Avatar de andres_aquino  
Fecha de Ingreso: septiembre-2010
Ubicación: $("#place").html("FDW");
Mensajes: 138
Antigüedad: 8 años, 10 meses
Puntos: 24
Información Respuesta: etiqueta section

@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
  1. <section id="articulos">
  2.   <article class="post">
  3.     <h1>Título Post 1</h1>
  4.     <p>Contenido Post 1</p>
  5.   </article>
  6.   <article class="post">
  7.     <h1>Título Post 2</h1>
  8.     <p>Contenido Post 2</p>
  9.   </article>
  10.   <article class="post">
  11.     <h1>Título Post N</h1>
  12.     <p>Contenido Post N</p>
  13.   </article>


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
  1. <article id="articulo">
  2.   <section id="introduccion">
  3.     <h1>Título Post N</h1>
  4.     <p>Texto introductorio al Post N, utilizado también para dar una breve reseña en los feeds RSS.</p>
  5.   </section>
  6.   <section id="contenido">
  7.     <p>Contenido del Post N</p>
  8.   </section>
  9.   <section id="autor">
  10.     <h1>Nombre del Autor</h1>
  11.     <p>Descripción del Autor</p>
  12.     <p>Formalidades del Copyright/Copyleft.</p>
  13.   </section>


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
__________________
Te sirvió mi ayuda? +1 ;D
Andy Aquino - @aquiandres
  #18 (permalink)  
Antiguo 21/12/2011, 03:06
 
Fecha de Ingreso: septiembre-2011
Ubicación: Tacna Peru
Mensajes: 14
Antigüedad: 7 años, 10 meses
Puntos: 4
No. No se puede poner mas contenido semantico despues de un article, es totalmente falso no se debe poner section dentro de un article
  #19 (permalink)  
Antiguo 21/12/2011, 04:06
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 10 años, 10 meses
Puntos: 187
Respuesta: etiqueta section

Cita:
Iniciado por leonidasesteban Ver Mensaje
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
  #20 (permalink)  
Antiguo 21/12/2011, 14:20
Avatar de andres_aquino  
Fecha de Ingreso: septiembre-2010
Ubicación: $("#place").html("FDW");
Mensajes: 138
Antigüedad: 8 años, 10 meses
Puntos: 24
Información Respuesta: etiqueta section

Cita:
Iniciado por leonidasesteban Ver Mensaje
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
__________________
Te sirvió mi ayuda? +1 ;D
Andy Aquino - @aquiandres
  #21 (permalink)  
Antiguo 21/12/2011, 17:49
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.634
Antigüedad: 18 años, 3 meses
Puntos: 1790
Respuesta: etiqueta section

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.
__________________
- Christian Van Der Henst
Platzi

Etiquetas: etiqueta, section
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 16:47.