html5 - section - ¿Cuál es la diferencia entre<sección> y<div>?




section html (8)

¿Cuál es la diferencia entre <section> y <div> en HTML? ¿No estamos definiendo secciones en ambos casos?


<div> Vs <Section>

La ronda 1

<div>: el elemento HTML (o elemento de división de documento HTML) es el contenedor genérico para el contenido de flujo, que no representa de forma inherente nada. 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. Se debe usar solo cuando ningún otro elemento semántico (como <article> o <nav> ) es apropiado.

<section>: el elemento de la sección HTML ( <section> ) representa una sección genérica de un documento, es decir, una agrupación temática de contenido, generalmente con un encabezado.

La ronda 2

<div>: Soporte del navegador

<section>: Soporte del navegador

Los números en la tabla especifican la primera versión del navegador que es totalmente compatible con el elemento.

En ese sentido, un div es relevante solo desde una perspectiva pura de CSS o DOM, mientras que una sección es relevante también para la semántica y, en un futuro próximo, para la indexación por los motores de búsqueda.


Aquí hay un consejo sobre cómo distingo un par de elementos html5 recientes en el caso de una aplicación web (puramente subjetiva).

<section> marca un widget en una interfaz gráfica de usuario, mientras que <div> es el contenedor de los componentes de un widget como un contenedor que contiene un botón, una etiqueta, etc.

<article> agrupa widgets que comparten un propósito.

<header> es título y barra de menú.

<footer> es la barra de estado.


En el estándar HTML5, el elemento <section> se define como un bloque de elementos relacionados.

El elemento <div> se define como un bloque de elementos secundarios.


La etiqueta <section> define las secciones de un documento, como capítulos, encabezados, pies de página o cualquier otra sección del documento.

mientras:

La etiqueta <div> define una división o una sección en un documento HTML.

La etiqueta <div> se usa para agrupar elementos de bloque para formatearlos con CSS.


Solo 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 interna se muestra en una fuente más pequeña que un encabezado h1 en la sección externa. Cuando se usa div en lugar de la sección, el encabezado interno div h1 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 interno también fue coloreado (se comporta como h1 normal). Es el mismo comportamiento en Firefox 18, IE 10 y Chrome 28.


Tenga cuidado de no abusar de la etiqueta de sección como reemplazo de un elemento div . Una etiqueta de sección debe definir una región significativa dentro del contexto del cuerpo . Semánticamente, HTML5 nos anima a definir nuestro documento de la siguiente manera:

<html>
<head></head>
<body>
    <header></header>
    <section>
        <h1></h1>
        <div>
            <span></span>
        </div>
        <div></div>
    </section>
    <footer></footer>
</body>
</html>

Esta estrategia permite que los robots web y los lectores de pantalla automatizados comprendan mejor el flujo de su contenido. Este marcado define claramente dónde está contenido el contenido de su página principal. Por supuesto, los encabezados y pies de página suelen ser comunes en cientos, si no en miles de páginas, dentro de un sitio web. La etiqueta de sección debe limitarse para explicar dónde está contenido el contenido único. Dentro de la etiqueta de la sección , debemos continuar marcando y controlando el contenido con etiquetas HTML que están más abajo en la jerarquía, como h1 , div , span , etc.

En la mayoría de las páginas simples, solo debe haber una etiqueta de sección única, no varias. Tenga en cuenta también que hay otras etiquetas HTML5 interesantes que son similares a la sección . Considere usar un artículo , un resumen , un lado y otros en su flujo de documentos. Como puede ver, estas etiquetas mejoran aún más nuestra capacidad para definir las principales regiones del documento HTML.


<section> marca una section , <div> marca un bloque genérico sin semántica asociada.


<section> significa que el contenido interior 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 de los atributos encontrados en su class , lang y title .

Entonces no: el uso de <div> no define una sección en HTML.

De la especificación:

<section>

El elemento <section> representa una sección genérica de un documento o aplicación. Una sección, en este contexto, es una agrupación temática de contenido. Cada section debe identificarse, generalmente incluyendo un encabezado (elemento h1-h6) como elemento secundario del elemento <section> .

Ejemplos de secciones serían 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 se puede dividir en secciones para una introducción, noticias e información de contacto.

...

El elemento <section> no es un elemento contenedor genérico. Cuando se necesita un elemento solo para fines de estilo o como una conveniencia para los scripts, se recomienda a los autores que usen el elemento <div> . Una regla general es que el elemento <section> es apropiado solo si el contenido del elemento se enumera explícitamente en el esquema del documento.

( https://www.w3.org/TR/html/sections.html#the-section-element )

<div>

El elemento <div> no tiene ningún significado especial. Representa a sus hijos. Puede usarse con los atributos de class , lang y title para marcar la semántica común a un grupo de elementos consecutivos.

Nota: Se recomienda encarecidamente a los autores que vean el elemento <div> como un elemento de último recurso, ya que cuando ningún otro elemento es adecuado. El uso de elementos más apropiados en lugar del elemento <div> 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 )





html