¿Es correo usar id y class en las etiquetas section, article,etc?

[jefridev]

Es que estoy ingresando al html5, sin embargo veo que la mayoría de la gente usa estas etiquetas sin ningún tipo de id , porque si es el caso sería como usar un div, estoy confundido, es correcto o incorrecto, necesito saberlo. Quiero usarlos porque no estoy seguro ya que a través de eso es que les doy estilo y la posición entre otras cosas, no estoy seguro si es una mala práctica, gracias de antemano.

[emprear]

Es perfectamente correcto, el echo de que esas etiquetas tengan un caracter semántico más específico, no significa que no puedas usarlas para generar estructura en tu documento. Por supuesto, su correcto uso estará sujeto al contenido de tu página.

Saludos

[jefridev]

Iniciado por emprear

Es perfectamente correcto, el echo de que esas etiquetas tengan un caracter semántico más específico, no significa que no puedas usarlas para generar estructura en tu documento. Por supuesto, su correcto uso estará sujeto al contenido de tu página.

Saludos

Muchas gracias por tu aclaración de verdad la necesitaba. Feliz navidad bendiciones para ti y tu familia.

[dual3nigma]

Es una muy mala práctica usar ids para dar estilos, para eso están las diferentes etiquetas y todas las combinaciones de selectores CSS que puedes utilizar. ¿Por que no nos muestras un fragmento de tu código para que te podamos orientar mejor?

Saludos!

[emprear]

Código HTML:

<header onclick="funcionx();">secion uno</header>
<section id="seccion_uno">
<article class="nota">mmmm</article>
<article>mmmm</article>
</section>
<header>secion dos</header>
<section id="seccion_dos">
<article class="nota">mmmm</article>
<article>mmmm</article>
</section>
 

Código CSS:

#seccion_uno .nota{
color: red;
}
 
#seccion_dos .nota{
color: blue;
}
 

Código Javascript:

<script type="text/javascript">
function funcionx()
  {
  var x=document.getElementById("seccion_uno");
  x.style.display= "none";
  }
</script>
 

Es completamente válido y correcto de usar, no sé a que te referís con lo "mala práctica".
Acaso si se pueden evitar el uso de id en favor de class, puede ser. Pero creo que el sentido de la pregunta de @jefridev no es ese, sino simplemente de estilizar via css los tags mencionados

Saludos

[carlos_belisario]

Iniciado por emprear

[HIGHLIGHT="HTML"]
Es completamente válido y correcto de usar, no sé a que te referís con lo "mala práctica".
Acaso si se pueden evitar el uso de id en favor de class, puede ser.
Pero creo que el sentido de la pregunta de @jefridev no es ese, sino simplemente de estilizar via css los tags mencionados

Saludos

la misma pregunta traia, porque mala practica??, he visto alguna que otras hojas de estilo de maquetadores profesionales (o eso dicen XD) y sienpre tienen sus "#" (id), entonces seria bueno que de manera informativa (instructiva en mi caso) nos indiques el porque es una mala practica, saludos

[emprear]

Iniciado por carlos_belisario

entonces seria bueno que de manera informativa (instructiva en mi caso) nos indiques el porque es una mala practica, saludos

Quizás estuvo leyendo este artículo
http://www.stubbornella.org/content/...re-killing-us/

a mi juicio, un verdadero desaguisado, menos mal que hay 2 o 3 comentarios al pie que le ponen un poco mas de cordura a los apuntes de la autora.
A ver....
si una de sus indicaciones es
Sites need to look exactly the same in every browser (ni traduccción le hace falta), chocolate por la noticia, una verdad de perogrullo, el tema es como hacerlo.

y por ahi, para sus devaneos pone como ejemplo

Código CSS:

#sidebar #accounts #accountDetails h3{}
 

cuando con
#accountDetails h3{}
bastaría. Por supuesto, si arranca con eso, justifica todas sus apreciaciones sobre el uso diabólico de lo ID...

En fin, como decían en LNR, "un aporte más a la confusión general"

Saludos

[dual3nigma]

Wow pero que demonios!!!! Para empezar tu código es "semánticamente incorrecto" y contradictorio. Si es una nota por que es habrías de utilizar un article :S jajaja

Mira deberías de tener algo asi:

Código HTML:

<section>
    <h1 />
    
    <article />
    <article />
</section>
 

Por otro lado, wtf por que querrias hacer click en el header jaja, nome imagino que clase de sitio es ese, no quisiera entrar.

Ahora respecto al css más bien sería algo asi:

Código CSS:

section:nth-of-type(1) article:first-of-type {
    color: red;
}
 
section:nth-of-type(2) article:first-of-type {
    color: blue;
}
 

