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.
MisiónCon 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.
CierreGracias 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.
