Con la finalidad de organizar de
forma óptima la información de una página web,
identificaremos las etiquetas de HTML para seccionar la información de documentos
en el proceso de creación. Algunas páginas de internet tienen divisiones de
contenido sin prestar atención en la semántica de cada una, por ende, la
indexación por parte de los navegadores se
realiza de forma incorrecta. Por este motivo, describiremos cómo seccionar
información según las recomendaciones oficiales de HTML.
Las etiquetas
semánticas de HTML aportan sentido a cada parte del documento, de igual manera
funcionan las etiquetas utilizadas para dividirlo en secciones.
En los inicios de
HTML, un documento era dividido en secciones con la etiqueta div, la cual era utilizada por los
programadores en cualquier parte, sin importar la información o conjunto de
etiquetas englobadas, principalmente porque facilitaban la definición de
estilos. Otros, para ser más detallistas, agregaban atributos de class a fin de agrupar las divisiones
del contenido.
061-01_0406_ilu01. Creación de la etiqueta div
Sin embargo, en
ambos casos, cuando otro programador necesitaba entender ese documento, tenía
dificultades para reconocer, de manera específica, los objetivos del creador.
Debido al desarrollo de HTML, div ahora
pertenece al grupo de etiquetas de flujo, en el cual se encuentran otras. En este
grupo se encuentran la mayoría de las etiquetas de HTML, incluyendo las
mostradas en la siguiente imagen:
061-01_0406_ilu02. Ejemplos de las etiquetas de agrupación
Gracias al
desarrollo del lenguaje de marcado, se vuelve fácil el procedimiento de dividir
un documento en secciones. Las etiquetas de esta clasificación están ubicadas
en el estándar HTML5.3. Las mismas proporcionan significado al texto donde se
encuentren. Las etiquetas como article,
section, nav, aside y footer, fueron propuestas en la quinta versión de
este lenguaje, con la finalidad de aportar al documento una especificación más
detallada, y así favorecer a los lectores de pantalla cuando son utilizados por
usuarios con discapacidad visual. Éstas excepto footer pertenecen a la clasificación: seccionamiento de contenido.
061-01_0406_ilu03. Ejemplos de las etiquetas de secciones
Es posible integrar
las etiquetas de HTML5 en un documento antiguo creado con solo div, a fin de entender fácilmente la
utilidad de cada etiqueta, observaremos un ejemplo.
061-01_0406_ilu04. Seccionamiento de página web
En la ilustración
anterior tenemos una página web de
ejemplo, en la cual aplicaremos cada una de las nuevas etiquetas, aun sin
conocer cómo está creada la página originalmente. Para ello, definimos el
encabezado con h1, mostrado a la
izquierda por especificaciones de estilo, la fotografía con la etiqueta figure, la sección de contacto en la
parte superior con la etiqueta nav,
por ser un grupo de enlaces, y el formulario de registro con section.
Keynotes
- Las etiquetas semánticas de HTML aportan sentido a cada
parte del documento, de igual manera funcionan las etiquetas utilizadas para
dividirlo en secciones.
- En los inicios de HTML, un documento era dividido en
secciones con la etiqueta div, la
cual era utilizada por los programadores en cualquier parte, sin importar la
información o conjunto de etiquetas englobadas, principalmente porque
facilitaban la definición de estilos.
- Debido al desarrollo de HTML, div ahora pertenece al grupo de etiquetas de agrupación de
contenido, en el cual se encuentran otras. Este grupo de etiquetas van
estrechamente unidas a la clasificación de seccionar un documento, debido a la
estructuración aportada por cada uno.
- Las etiquetas como article,
section, nav, aside y footer, fueron propuestas en la quinta versión de
este lenguaje, con la finalidad de aportar al documento una especificación más
detallada, y así favorecer a los lectores de pantalla cuando son utilizados por
usuarios con discapacidad visual.
RetoRealiza un
resumen con la explicación sobre el proceso de seccionamiento de información en
documentos HTML, es necesario incluir: beneficios y ejemplos de etiquetas según
lo aprendido.
¡Comparte el
resultado de tu reto en vPages y
realiza un debate con un compañero sobre el mismo!
Tiempo
disponible: entre 15 y 30 minutos.
CierreEl seccionamiento de documentos
HTML permite dividir contenido con sentido semántico, por lo tanto, beneficiamos
la indexación por parte de navegadores web.
También, organizamos de forma óptima la información de una página destinada
a internet. Con determinación y paciencia, utilizaremos correctamente las
etiquetas para seccionar contenido.
