<section> significa que el contenido en el 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 las que encuentre en sus class, langy titleatributos.
Entonces no: el uso de 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 aplicación. Una sección, en este contexto, es una agrupación temática de contenido. Cada uno sectiondebe identificarse, generalmente incluyendo un encabezado (elemento h1-h6) como elemento secundario del <section>elemento.
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 <section>elemento no es un elemento contenedor genérico. Cuando se necesita un elemento solo para propósitos de estilo o como una conveniencia para la creación de secuencias de comandos, se alienta a los autores a usar el <div>elemento en su lugar. Una regla general es que el <section>elemento es apropiado solo si el contenido del elemento se enumeraría explícitamente en el esquema del documento.
El <div>elemento no tiene ningún significado especial en absoluto. Representa a sus hijos. Puede ser utilizado con los class, langy titleatributos para marcar la semántica común a un grupo de elementos consecutivos.
Nota: Se recomienda a los autores que vean el <div>elemento como un elemento de último recurso, para 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 una capacidad de mantenimiento más fácil para los autores.
Pensando más en sectionvs. div, incluso a la luz de esta respuesta, he llegado a la conclusión de que son exactamente el mismo elemento. El W3C dice que un div"representa a sus hijos". Bueno, ¿no es eso también lo que hace el sectionelemento? Sí, sectionimplica que sus hijos están agrupados, pero por el solo hecho de poner a los niños dentro de a div, también los está agrupando . Al menos de la forma en que lo hago, no sé ustedes.
trysis
99
@trysis: "Pensando más en sectionvs. div" - no pienses demasiado en ello. HTML no es complicado. “Por el solo hecho de poner a los niños dentro de a div, también los está agrupando ”. No según la especificación HTML que no eres. Los está envolviendo en un divdiseño, conveniencia de JavaScript u otra cosa que el W3C aún no ha pensado, pero no indica a los lectores que los elementos secundarios son un grupo.
Paul D. Waite
8
@ Matian2040: porque el propósito de HTML es agregar significado al texto, por ejemplo <p>This is a paragraph</p>o <h2>This is a second-level heading</h2>. Debido a que <div>no agrega significado, solo lo usaría si no hay otro elemento HTML que agregue el significado apropiado al texto en cuestión.
Paul D. Waite
77
Entonces, ¿no hay una sola ventaja si se usan secciones? jajaja, ¿por qué existe?
Negro
14
@EdwardBlack: transmite un significado diferente al de otras etiquetas. Transmitir significado es el punto completo de HTML.
Paul D. Waite
71
<section>marca una sección , <div>marca un bloque genérico sin semántica asociada.
@MarwenTrabelsi - El enlace no está muerto. "Sección" es una palabra estándar en inglés. Los diccionarios están disponibles.
Quentin
@MarwenTrabelsi: los términos que usted llama "abstracto y amplio" son las diferencias clave.
Quentin
64
<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 nada inherentemente. Se puede usar para agrupar elementos con fines de estilo (usando los atributos de clase o id), o porque comparten valores de atributo, como lang. Debe usarse solo 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, generalmente con un encabezado.
La ronda 2
<div>:Soporte de navegador
<section>:Soporte de 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 también es relevante para la semántica y, en un futuro cercano, para la indexación por motores de búsqueda.
El soporte del navegador no es un problema aquí, se trata de semántica. Si está utilizando HTML5, probablemente usará un polyfill de todos modos.
Jack Tuck
@JackTuck ¿Y qué pasa si no quieres usar tales errores?
Sr. Lister
49
Solo una observación: no he encontrado ninguna documentación que corrobore esto
Si una sección contiene otra sección, se muestra un encabezado h1 en la sección interna en una fuente más pequeña que un encabezado h1 en la sección externa. Cuando se usa div en lugar de sección, el encabezado div h1 se muestra como h1.
<section><h1>Level1</h1>
some text<section><h1>Level2</h1>
some more text</section></section>
- el encabezado de Nivel2 se muestra en una fuente más pequeña que el encabezado de Nivel1.
Cuando se usa css para colorear el encabezado h1, los h1 internos también se colorearon (se comporta como h1 normal). Es el mismo comportamiento en Firefox 18, IE 10 y Chrome 28.
No sé por qué alguien marcó esto. Corto, dulce, y también el punto.
user6031759
1
-1 no tiene ningún sentido, cómo desea agrupar elementos relacionados en el documento de estructura jerárquica (XML / HTML), solo puede agrupar bloques de elementos secundarios utilizando cualquier etiqueta.
Svisstack
@Svisstack Tiene razón en que cualquier etiqueta adjunta (es decir, no se cierra automáticamente / anula) puede agrupar bloques de elementos secundarios. Aunque creo que esto está entrando más en lo que es la relación de los niños. ¿Todos tienen un contexto relacionado para transmitir? Por ejemplo: un formulario que contiene varias entradas se agruparía por razones de funcionalidad / estilo. Pero este formulario no es una sección del sitio web, sino una pieza con una función. Ahora digamos que su página estaba describiendo un producto. Las diferentes partes del producto se enumerarían en un elemento de sección porque los elementos transmiten una idea colectiva.
Xandor
20
Tenga cuidado de no usar en exceso 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:
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 principal de su página. Por supuesto, los encabezados y pies de página a menudo son comunes en cientos, si no miles de páginas dentro de un sitio web. La etiqueta de la sección debe limitarse para explicar dónde está contenido el contenido único. Dentro de la etiqueta de sección , deberíamos continuar marcando y controlando el contenido con etiquetas HTML que son más bajas 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 múltiples. Tenga en cuenta también que hay otras etiquetas HTML5 interesantes que son similares a la sección . Considere usar el artículo , resumen , a un lado y otros dentro de su flujo de documentos. Como puede ver, estas etiquetas mejoran aún más nuestra capacidad para definir las principales regiones del documento HTML.
"En la mayoría de las páginas simples, solo debe haber una etiqueta de sección única". ¿Puede dar un ejemplo no simple en el que desee utilizar varias etiquetas de sección en una sola página?
styfle
77
Usaría la mainetiqueta allí, y dentro de ella, una o más sectionetiquetas.
Chazy Chaz
10
<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 encabezado (título) y quizás también un pie de página. Es una porción de contenido relacionado, como una subsección de un artículo largo, una parte importante de la página (por ejemplo, la sección de noticias en la página de inicio) o una página en la interfaz con pestañas de una aplicación web. (W3C: Marcado, WhatWG)
Mi sugerencia: div: utilizó una versión inferior (creo que 4.01 a todavía) elemento html (muchos diseñadores manejaron eso). sección: elemento html que viene recientemente (html5).
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 de motores de búsqueda. La etiqueta de sección también facilita el análisis html. Para más información, consulte. http://blog.whatwg.org/is-not-just-a-semantic
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 con un botón y una etiqueta, etc.
<article> agrupa los widgets que comparten un propósito.
Los encabezados, pies de página y otras secciones del documento tienen sus propias etiquetas semánticas. ( <header>, <footer>, <nav>, <article>Etc.)
Oliver
1
<section></section>
El <section>elemento HTML representa una sección genérica de un documento, es decir, una agrupación temática de contenido, generalmente con un encabezado. Cada uno <section>debe identificarse, típicamente incluyendo un encabezado ( <h1>- <h6>elemento) como hijo del <section>
elemento. Para más detalles, siga el siguiente enlace.
El <div>elemento HTML (o Elemento de división de documento HTML) es el contenedor genérico para el contenido de flujo, 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 atributo, como lang. Debe usarse solo cuando ningún otro elemento semántico (como <article>o <nav>) sea apropiado.
Respuestas:
<section>significa que el contenido en el 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 las que encuentre en susclass,langytitleatributos.Entonces no: el uso de a
<div>no define una sección en HTML.De la especificación:
<section>( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
fuente
sectionvs.div, incluso a la luz de esta respuesta, he llegado a la conclusión de que son exactamente el mismo elemento. El W3C dice que undiv"representa a sus hijos". Bueno, ¿no es eso también lo que hace elsectionelemento? Sí,sectionimplica que sus hijos están agrupados, pero por el solo hecho de poner a los niños dentro de adiv, también los está agrupando . Al menos de la forma en que lo hago, no sé ustedes.sectionvs.div" - no pienses demasiado en ello. HTML no es complicado. “Por el solo hecho de poner a los niños dentro de adiv, también los está agrupando ”. No según la especificación HTML que no eres. Los está envolviendo en undivdiseño, conveniencia de JavaScript u otra cosa que el W3C aún no ha pensado, pero no indica a los lectores que los elementos secundarios son un grupo.<p>This is a paragraph</p>o<h2>This is a second-level heading</h2>. Debido a que<div>no agrega significado, solo lo usaría si no hay otro elemento HTML que agregue el significado apropiado al texto en cuestión.<section>marca una sección ,<div>marca un bloque genérico sin semántica asociada.fuente
<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 nada inherentemente. Se puede usar para agrupar elementos con fines de estilo (usando los atributos de clase o id), o porque comparten valores de atributo, como lang. Debe usarse solo 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, generalmente con un encabezado.La ronda 2
<div>:Soporte de navegador<section>:Soporte de navegadorLos 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 también es relevante para la semántica y, en un futuro cercano, para la indexación por motores de búsqueda.
fuente
Solo una observación: no he encontrado ninguna documentación que corrobore esto
Si una sección contiene otra sección, se muestra un encabezado h1 en la sección interna en una fuente más pequeña que un encabezado h1 en la sección externa. Cuando se usa div en lugar de sección, el encabezado div h1 se muestra como h1.
- el encabezado de Nivel2 se muestra en una fuente más pequeña que el encabezado de Nivel1.
Cuando se usa css para colorear el encabezado h1, los h1 internos también se colorearon (se comporta como h1 normal). Es el mismo comportamiento en Firefox 18, IE 10 y Chrome 28.
fuente
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.fuente
Tenga cuidado de no usar en exceso 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:
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 principal de su página. Por supuesto, los encabezados y pies de página a menudo son comunes en cientos, si no miles de páginas dentro de un sitio web. La etiqueta de la sección debe limitarse para explicar dónde está contenido el contenido único. Dentro de la etiqueta de sección , deberíamos continuar marcando y controlando el contenido con etiquetas HTML que son más bajas 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 múltiples. Tenga en cuenta también que hay otras etiquetas HTML5 interesantes que son similares a la sección . Considere usar el artículo , resumen , a un lado y otros dentro de su flujo de documentos. Como puede ver, estas etiquetas mejoran aún más nuestra capacidad para definir las principales regiones del documento HTML.
fuente
mainetiqueta allí, y dentro de ella, una o mássectionetiquetas.<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 encabezado (título) y quizás también un pie de página. Es una porción de contenido relacionado, como una subsección de un artículo largo, una parte importante de la página (por ejemplo, la sección de noticias en la página de inicio) o una página en la interfaz con pestañas de una aplicación web. (W3C: Marcado, WhatWG)Mi sugerencia: div: utilizó una versión inferior (creo que 4.01 a todavía) elemento html (muchos diseñadores manejaron eso). sección: elemento html que viene recientemente (html5).
fuente
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 de motores de búsqueda. La etiqueta de sección también facilita el análisis html. Para más información, consulte. http://blog.whatwg.org/is-not-just-a-semantic
fuente
El uso
<section>puede ser más ordenado , ayuda a los lectores de pantalla y SEO, mientras que<div>es más pequeño en bytes y más rápido para escribirEn general muy poca diferencia.
Además, no recomendaría poner
<section>un<section>, en su lugar, coloque un<div>dentro de un<section>fuente
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 con un botón y una etiqueta, etc.<article>agrupa los widgets que comparten un propósito.<header>Es título y barra de menú.<footer>es la barra de estadofuente
La
<section>etiqueta define secciones en un documento, como capítulos, encabezados, pies de página o cualquier otra sección del documento.mientras:
La
<div>etiqueta define una división o una sección en un documento HTML.La
<div>etiqueta se usa para agrupar elementos de bloque para formatearlos con CSS.fuente
<header>,<footer>,<nav>,<article>Etc.)<section></section>Referencias
<div></div>Referencias: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div
Aquí hay algunos enlaces que discuten más sobre las diferencias entre ellos:
fuente