Es más limpio, más claro. Es una buena práctica.

y en javascript lo mismo

Código Javascript:

document.querySelector('section:nth-of-type(1)').style.display = 'none'
 

Aunque más bien quieres usar un framework:

Código Javascript:

jQuery('section').first().hide()
 

Se que va a salir por ahi el que diga que por id es más rapido, pero ya no vivimos en 1990 y querySelector es casi igual, no es que hay una diferencia gigante entre los dos, cada vez menos. Lo que si es que como decia las malas practicas son las que lo arruinan todo, fijate que pesimo eso que haces en tu codigo javascript, en tu "funcionx" estas haciendo un getElementById en vez de tener algo asi:

Código Javascript:

(function () {
    var x = document.querySelector('section:nth-of-type(1)');
    
    function funcionx() {
        x.style.display = 'none';
    }
}());
 

Asi que cuidado!!!

Saludos.

[jefridev]

Me gustó la explicación @emprear , puedo hacer lo siguiente supongo:

Código HTML:

<header class="cprincipal">
    <h1>Inicio de encabezado.</h1>
</header>

 <nav class="nprincipal">
           <ul>
               <li>Home</li>
               <li>Otro</li>
          </ul>
 </nav>

<section id="contenedor">

       <section class="slideshow">
             <article>Galeria</article>
       </section>
       
        <section class="articulos">
              <article class="temas">
                  <p>Probando el sistema.</p>
             </article>
       </section>

       <footer>
             &copy;Copyright amenazado de por vida :)  
      </footer>

</section> 

más o menos algo así quería hacer, considero que es válido.

[carlos_belisario]

aunque no soy un experto en el tema ni mucho menos en cierta parte tiene razón pero llego otra vez al tema que depende de las mañas del maquetador (en estos dias he hablado mucho de malas mañas de desarrolladores XD), vamos no soy un maquetador profesional ni nada por el estilo y puede que este equivocado pero cuando varias secciones van a ser totalmente igual no se usa entonces una class "."?? en vez de agregar ese poco de id?? eso no lo sabe ya las personas que se llaman maquetador?? lo que me confundió de la respuesta del amigo es que hablo de mala practica de dar estilo con id y creo que hay muchos que utilizan esto para dar estilo a las partes principales (ojo no soy experto y pido que me corrijan si estoy equivocado).

Un poco offtopic la verdad la amiga siempre crea este tipo de polémica con sus presentaciones, si mal no recuerdo ella también hablo de CSS orientado a objetos.

saludos

[emprear]

@dualenigma:
Wow pero que demonios!!!! Para empezar tu código es "semánticamente incorrecto" y contradictorio. Si es una nota por que es habrías de utilizar un article :S jajaja

Basas toda tu explicación en que yo usé por nombre del class el término nota, la podría haber llamado cucaracha que hubiese sido lo mismo, querés que le ponga artículo?, bueno, le ponemos articulo. Ese "nota" no tiene más propósito que identificar la "class", y vincularlo a la estructura que puse tan solo como ejemplo no tiene ningún sentido.

Es como si yo dijese que es un disparate porque cerras un h1 si haberlo abierto, obviamente considero que es un descuido simplemente.

Y a todo esto le sumas el uso de jquery?
y de propiedades que habria que aclarar IE8 no soporta (si, yo diseño para IE8)

En fin, que el usuario que realizó la pregunta original, decida.

Y en cuanto a tu jajaja, dice mucho más que eso.

[emprear]

Iniciado por jefridev

Me gustó la explicación @emprear , puedo hacer lo siguiente supongo:

Código HTML:

<header class="cprincipal">
    <h1>Inicio de encabezado.</h1>
</header>

 <nav class="nprincipal">
           <ul>
               <li>Home</li>
               <li>Otro</li>
          </ul>
 </nav>

<section id="contenedor">

       <section class="slideshow">
             <article>Galeria</article>
       </section>
       
        <section class="articulos">
              <article class="temas">
                  <p>Probando el sistema.</p>
             </article>
       </section>

       <footer>
             &copy;Copyright amenazado de por vida :)  
      </footer>

</section> 

más o menos algo así quería hacer, considero que es válido.

@jefridev

Yo solo te di un ejemplo muy puntual del uso de id, ahora si es correcto o no lo que querés hacer, depende mucho del contenido de tu web. Tomando tu código suena lógico que un section tenga dentro article, y que haya a su vez varias sections con varios article cada una, ahora no me suena tan lógico, que pongas tus section anidadas en otro section tan solo para usarla como contenedor,yo usaría un div en su lugar.

y en cuanto al css si usases
.articulos article
te ahorrarías el class="temas"

Saludos

[dual3nigma]

