Cuándo utilizar el elemento “section” de HTML5
Al parecer el nuevo elemento HTML5 denominado <section> es algo confuso y algo difícil de entender su verdadero valor. En este artículo veremos la verdadera utilidad de dicho elemento.
Definiendo <section>
De acuerdo a las especificaciones se define como sigue:
El elemento section representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática del contenido, típicamente con un encabezado.
Viéndolo así, inmediatamente podríamos pensar que <section> podría ser utilizado para contener una entrada de un blog, o un comentario individual. Pero no nos adelantemos. Sigamos con las especificaciones:
Se les aconseja a los autores que hagan el uso del elemento article en lugar del elemento section cuando éste asigne sentido para sindicar el contenido del elemento.
Esa parte es regla general en las entradas de blogs, artículos, contenido de feeds, y otro contenido sindicado. ¿Entonces qué queda?
Esclareciendo más…
Las especificaciones van más lejos para describir cómo no debe ser utilizado, y también da un uso recomendado. Explica:
Ejemplos de secciones podrían ser capítulos, las muchas páginas tabuladas en una caja de diálogo tabulada, o las secciones enumeradas de una tesis. La página principal de un sitio web podría ser separada en secciones para una introducción, lista de noticias, e información de contacto.
El único problema que tenemos con lo mencionado arriba es sobre el ejemplo de las listas de noticias, lo cual tendría más sentido para utilizarlo con el elemento <article>, pero supongo que eso dependería en que dichos ítems tengan el potencial para ello.
Finalmente, aquí una advertencia que da la especificación.
El elemento section no es un contenedor genérico. Cuando un elemento es necesario para personalizarlo mediante estilos o como algo conveniente para utilizarlo con scripts, se recomienda el uso del elemento div en su lugar. Una regla general es que el elemento section es apropiado únicamente si el contenido de dicho elemento será listada explícitamente en el esquema del documento.
Un problema que se podría notar es la parte en la que menciona que no es un contenedor genérico. Pues, de hecho es algo parecido. ¿Sino qué sería? – ahora con toda esa información ya podemos realizar ya una decisión inteligente para su utilización.
¿Cuándo debería ser utilizado?
En HTML5 for Web Designers, Jeremy Keith nos recuerda asegurarnos que todo dentro del elemento section sea relacionado.
Para hacer esto más claro de una manera práctica, aquí los posibles SI y NO de su utilización.
SI…
- utilizarlo para cada sección individual de un intercambiador de pestañas o deslizador de contenido (si una lista no ordenada no es necesaria)
- utilizarlo para dividir “términos de uso” largo (o similar) para tenerlo en secciones numeradas.
- anidar elementos section si es necesario (como se podría hacer en la página de “términos y condiciones”)
- para dividir las diferentes secciones de una página cuyo contenido albergue a toda página, como por ejemplo los portfolios.
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
Conclusión
En pocas palabras, el elemento section de HTML5 puede ser utilizado en cualquier instancia donde se desee contenido independiente, no sindicado, nada que tenga que ser colocado al lado en cuyo envoltorio no se desee realizar uso de estilos. En otros palabras: Casi nunca.
Fuente original: When to Use the HTML5 “section” Element
Entradas
