A fin de dividir con excelencia la información de una página web, identificaremos el procedimiento necesario para seccionar información con la etiqueta section en un documento HTML. Muchos programadores dividen de forma incorrecta las partes de un documento HTML, por ende, al momento de hacer modificaciones o aplicar estilos se vuelve complicado ubicar las secciones. Para ello, determinamos el momento correcto para aplicar la etiqueta section, según las reglas del lenguaje HTML.

Al crear un documento HTML, encontramos la necesidad de agrupar etiquetas para englobarlas en una superior, con el propósito de organizar con mayor precisión una página web, aunque cada una realice funciones diferentes. Para estos casos existe la etiqueta section, la cual pertenece a la clasificación de contenido de seccionamiento y fujo. Tiene su inicio y cierre correspondiente para funcionar de forma correcta, tal como se muestra en la ilustración:

061-01_0407_ilu01. Creación de la etiqueta section

Delimitar partes de un documento, con la intención de definir cambios de estilo es un uso inadecuado de la etiqueta section. En general, la etiqueta section debe utilizarse para dividir en secciones un documento, con aporte de sentido semántico a cada una.

Por ejemplo, en la siguiente ilustración observamos un periódico mediante una página web.

061-01_0407_ilu02. Ejemplo de división de secciones

Está dividido en sección de deportes, nacionales, internacionales, sucesos, social, entre otras, dependiendo de su creador. Para cada una es posible definir la etiqueta section y, a su vez, dentro de ellas estarían encabezados, enlaces, figuras, párrafos y otros elementos mediante las etiquetas de HTML, para describir textos.

Otra manera de comprender mejor la utilidad de section, es la siguiente, visualicemos el código mostrado en la ilustración:

061-01_0407_ilu03. Código ejemplo sin etiqueta section

Dicho código está conformado básicamente por encabezado y tablas, donde sería de poca utilidad definir una sección para cada una. Sin embargo, en la necesidad de crear un marcado de horario para 50 estudiantes, puede ser de gran utilidad marcar todos los encabezados como una sección y todos los horarios con otra.

Ahora bien, al crear la etiqueta section para delimitar los encabezados, ocurre algo interesante. La etiqueta h1 pasa a mostrarse como el encabezado con la etiqueta h2, debido al cambio de semántica con el uso de seccionamiento. Es decir, cada encabezado puede tener sus propios niveles de encabezados, sin embargo, al contener un h1 es considerado al mismo nivel semántico de h2. En la siguiente ilustración observamos como:

061-01_0407_ilu04. Código de ejemplo con la etiqueta section

Es posible agregar el atributo aria-label para describir brevemente la sección delimitada, a fin de ser más específico y favorecer a los lectores de pantalla. Este atributo pertenece al mecanismo llamado ARIA, el cual permite agregar especificaciones detalladas a la mayoría de las etiquetas de HTML. A continuación un ejemplo de ello:

061-01_0407_ilu05. Ejemplo de especificación detallada de section

Keynotes

• Delimitar partes de un documento, con la intención de definir cambios de estilo es un uso inadecuado de la etiqueta section.
• En general, la etiqueta section debe utilizarse para dividir en secciones un documento, con aporte de sentido semántico a cada una.
• Al crear la etiqueta section para delimitar los encabezados, ocurre algo interesante. La etiqueta h1 pasa a mostrarse como el encabezado con la etiqueta h2, debido al cambio de semántica con el uso de seccionamiento. Es decir, cada encabezado puede tener sus propios niveles de encabezados.
• Es posible agregar el atributo aria-label para describir brevemente la sección delimitada, a fin de ser más específico y favorecer a los lectores de pantalla.

Con la finalidad de dividir una página web con eficiencia mediante la etiqueta section, crea un resumen sobre los beneficios de la etiqueta section en un documento HTML, e ingrésalo en tu archivo llamado proyecto01. Tiempo disponible entre 15 y 30 minutos.

Pasos a seguir:

• Divide el resumen mediante dos etiquetas section.
• Resalta en cada sección una frase relevante con las etiquetas de encabezados necesarias.
• Agrega fuera de la sección los mismos encabezados.
• Comparte tu código a un profesional en la materia y pídele su opinión, en cuanto a la diferencia de presentación de encabezados dentro y fuera de la etiqueta section.
• Tiempo disponible: 1 día.

Sabrás que has tenido éxito cuando resumas con facilidad la utilidad de la etiqueta section y el impacto causado a nivel semántico en un documento HTML.

Al finalizar redacta un borrador en limpio de ambos resúmenes, compartelos en tu vProfile y comenta en la publicación de dos compañeros una sugerencia para complementar su opinión. Tiempo disponible entre 15 y 30 minutos.

Gracias al seccionamiento con la etiqueta section, identificamos correctamente las divisiones de una página web, a fin de facilitar modificaciones futuras o aplicaciones de estilos, además, distinguimos con excelencia las situaciones beneficiosas para aplicarla. La concentración y organización son fundamentales para agrupar contenido de forma eficiente.