Si, soy un poco burlón, pero eso no tiene nada que ver, no es con mala intención.

Estas propiedades las puedes usar desde IE6 con librerías como http://selectivizr.com/

Ahora como que cerrar un h1 sin haberlo abierto, es un ejemplo de estructura sin contenidos, obvio.

Y no, no hubiese dado lo mismo, la estructura de tu pagina, así como los estilos y funcionalidad están muy ligados al contenido. Todo debe girar en torno al contenido, por eso mis elementos vacíos.

Y esa es la razón por la que le pregunte al autor un ejemplo de su código, por que solo viendo la clase de contenido que tiene y su estructura actual así como su diseño es que se le puede recomendar una solución mejor.

[emprear]

Si yo te entiendo, mas o menos.
Justamente como el usuario no había puesto un ejemplo concreto, yo hice algo genérico a modo de explicación.
Y a vos te parece apropiado tener que cargar una librería, para ahorrarte el uso de un id?

Caminamos por distintos rumbos parece,

Y yo no soy burlón

[dual3nigma]

Parece que no estas poniendo atención ni entendiendo/o leyendo bien. Te dije que había que evaluar la situación, obviamente tratandose de 1 solo id sin el cual no pudieras vivir, pues no vas a cargar una librería, pero creeme que en un proyecto grande necesitaras una forma de darle lógica a tu código, tanto html, como css ;)

Por eso es que existen los nuevos selectores CSS3, si fuera mejor con ids simplemente no existirían y no habría la necesidad de estas librerías para hacerlos funcionar en IE, así que tal vez estas en el foro equivocado, ya que aquí hablamos de HTML5, estas nuevas etiquetas semánticas y selectores nuevos son para eso para que tu código tenga mas lógica, sea mas fácil de mantener, etc.

Yo quiero pensar que el autor esta interesado en ver que de nuevo hay en HTML5 y CSS3, las mejores practicas y como aprovecharlas, tu le estas diciendo: no uses CSS3, sigue usando ids, tal como siempre ha sido. Y yo le digo: algo mejor me parece aprovechar los nuevos selectores y las etiquetas semánticas, es bueno acostumbrarse a ellos y aunque sea un proyecto pequeño empezar a jugar con estas librerías y que creeme, no te van a complicar la vida, te la van a facilitar, y al rato que tengas un sitio grande habrás aprendido varios trucos en el camino.

[emprear]

Ahora estoy en el foro equivocado?
Si tan equivocado como vos, que etás hablando de Javascript y CSS3 como si fueran excluyentes de HTML5
Si tus argumentos son esos, voy a cuidarme, y mucho, de tus futuros posts

[dual3nigma]

A ver emprear no me mal interpretes, era un decir, me caliento un poco en los debates, pero por favor no lo tomes a mal.

En conclusión yo creo que por usar ids no te va a caer un rayo, pero creo que si quieres aprovechar HTML5 y CSS3 debes de hacerlo con clases, las etiquetas que apliquen y selectores CSS3 de otro modo no veo razón para usar HTML5. Son dos formas de hacerlo y es mi punto de vista solamente.

No te enojes emprear y espero que no te cuides de mis temas :)

Saludos.

[memoadian]

mala practica dar un estilo con un id?

eso depende de la perspectiva del maquetador, hasta ahora solo a ti te he leido decirlo, no hay ninguna referencia a esto que dices.

de hecho HTML5 no excluye el uso de divs y la semantica xhtml por lo que definir mala o buena práctica es hasta cierto punto incongruente si se enfoca a la personalidad y prácticas del maquetador.

[kseso?]

¿Demonizando el uso de id´s?
¿Llegó la nueva moda anglosajona parlanchina a los hablantes del español?
Dejando aparte otras cuestiones, la diferencia entre un tag bautizado con un identificador único o una clase es el número de veces que va a aparecer en el documento*.

Así, que si malo es el uso (correcto, sin abusos y otras malas prácticas) de id´s por definición, peor será utilizar clases. A todos los "males" del id se añade que encima se repiten un montón.


* Necesidad de identificarlo en el dom, ser usado como destino de un enlace (interno o externo al documento donde está...)

[dual3nigma]

Hola kseso?

A que te refieres con "la nueva moda anglosajona parlanchina".

Para los que dicen que no hay ninguna referencia a lo que digo, les recomiendo estas lecturas: http://oli.jp/2011/ids/
http://screwlewse.com/2010/07/dont-u...ectors-in-css/

y también que pasen su css por http://csslint.net/ a ver que me cuentan.

