¿Cuál es la diferencia entre <sección> y <div>?
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 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 unosectiondebe 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.
( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>
El
<div>elemento no tiene ningún significado especial en absoluto. Representa a sus hijos. Puede ser utilizado con losclass,langytitleatributos 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.
( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
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.
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.
<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.
<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.
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.
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.
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:
<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 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.
mainetiqueta allí, y dentro de ella, una o más sectionetiquetas.
<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
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 escribir
En general muy poca diferencia.
Además, no recomendaría poner <section>un <section>, en su lugar, coloque un <div>dentro de un<section>
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 estado
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.
<header>, <footer>, <nav>, <article>Etc.)
<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.
Referencias
- http://www.w3schools.com/tags/tag_section.asp
- https://developer.mozilla.org/en/docs/Web/HTML/Element/section
<div></div>
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.
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: