La diferencia de usar div, article y section con HTML5

HTML5 sabemos que trae un montón de cosas muy novedosas en cuanto al desarrollo de sitios web, sin embargo trae consigo mover algunas costumbres que ya pronto serán un tanto viejas. Hace algunos añitos usábamos tablas para maquetar sitios web, cosa que cambió a usar divs, o capas, lo que hacía que hubiera más flexibilidad al momento de diseñar.

Sin embargo ahora con HTML5 hay lo que se conoce como semántica web, lo que nos dice que debe haber etiquetas que le den significado al contenido, como <img> le da significado a una imagen, o <p> le da sentido a un párrafo, por eso nacen las etiquetas <article> y <section>, las cuales vamos a comparar y ver sus diferencias a continuación.

Div

Con HTML5 le quitamos un poco de presencia a los div’s, pero eso no significa que ya no sean útiles, o pero aún, los veamos como en la era de las tablas. Al contrario, ahora se especifica mejor su uso, porque su objetivo consiste en maquetar el contenido, es decir, en construir las partes que los conforman, aquellas que no tengan un significado semántico. Por ejemplo, una barra lateral, o partes de opciones o links que no necesariamente refieren a un significado tan explícito.

Article

Quizá es por lógica el uso que le vamos a dar, porque su función es la de agrupar lo que sea contenido valioso de un sitio. Por ejemplo, en el blog podríamos declarar una etiqueta <article> a este post, desde el título hasta el último punto y aparte de este artículo, porque es contenido valioso, lo que hace que le de valor al sitio. Hay que aclarar que por contenido valioso puede referirse a un artículo, un post, un párrafo, un comentario, e incluso algo estático como una descripción del blog o sitio web, todo aquel contenido que englobe algún tipo de texto que sea importante para el lector.

Por otro lado, no podríamos usar un article para declarar una barra de links, o de imágenes a redes sociales, porque no es parte del contenido.

Section

Esta si es un poco más abstracta, pero si usan capas en orden y con congruencia será fácil entenderlo Section se debe usar cuando tenemos contenido estático que si bien no forma parte fundamental del contenido mismo si se puede usar para diferenciarlo entre el contenido que es puramente dinámico y no aporta información relacionada con el artículo principal. Por ejemplo, si tuviéramos un post y este fuera muy largo podríamos poner un section para la introducción, uno para el desarrollo y otro para las conclusiones, son secciones de nuestro contenido, mientras que todo estaría englobado en un article porque es nuestro contenido de valor.

otro ejemplo podría ser cuando tenemos una lista de noticias o enlaces estáticos muy definidos con una pequeña descripción, en ese caso todo esa sección sería una section porque tendríamos contenido útil y relevante, y dentro de ellos cada mini noticia sería un article.

De hecho, como se dan cuenta es un tanto abstracto, y para entender mejor cómo usarlo, mejor averigüemos cómo no debemos usar esta etiqueta:

No

• utilizarlo para dividir contenido del encabezado y pie; utilizar en su lugar div
• para envolver un intercambiador de pestañas para la manipulación DOM o estilizado
• para las barras laterales u otro contenido en cajas; en su lugar utilizar aside
• utilizarlo para agregar un borde o sombra alrededor de algo; para ello está div
• para el envoltorio (wrapper) cuando se esté implementando columnas falsas; en su lugar es mejor siempre div
• para anidar elementos cuando se trata de evitar el error del margen flotante doble de IE6(o un problema similar en el diseño); de nuevo, usar div
• …utilizarlo para contener la información biográfica del autor en una entrada de un blog o artículo; en su lugar es mejor usar aside

Vía codigobit

Entonces, cómo vemos su uso puede ser cualquier que sea menos el de usarlo para efectos, o para evitar errores de diseño en CSS, pero si para cada opción que requiera meter contenido, o como en el documento para partirlo en secciones definidas. En un tutorial más adelante veremos cómo usarlo, esto es una primera introducción. Y para ejemplificar mejor la estructura veamos la siguiente imagen:

Si pudiéramos jerarquizar el uso de estas tres etiquetas de acuerdo a importancia con la información de nuestro blog o sitio web diríamos que:

• El más bajo es div, porque su uso no tiene nada que ver con el contenido, es más para estructura del sitio que para agruparlo con contenido.
• El de en medio es section, porque su uso se limita a tener contenido importante pero no es fundamental para el sitio, a menos que lo usemos para seccionar nuestro contenido importante.
• El más importante es article, porque dentro de este va el contenido más valioso del sitio, un informe, un post, una investigación, comentarios, etc. Puede contener sections, pero no otros articles.

Espero que con esta introducción quede un poco más claro todo, en la siguiente ocasión haremos un tutorial en donde hacemos uso de estas tres etiquetas, sabiendo que su comportamiento a nivel visual es el mismo que la capa o div, pero el significado es más bien de estándar y lógica.