Diferencias entre <section> y <article>

lgga · #1 (**permalink**) 08/10/2011, 16:07

Viendo bastantes tutoriales de html5 que hay desde el 2010, veo que en algunos se habla de <section> y en otros <article>, no he podido encontrar la diferencia entre estos, al parecer hacen lo mismo o me equivoco?

Bueno aprovecho para comentar este pequeño problema.

Código HTML:

Ver original<section id="intro">  
 
        <section id="bloque">
            <h1 >BIENVENIDO </h1>
<p>Ipsum lorem...............</p>
        <img src="images/welcome.png">
 
        </section>
           
</section>

La imagen parece que quedara "afuera" tanto de bloque como de intro, ya que tanto bloque como intro no se ajustan a la altura de la imagen, entonces por ejemplo, el texto abre intro en altura digamos que de 100px, pero la altura de la imagen es de 300px.

Artificium · #2 (**permalink**) 08/10/2011, 19:11

Bueno, creo que su mismo nombre lo dice: section sirve para definir secciones, por ejemplo defino mi sección "artículos" y mi sección: "mis favoritos", etc. y cada una de las secciones tienen estructuras distintas, en cambio articles son una lista de artículos (en el caso de que se use para un blog) y tienen cada uno una misma estructura, yo mas bien no noto lo similar.

emprear · #3 (**permalink**) 09/10/2011, 11:48

@lgga

Las diferencias entre <section> y <article> en html5, son estrictamente semánticas

Cita:

Semantica (Drae)
adj. Perteneciente o relativo a la significación de las palabras.

y tienen distinta relevancia, si lo ves por el lado del html, es lógico que una lista contenga una lista de elementos o items, por eso vos usas

Código HTML:

Ver original<ul>
<li>a</li>
<li>b</li>
</ul>

en html5, lo lógico es que tus sections contengan article, o quizás tambien otras sections (llamémolas sub secciones) que a su vez contendrán articles, ejemplos

Para el primero

Código HTML:

Ver original<section>
    <h1>Comentarios</h1>
    <article>
    Comentario uno
    </article>
    <article>
    Comentario dos
    </article>
    <article>
    Comentario tres
    </article>
</section>

Para el segundo (un poco más rebuscado si se quiere, dudo mucho que algna vez implemente algo así)

Código HTML:

Ver original<section>
<h1>Introducción</h1>
<section>
    <h2>Objetivos de este documento</h2>
    <article>
    el primer objetivo es...
    </article>
    <article>
    el segundo objetivo es...
    </article>
</section>
 
<section>
    <h2>Colaboradores en el desarrollo del documento</h2>
    <article>
    Dr. C. González.... + datos de este especialista
    </article>
    <article>
    Dr. R. Rodriguez.... + datos de este especialista
    </article>
</section>
</section>

Volviendo a tu código, basicamnete adolesce de un error, en ningún lugar usas <article>, asi que no se puede juzgar el comportamiento. De todas maneras según lo que planteás, apuntas a lo esctructural, y desde ese punto de vista la imagen aparece excatamente dónde debe de aparecer. Aunque, y volviendo a la semantica, es algo redundante (al menos sin ver tu css), tu section intro (o bloque para el caso), es algo redundante. podría quedar como

Código HTML:

Ver original<section id="bloque">
<h1>BIENVENIDO </h1>
<p>Ipsum lorem...............</p>
<img src="images/welcome.png">
</section>

Te dejo un código con css incluido para que veas algunas variantes:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
body {
font-size: 1em;
}
section h1 {
background-color: #FFF;
font-size: 1.3em;
}
section h2 {
background-color: #FFF;
font-size: 1.1em;
}
section {
background-color: green;
}
article {
background-color: red;
}
#intro {
padding: 10px;
background-color: yellow;
}
#bloque {
border: solid 1px #000;
}
#bloque2, .bloque2{
border: solid 1px #000;
padding: 10px;
background-color: yellow;
}
figure.dos {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<section id="intro">  
 
    <section id="bloque">
    <h1>BIENVENIDO </h1>
    <p>Ipsum lorem...............</p>
    <img src="tooltip.jpg" alt="">
</section>
           
</section>
 
<section id="bloque2">
    <h1>BIENVENIDO </h1>
    <p>Ipsum lorem...............</p>
    <img src="tooltip.jpg" alt="">
</section>
 
<section class="bloque2">
    <h1>Artículos </h1>
    <article>Ipsum lorem...............
    <figure>
    <img src="tooltip.jpg" alt="">
    </figure>
    </article>
 
    <article>Ipsum lorem..2.............
    <figure class="dos">
    <img src="tooltip.jpg" alt="">
    </figure>
    </article>
 
</section>
 
<a href="#">
    <div>
    div en a
    </div>
</a>
 
 
<article>
    <section>
    Una section dentro de un article
    </section>
</article>
 
<section>
    <h1>Comentarios</h1>
    <article>
    Comentario uno
    </article>
    <article>
    Comentario dos
    </article>
    <article>
    Comentario tres
    </article>
</section>
 
<section>
<h1>Introducción</h1>
<section>
    <h2>Objetivos de este documento</h2>
    <article>
    el primer objetivo es...
    </article>
    <article>
    el segundo objetivo es...
    </article>
</section>
 
<section>
    <h2>Colaboradores en el desarrollo del documento</h2>
    <article>
    Dr. C. González.... + datos de este especialista
    </article>
    <article>
    Dr. R. Rodriguez.... + datos de este especialista
    </article>
</section>
</section>  
 
</body>
</html>

Para terminar un comentario adicional, por ahi vas a ver en mi código lo siguiente:

Código HTML:

Ver original<a href="#">
    <div>
    div en a
    </div>
</a>

Esto es completamenteválido (por ahora al menos...) en html5.
Sin embargo, si uso xhtml

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<a href="#">
<div>
div en a
</div>
</a>
</body>
</html>

El validador me va a mostrar un error. la diferencia?, bien, en xhtml teníamos que considerar teníamos que considerar si un elemento de del tipo block ó inline al anidar etiquetas, y un elemento block como el <div> no púede insertarse en un elemento inline como <a>, html5, hace caso omiso de eso y tiene en cuenta otra característica, si el contenido de un elemento es del tipo "Flow content" ó "Phrasing content", cosa que aún ni yo tengo muy clara aún.

Saludos

lgga · #4 (**permalink**) 09/10/2011, 22:00

Gracias amigos por sus respuestas.

Excelente aporte @emprear!!!!

DvD AdN · #5 (**permalink**) 28/10/2011, 05:17

Info a detalle

http://dev.w3.org/html5/spec/Overvie...rticle-element

:P

Saludos