html5 - poner - etiqueta article y section

¿Cuál es la diferencia entre<sección> y<div>? (12)

`<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.

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

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.

El uso de <section> puede ser más ordenado , ayudar a los lectores de pantalla y SEO mientras que <div> es más pequeño en bytes y más rápido de escribir

En general muy poca diferencia.

Además, no recomendaría poner <section> en una <section> , en lugar de colocar una <div> dentro de una <section>

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.

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

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.

<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. Un normalmente tiene un encabezado (título) y tal vez un pie de página también. Es una parte del 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: Markup, WhatWG)

Mi sugerencia: div: usé la versión inferior (creo que 4.01 para aún) elemento html (muchos diseñadores lo manejaron). sección: elemento html que viene recientemente (html5).

<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 )

<section></section>

El elemento HTML <section> representa una sección genérica de un documento, es decir, una agrupación temática de contenido, normalmente con un encabezado. Cada <section> debe identificarse, generalmente incluyendo un encabezado (elemento <h1> - <h6> ) como elemento secundario del elemento <section> . Para más detalles por favor siguiente enlace.

Referencias:

<div></div>

El elemento HTML <div> (o Elemento de división de documento HTML) es el contenedor genérico para el contenido de flujo, que no representa nada de manera inherente. 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.

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: