Pregunta ¿Cuál es la diferencia entre
y
?


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


700
2017-08-04 10:33


origen


Respuestas:


<section> significa que el contenido interno está agrupado (es decir, se relaciona con un único tema) y debe aparecer como una entrada en un esquema de la página.

<div>, por otra parte, no transmite ningún significado, aparte de cualquier encontrado en su class, lang y title atributos.

Entonces no: usando un <div> no define una sección en HTML.

De la especificación:

<section>

los <section> elemento 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, por lo general incluyendo un encabezado (elemento h1-h6) como elemento secundario 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 principal de un sitio web podría dividirse en secciones para una introducción, noticias e información de contacto.

...

los <section> elemento no es un elemento contenedor genérico. Cuando se necesita un elemento solo para fines de diseño o como una conveniencia para la creación de scripts, se anima a los autores a utilizar el <div> elemento en su lugar. Una regla general es que el <section> elemento es apropiado solo si los contenidos del elemento se enumerarán explícitamente en el contorno del documento.

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

<div>

los <div> elemento no tiene ningún significado especial en absoluto. Representa a sus hijos. Se puede usar con el class, langy title atributos para marcar la semántica común a un grupo de elementos consecutivos.

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


850
2017-08-04 12:10



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


71
2017-08-04 10:34



<div> Vs <Section>

La ronda 1

<div>: los HTML  Elemento (o elemento de división de documento HTML) es el contenedor genérico para el contenido de flujo, que no representa nada de forma inherente. Se puede usar para agrupar elementos con fines de diseño (utilizando los atributos de clase o id) o porque comparten valores de atributo, como lang. Debe usarse solo cuando no haya otro elemento semántico (como <article> o <nav>) es apropiado.

<section>: los HTML Elemento de sección (<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 enter image description here

<section>:  Soporte del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente el elemento. enter image description here

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.


55
2018-06-17 12:00



Solo una observación: no he encontrado ninguna documentación que colabore con este

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 utiliza div en lugar de sección, el div interior h1-header se muestra como h1.

<section>
  <h1>Level1</h1>
  some text
  <section>
    <h1>Level2</h1>
    some more text
  </section>
</section>

- el encabezado Level2 - se muestra en una fuente más pequeña que el encabezado Level1.

Cuando se usa css para colorear el encabezado h1, el h1 interno también se coloreó (se comporta como h1 regular). Es el mismo comportamiento en Firefox 18, IE 10 y Chrome 28.


31
2017-08-01 14:28



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

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


15
2018-04-29 14:51



La etiqueta de sección proporciona una sintaxis más semántica para html. div es una etiqueta genérica para una sección. Cuando usa la etiqueta de sección para el contenido apropiado, también se puede usar para la optimización del motor de búsqueda. La etiqueta de sección también facilita el análisis de html. para más información, refiérase. http://blog.whatwg.org/is-not-just-a-semantic


9
2017-08-04 10:37



<div>-el contenedor de flujo genérico que todos conocemos y amamos. Es un elemento de nivel de bloque sin significado semántico adicional (W3C: Markup, WhatWG)

<section>-un documento genérico o sección de aplicación. A normalmente tiene un título (título) y tal vez un pie de página también. Es un fragmento de contenido relacionado, como una subsección de un artículo extenso, una parte principal de la página (por ejemplo, la sección de noticias en la página principal) o una página en la interfaz con pestañas de una aplicación web. (W3C: Markup, WhatWG)

Mi sugerencia: div: elemento de html de la versión inferior utilizada (creo que 4.01 to still) (muchos diseñadores lo manejaron). sección: elemento que acaba de llegar (html5) html.


9
2017-08-04 12:13