A fin de dividir de forma genérica
la información de una página web, describiremos
el procedimiento para seccionar información con la etiqueta div en un documento HTML. Muchos
creadores de páginas web cometen el
error de utilizar con frecuencia la etiqueta div, sin tomar en consideración los beneficios reales de este
elemento. Por lo tanto, según las reglas oficiales de HTML, aprenderemos a
marcarla correctamente en páginas web.
En las versiones
anteriores de HTML5, se utilizaba la etiqueta div para dividir en secciones un documento, sin prestar atención en
la finalidad de cada división, por ello, surgen las etiquetas semánticas. Sin
embargo, cuando en un documento se marcan distintas secciones, es necesario
delimitarlas con una sección aún mayor.
La etiqueta div es utilizada con frecuencia para
realizar especificaciones personalizadas a un documento HTML, es necesario
crear su inicio y cierre correspondiente para funcionar de forma correcta, como
se muestra en la ilustración:
061-01_0409_ilu01. Creación de la eiqueta div
En el estándar
5.3 de HTML, se recomienda hacer uso de la etiqueta div para dividir un documento en bloques en última instancia, es
decir, cuando se agotan las posibilidades de utilizar las etiquetas semánticas
como section, article, nav, aside y
footer.
El uso ideal de la
etiqueta div es unir de forma lógica
un contenido conceptualmente relacionado, veamos:
061-01_0409_ilu02. Ejemplo de la etiqueta div con section
En el ejemplo, la
página web de la universidad contiene
información sobre los tres niveles de educación disponibles para estudiar, cada
uno de ellos lo marcaremos con la etiqueta section,
debido a la necesidad de separar los tipos de educación. Sin embargo, aunque
tienen información distinta, todos coinciden en su estructura. Por este motivo,
las marcamos con la etiqueta div, a
fin de facilitar el momento de aplicar estilos a las tres secciones.
La etiqueta div usualmente va acompañada del
atributo class, en español clase. Cuando
ambas están en un documento significa la pertenencia de esa división a una
clase, por lo tanto, entre comillas definimos el nombre designado a la misma. Realizarlo
de esta forma permite, mediante el lenguaje CSS, crear una sentencia en la
cabecera del documento HTML, para asignar estilos a cada clase, a fin de simplificar
el hecho de aplicar un mismo estilo de forma repetida a diferentes partes del
documento.
061-01_0409_ilu03. Ejemplo de la etiqueta div con el atributo
class
El atributo lang en diferentes oportunidades
acompaña a la etiqueta div, con la
finalidad de especificar el tipo de lenguaje utilizado en esa parte del
documento. Esto favorece cuando se crean páginas web con diferentes idiomas o, también, cuando se insertan citas de
otros autores, las cuales son en idioma diferente al del proyecto.
061-01_0409_ilu04.
Ejemplo de la etiqueta div con el
atributo lang
En los estándares
de HTML recomendados por W3C, aunque la etiqueta div está fuera de representar semántica, se puede utilizar de
diferentes maneras con la finalidad de aportar al proyecto organización
minuciosa y especificaciones detalladas de algunas secciones.
Keynotes
- En las versiones anteriores de HTML5, se utilizaba la
etiqueta div para dividir en
secciones un documento, sin prestar atención en la finalidad de cada división,
por ello, surgen las etiquetas semánticas.
- La etiqueta div es
utilizada con frecuencia para realizar especificaciones personalizadas a un
documento HTML, es necesario crear su inicio y cierre correspondiente para
funcionar de forma correcta.
- En el estándar 5.3 de HTML, se recomienda hacer uso de la
etiqueta div para dividir un
documento en bloques en última instancia, es decir, cuando se agotan las
posibilidades de utilizar las etiquetas semánticas como section, article, nav, aside y footer.
- El uso ideal de la etiqueta div es unir de forma lógica un contenido conceptualmente relacionado.
- La etiqueta div
usualmente va acompañada del atributo
class, en español clase. Cuando ambas están en un documento significa la
pertenencia de esa división a una clase, por lo tanto, entre comillas definimos
el nombre designado a la misma.
- El atributo lang en
diferentes oportunidades acompaña a la etiqueta div, con la finalidad de especificar el tipo de lenguaje utilizado
en esa parte del documento.
MisiónA fin de utilizar
correctamente la etiqueta div en la
creación de páginas web, agrega la
etiqueta div en tu documento HTML,
llamado proyecto01, y agrega un
comentario del motivo por el cuál sería de ayuda la división en ese lugar.
Tiempo disponible: entre 15 y 30 minutos.
Pasos a seguir:
- Selecciona otra posible división de tu documento.
- Mide los beneficios entre una y otra división.
- Expón tus criterios ante dos profesionales mediante vPages, con conocimiento en la materia.
- Anota las sugerencias y opiniones de cada uno.
- Tiempo disponible: 1 día.
Sabrás que has
tenido éxito cuando expliques con facilidad los beneficios y una técnica para
el uso correcto de la etiqueta div a dos compañeros.
Analiza tus
beneficios y las recomendaciones de cada profesional, a fin de mejorar tu
implementación y agrégalas al código mediante una etiqueta de comentario.
Comparte el resultado final del documento en tu vPages y sugiere en la publicación de un compañero como optimizar
su código. Tiempo disponible: entre
15 y 30 minutos.
CierreA través del seccionamiento con la
etiqueta div en un documento HTML,
creamos páginas web con el uso
correcto de la misma. Tenemos la capacidad de considerar los beneficios reales
de este elemento. Además, identificamos el proceso para dividir de forma
genérica la información de una página web.
Con paciencia y orden, crearemos códigos de proyectos eficientes con HTML.
