HTML es la columna vertebral de la mayoría de los sitios web. De esta forma, los navegadores saben cómo organizar su contenido en encabezados, párrafos, imágenes, formularios y otros elementos que espera ver en sus páginas web.
Algunos elementos HTML solo le dicen a los navegadores cómo deben verse los elementos. Otros elementos HTML le dicen a los navegadores cómo deben verse y qué hacen. Este último se conoce como HTML semántico.
Un ejemplo de un elemento HTML semántico es un elemento de sección. En esta publicación, cubriremos qué es este elemento, cómo se diferencia de los otros elementos de un contenedor y cómo usarlo y ocultarlo.
¿Qué es una sección en HTML?
En HTML, una sección es un elemento semántico que se utiliza para crear secciones separadas en un sitio web. Estas secciones deben incluir contenido relacionado, como información de contacto.
El elemento de sección solo debe usarse cuando no hay un elemento más específico para representar el contenido relacionado. Por ejemplo, no usará un elemento de sección para agrupar enlaces de navegación; en su lugar, usará el elemento nav. Pero puede usar el elemento de sección para dividir un sitio web de una página o un acuerdo a largo plazo.
Para comprender mejor cuándo usar el elemento de sección, comparémoslo con otro elemento semántico: artículo.
¿Cuál es la diferencia entre un artículo y una sección en HTML5?
El artículo y el elemento de sección son elementos semánticos en HTML5. Esto significa que ambos transmiten el significado de los elementos que contienen. Esto ayuda a los motores de búsqueda, navegadores, tecnologías de asistencia y otros desarrolladores a comprender las diferentes partes del sitio web. Entonces, ¿cuándo debería usar un artículo en lugar de un elemento de sección?
Un artículo debe usarse para representar una unidad de contenido en un sitio web que, en principio, podría existir por sí sola o ser reutilizada. Por ejemplo, una publicación de blog, publicación de foro, artículo de revista o artículo de periódico debe marcarse con un elemento «artículo».
Por otro lado, una sección debe usarse para representar una sección de un documento que está relacionada con el mismo tema pero que no puede distribuirse de forma independiente o reutilizarse. Por ejemplo, la introducción, las noticias y la información de contacto en la página de inicio deben estar marcadas con elementos de sección.
Ahora echemos un vistazo más de cerca a la diferencia entre una sección y otro elemento contenedor en HTML: div.
¿Cuál es la diferencia entre un div y una sección en HTML5?
Los elementos div y section se utilizan para dividir la página web en secciones. Pero div es semánticamente neutral, mientras que la sección no lo es.
Que significa exactamente? Básicamente, un div no describe el contenido que contiene. Otros elementos, como el artículo, la navegación, el encabezado y el pie de página, describen claramente el contenido que contienen y se denominan elementos semánticos. Un elemento de sección también se considera un elemento semántico ya que representa una sección de documento que está relacionada con el mismo concepto general.
Dado que el elemento div no tiene un significado semántico, se denomina elemento contenedor genérico y solo debe usarse para agrupar elementos con fines de estilo o presentación. De lo contrario, se debe usar una sección u otro elemento semántico para explicar a los motores de búsqueda, navegadores, tecnologías de asistencia y otros desarrolladores cuál es esa parte de la página. Esto hará que su código sea más accesible y fácil de mantener.
Cómo usar secciones en HTML
Para usar secciones en HTML, envuelva elementos relacionados que desee agrupar en etiquetas de sección. La mayoría de las secciones deben contener un encabezado.
Veamos algunos ejemplos comunes a continuación.
Ejemplo de página de inicio
En el siguiente ejemplo, el contenido del documento HTML se divide en dos secciones. Cada uno tiene un título y un párrafo.
ver la pluma Un ejemplo de un elemento de sección de Christina Perricone (@hubspot) en CódigoPen.
Ejemplo de un artículo con secciones anidadas
En el siguiente ejemplo, el elemento del artículo contiene tres secciones anidadas. Cada sección incluye un encabezado y un párrafo.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Cómo ocultar una sección en HTML
En lugar de eliminar permanentemente una sección de su sitio, es posible que desee ocultarla. De esa manera, si cambia de opinión, no tiene que volver a crearlo desde cero.
Hay dos opciones para ocultar secciones (o cualquier elemento) en HTML. Si desea que la página se muestre como si el elemento de la sección no estuviera allí, use la propiedad de visualización y establézcala en «ninguno». Aquí hay un ejemplo:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Si desea ocultar una sección pero ocupar el mismo espacio en el diseño, use la propiedad de visibilidad y configúrela como «oculta». Aquí hay un ejemplo:
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
División de código HTML
El elemento de sección se puede usar para dividir una página web en secciones separadas de contenido relacionado. Usar el elemento de sección en lugar de un elemento contenedor genérico como div puede ayudar a que su código sea más accesible y comprensible para los motores de búsqueda, los navegadores, la tecnología de asistencia y otros desarrolladores.
