Cuándo utilizar el elemento SECTION de HTML5

click fraud protection

El nuevo HTML5 sección elemento puede ser algo confuso. Si ha estado creando documentos HTML antes que HTML5, es probable que ya esté utilizando el elemento para crear divisiones estructurales dentro de sus páginas y luego diseñar las páginas con ellas. Por lo tanto, podría parecer algo natural simplemente reemplazar su DIV elementos con sección elementos. Pero esto es técnicamente incorrecto.

El elemento 'sección' es un elemento semántico

La SECCIÓN elemento es un semántico elemento; proporciona significado tanto a los agentes de usuario como a los humanos sobre el contenido adjunto, específicamente, una sección del documento.

Esto puede parecer una descripción muy general, y eso es porque lo es. Hay otros Elementos HTML5 que brindan más distinciones semánticas a su contenido que debe usar primero antes de usar el sección elemento:

  • Artículo
  • Aparte
  • Nav

Cuándo usar el elemento 'sección'

Utilizar el artículo elemento cuando el contenido es una parte independiente del sitio que puede ser independiente y distribuirse como un artículo o publicación de blog. Utilizar el

instagram viewer
aparte elemento cuando el contenido está relacionado tangencialmente con el contenido de la página o con el sitio en sí, como barras laterales, anotaciones, notas al pie de página o información asociada del sitio. Utilizar el nav elemento de contenido que admite la navegación del sitio.

La sección elemento es un elemento semántico genérico. Úselo cuando ninguno de los otros elementos semánticos del contenedor sea apropiado. Combina partes de su documento en unidades discretas que puede describir como relacionadas de alguna manera. Si no puede describir los elementos de la sección en una o dos oraciones, probablemente no debería usar el elemento.

En su lugar, debe utilizar el DIV elemento. La DIV elemento en HTML5 es un elemento contenedor no semántico. Si el contenido que está intentando combinar no tiene un significado semántico, pero aún necesita combinarlo para darle estilo, entonces el DIV elemento es el elemento apropiado para usar.

Cómo funciona el elemento 'sección'

Una sección de su documento puede aparecer como el contenedor externo de artículos y aparte elementos. También puede incluir contenido que no forma parte de un artículo o aparte. A sección El elemento también se puede encontrar dentro de un artículo, nav, o aparte. Incluso puede anidar secciones para indicar que un grupo de contenido es una sección de otro grupo de contenido que es una sección de un artículo o la página como un todo.

La sección elemento crea elementos dentro de un esquema del documento. Y como tal, siempre debe tener un elemento de encabezado (H1 mediante H6) como parte de la sección. Si no puede encontrar un título para la sección, el DIV elemento es probablemente más apropiado.

Si no desea que el título de la sección aparezca en la página, siempre puede enmascararlo con CSS.

Cuándo no usar el elemento 'sección'

Hay un propósito para el que no debe usar el sección elemento: solo por estilo.

En otras palabras, si la única razón por la que está poniendo un elemento en ese lugar es para adjuntar Estilo CSS propiedades, no debe utilizar un sección elemento. Encontrar un elemento semántico o usa el DIV elemento en su lugar.

En última instancia, puede que no importe

Una dificultad para escribir HTML semántico es que lo que es semántico para el navegador puede no tener ningún sentido para usted. Si cree que puede justificar el uso de sección elemento en sus documentos, entonces debería usarlo. A la mayoría de los agentes de usuario no les importa y mostrarán la página como podría DIV o un sección.

Para los diseñadores a los que les gusta ser semánticamente correctos, sección elemento de una manera semánticamente válida es importante. Para los diseñadores que solo quieren que sus páginas funcionen, eso no es tan importante. Escribir HTML semánticamente válido es una buena práctica y mantiene las páginas más preparadas para el futuro. Pero al final, depende de ti.

instagram story viewer