¿Cuál es la diferencia entre <sección> y <div>?
¿ Cuál es la diferencia entre <section>y <div>en HTML?
¿No estamos definiendo apartados en ambos casos?
<section>significa que el contenido interno está agrupado (es decir, se relaciona con un solo tema) y debe aparecer como una entrada en un esquema de la página.
<div>, por otro lado, no transmite ningún significado , aparte del que se encuentra en sus atributos classy .langtitle
Entonces no: usar a <div>no define una sección en HTML.
De la especificación:
<section>
El
<section>elemento representa una sección genérica de un documento o solicitud. Una sección, en este contexto, es una agrupación temática de contenidos. Cada unosectiondebe identificarse, normalmente incluyendo un encabezado (elemento h1-h6) como hijo del<section>elemento.Ejemplos de secciones serían los capítulos, las distintas páginas con pestañas en un cuadro de diálogo con pestañas o las secciones numeradas de una tesis. La página de inicio de un sitio web podría dividirse en secciones para una introducción, noticias e información de contacto.
...
El
<section>elemento no es un elemento contenedor genérico. Cuando un elemento es necesario sólo para fines de estilo o como comodidad para la creación de secuencias de comandos, se recomienda a los autores que utilicen el<div>elemento en su lugar. Una regla general es que el<section>elemento es apropiado sólo si su contenido se enumera explícitamente en el esquema del documento.
( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>
El
<div>elemento no tiene ningún significado especial. Representa a sus hijos. Se puede utilizar con los atributosclass,langytitlepara marcar la semántica común a un grupo de elementos consecutivos.Nota: Se recomienda encarecidamente a los autores que consideren el
<div>elemento como un elemento de último recurso, cuando ningún otro elemento sea adecuado. El uso de elementos más apropiados en lugar del<div>elemento conduce a una mejor accesibilidad para los lectores y un mantenimiento más fácil para los autores.
( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
Las secciones son más relevantes en la navegación por puntos de referencia para tecnología de asistencia. Para aparecer en el esquema del documento o en la lista de hitos, necesitan un nombre, que se puede asignar mediante aria-label, aria-labelledbyo title:
<section aria-labelledby="s3-h2">
<h2 id="s3-h2">Introduction</h2>
…
Por ejemplo, VoiceOver en Mac puede proporcionar un esquema para navegar directamente a esa sección.
<section>marca una sección , <div>marca un bloque genérico sin semántica asociada.
Sólo una observación: no he encontrado ninguna documentación que corrobore esto.
Si una sección contiene otra sección, un encabezado h1 en la sección interior se muestra en una fuente más pequeña que un encabezado h1 en la sección exterior. Cuando se utiliza div en lugar de sección, el encabezado div h1 interno se muestra como h1.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>
-- el encabezado Nivel2 se muestra en una fuente más pequeña que el encabezado Nivel1.
Cuando se usa CSS para colorear el encabezado h1, el h1 interior también se colorea (se comporta como h1 normal). Es el mismo comportamiento en Firefox 18, IE 10 y Chrome 28.
<div> Vs <Section>
La ronda 1
<div>:El elemento HTML (o elemento de división de documentos HTML) es el contenedor genérico para el contenido fluido, que no representa nada inherentemente. Se puede usar para agrupar elementos con fines de estilo (usando los atributos de clase o id), o porque comparten valores de atributos, como lang. Sólo debe usarse cuando ningún otro elemento semántico (como <article>o <nav>) sea apropiado.
<section>:El elemento Sección HTML<section> ( ) representa una sección genérica de un documento, es decir, una agrupación temática de contenido, normalmente con un encabezado.
La ronda 2
<div>: Soporte del navegador
<section>: Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que admite totalmente el elemento.
En ese sentido, un div es relevante sólo desde una perspectiva CSS o DOM pura, mientras que una sección también es relevante para la semántica y, en un futuro próximo, para la indexación por parte de los motores de búsqueda.
En el estándar HTML5, el <section>elemento se define como un bloque de elementos relacionados.
El <div>elemento se define como un bloque de elementos secundarios.