Una aclaración es que no voy a decir que nunca deben de usar un id, pero el utilizar clases precisamente promueve la reutilizacion del código, algo que los ids no. Los abusos son malos como bien lo menciona kseso, yo creo que es mejor utilizar clases y selectores css, mantiene mas limpio tu html, y le da mas lógica a tu css. Y lo repito nada esta prohibido, pero yo les recomiendo que si quieren estimular un poco mas la reutilizacion de código en ustedes mismos usen clases y selectores css cuando sea necesario.


Saludos!

[dual3nigma]

Ah y les comento una parte que me encanto de el articulo:

Dar estilo con IDs y clases son las primeras cosas que aprendemos cuando estudiamos CSS, asi que puede resultar extraño el que nos digan "No uses IDs en selectores CSS". Sin embargo nuestra industria esta siempre en movimiendo. Y ocasionalmente debemos reevaluar lo que si funciona y lo que no, en lugar de conformarnos con lo que hemos usado siempre. Estamos pasando por un renacimiento con HTML5, CSS3, una increible velociad de Javascript, asi que es tiempo de empezar a hacerlo.

Este es un foro de HTML5 así que creo que seria bueno abrirnos a otras formas de hacer las cosas tomando ventaja de estas nuevas tecnologías, en lugar de como dice el articulo conformarnos con lo que siempre hemos tenido.

Por ultimo les recomiendo esta lectura muy interesante: http://germanforblack.com/articles/s...bute-selectors acerca de otra sugerencias sobre el tema.

Saludos!!!!!

[emprear]

Iniciado por dual3nigma

Ah y les comento una parte que me encanto de el articulo:

... Estamos pasando por un renacimiento con HTML5, CSS3, una increible velocidad de Javascript, asi que es tiempo de empezar a hacerlo.

Este es un foro de HTML5 así que creo que seria bueno abrirnos a otras formas de hacer las cosas tomando ventaja de estas nuevas tecnologías, en lugar de como dice el articulo conformarnos con lo que siempre hemos tenido.

Que querés que te diga, yo cada vez entiendo menos a que apuntás. por un lado, lo anteriormente citado, por el otro, te despachás con un post titulado
Por que HTML5 no es el presente ( http://www.forosdelweb.com/f175/por-...esente-959209/ ) en el cual entre otras cosas decís

Como desarrollador que últimamente se ha enfocado casi 100% a HTML5 creo que es un decir que HTML5 es el presente

¿en qué quedamos, es el presente o no lo és?

Después hacés una corrección y como por arte de magia el título del post pasa a llamarse "Por qué html5 no es el futuro"
¿Será el limbo entonces?

Más adelante soltás un

Hola!!! Bueno ya me convencieron de usar HTML5, jajaja no es cierto. Aun no me convencen.... ;)

y un

En conclusion, la web esta fracmentada, HTML5 se puede utilizar por partes, los estándares no importan, jajaja otra frase que seguro causara polémica

que, digamos de paso, mucha polémica no me genera, "los estándares" hay que respetarlos, o intentarlo al menos.

Todo muy confuso a mi juicio, pero vaya a saber, como casi todo lo adornás con un jajajaja, no se sabe si lo decís en serio o no.
En una de esas, y teniendo en cuenta tu espíritu burlón, que opportunamente reconociste, este 28 de diciembre nos sorprendés con un "Que la inocencia les valga", con lo cual todo adquiriría la debida coherencia.

[ZoroRoronoa]

WtF, los comentarios burlones de este tipo, no me hara cambian mi manera de maquetar, usar ID`s y seguir pensando en HTML 5.

Quizá y con mis "malas practicas" logré mejores resultados

[McPinkY18]

el es un trol del youtube, sus cuentas son zikozis calacx valacx y tambien pueden entrar a mi perfil "youtube.com/iadrian20" para que vean como se la pasa insultandome

[kseso?]

Iniciado por dual3nigma

Hola kseso?

A que te refieres con "la nueva moda anglosajona parlanchina".

Los abusos son malos como bien lo menciona kseso, yo creo que es mejor utilizar clases y selectores css, mantiene mas limpio tu html, y le da mas lógica a tu css. Y lo repito nada esta prohibido, pero yo les recomiendo que si quieren estimular un poco mas la reutilizacion de código en ustedes mismos usen clases y selectores css cuando sea necesario.
Saludos!

Vale. Ahora entiendo todo.
¿Qué es un identificador único? Acaso ¿no es un selector con la única diferencia de que en el html no debería aparecer más que una vez?*

Legados a este punto y tras la recopilación de emprear ya me arrepiento de haber participado en el tema.
Así que safo.

@McPinkY18
Sería tan amable de documentar un mínimo su afirmación.

* sin entrar en la grafía para diferenciarlos (en el css)

[ryugen]

Les dejo otra gran lectura sobre el tema ID vs Clases
http://oli.jp/2011/ids/