Qual'è la differenza tra <section>e <div>in HTML?
Non stiamo definendo sezioni in entrambi i casi?
Risposte:
<section> significa che il contenuto all'interno è raggruppato (vale a dire si riferisce a un singolo tema) e dovrebbe apparire come una voce in una struttura della pagina.
<div>, D'altra parte, non trasmettere alcun significato , a parte qualsiasi trova nella sua class, lange titlegli attributi.
Quindi no: l'uso di a <div>non definisce una sezione in HTML.
Dalle specifiche:
<section>L'
<section>elemento rappresenta una sezione generica di un documento o di un'applicazione. Una sezione, in questo contesto, è un raggruppamento tematico di contenuti. Ciascunosectiondovrebbe essere identificato, in genere includendo un'intestazione (elemento h1-h6) come figlio<section>dell'elemento.Esempi di sezioni sono i capitoli, le varie pagine a schede in una finestra di dialogo a schede o le sezioni numerate di una tesi. La home page di un sito Web potrebbe essere suddivisa in sezioni per un'introduzione, notizie e informazioni di contatto.
...
L'
<section>elemento non è un elemento contenitore generico. Quando un elemento è necessario solo per scopi di stile o per comodità di scripting, gli autori sono incoraggiati a utilizzare l'<div>elemento. Una regola generale è che l'<section>elemento è appropriato solo se il contenuto dell'elemento sarebbe elencato esplicitamente nella struttura del documento.
( https://www.w3.org/TR/html/sections.html#the-section-element )
<div>L'
<div>elemento non ha alcun significato speciale. Rappresenta i suoi figli. Può essere utilizzato con iclass,langetitlegli attributi per marcare semantica comune a un gruppo di elementi consecutivi.Nota: gli autori sono fortemente incoraggiati a vedere l'
<div>elemento come un elemento di ultima istanza, per quando nessun altro elemento è adatto. L'uso di elementi più appropriati invece<div>dell'elemento porta a una migliore accessibilità per i lettori e una più facile manutenibilità per gli autori.
( https://www.w3.org/TR/html/grouping-content.html#the-div-element )
sectionvs. div, anche alla luce di questa risposta, sono giunto alla conclusione che sono esattamente lo stesso elemento. Il W3C afferma che div"rappresenta i suoi figli". Bene, non è anche quello che fa l' sectionelemento? Sì, sectionimplica che i suoi figli sono raggruppati insieme, ma con l'atto stesso di mettere i bambini dentro a div, li stai anche raggruppando . Almeno il modo in cui lo faccio, non so voi ragazzi.
sectionvs. div" - non pensarci troppo. HTML non è complicato. "Con l'atto stesso di mettere i bambini dentro a div, li stai anche raggruppando ." Non secondo le specifiche HTML non lo sei. Li stai avvolgendo in una divper scopi di styling, o convenienza JavaScript, o qualcos'altro che il W3C non ha ancora pensato, ma non indica ai lettori che gli elementi figlio sono un gruppo.
<p>This is a paragraph</p>o <h2>This is a second-level heading</h2>. Poiché <div>non aggiunge alcun significato, lo utilizzeresti solo se non esiste un altro elemento HTML che aggiunge un significato appropriato al testo in questione.
<section>contrassegna una sezione , <div>contrassegna un blocco generico senza semantica associata.
<div> Vs <Section><div>:L' elemento HTML (o HTML Division Division Element) è il contenitore generico per il contenuto del flusso, che non rappresenta intrinsecamente nulla. Può essere utilizzato per raggruppare elementi a scopi di stile (utilizzando gli attributi class o id) o perché condividono valori di attributi, come lang. Dovrebbe essere usato solo quando nessun altro elemento semantico (come <article>o <nav>) è appropriato.
<section>:L' elemento HTML Section ( <section>) rappresenta una sezione generica di un documento, ovvero un raggruppamento tematico di contenuti, in genere con un'intestazione.
<div>: Supporto per il browser
<section>: Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta completamente l'elemento.
In tale ottica, un div è rilevante solo dal punto di vista CSS o DOM, mentre una sezione è rilevante anche per la semantica e, in un prossimo futuro, per l'indicizzazione da parte dei motori di ricerca.
Solo un'osservazione: non ho trovato alcuna documentazione a conferma di ciò
Se una sezione contiene un'altra sezione, un'intestazione h1 nella sezione interna viene visualizzata con un carattere più piccolo di un'intestazione h1 nella sezione esterna. Quando si utilizza div anziché la sezione, l'intestazione div h1 interna viene visualizzata come h1.
<section>
<h1>Level1</h1>
some text
<section>
<h1>Level2</h1>
some more text
</section>
</section>- l'intestazione Level2 - viene visualizzata con un carattere più piccolo dell'intestazione Level1 -.
Quando si utilizza css per colorare l'intestazione h1, anche l'h1 interno è stato colorato (si comporta come h1 normale). È lo stesso comportamento in Firefox 18, IE 10 e Chrome 28.
Nello standard HTML5, l' <section>elemento è definito come un blocco di elementi correlati.
L' <div>elemento è definito come un blocco di elementi figlio.
Fare attenzione a non abusare del tag di sezione in sostituzione di un elemento div . Un tag di sezione dovrebbe definire una regione significativa nel contesto del corpo . Semanticamente, HTML5 ci incoraggia a definire il nostro documento come segue:
<html>
<head></head>
<body>
<header></header>
<section>
<h1></h1>
<div>
<span></span>
</div>
<div></div>
</section>
<footer></footer>
</body>
</html>Questa strategia consente ai robot Web e agli screen reader automatizzati di comprendere meglio il flusso dei tuoi contenuti. Questo markup definisce chiaramente dove è contenuto il contenuto della tua pagina principale. Naturalmente, le intestazioni e i piè di pagina sono spesso comuni su centinaia se non migliaia di pagine all'interno di un sito Web. Il tag della sezione dovrebbe essere limitato per spiegare dove è contenuto il contenuto unico. All'interno del tag di sezione , dovremmo quindi continuare a eseguire il markup e controllare il contenuto con tag HTML che sono inferiori nella gerarchia, come h1 , div , span , ecc.
Nella maggior parte delle pagine semplici, dovrebbe esserci un solo tag di sezione , non più tag. Tieni inoltre presente che esistono altri tag HTML5 interessanti simili alla sezione . Prendi in considerazione l'utilizzo di articoli , riepiloghi , a parte e altri all'interno del flusso di documenti. Come puoi vedere, questi tag migliorano ulteriormente la nostra capacità di definire le principali aree del documento HTML.
maintag lì dentro, e al suo interno, uno o più sectiontag.
<div>—Il contenitore del flusso generico che tutti conosciamo e amiamo. È un elemento a livello di blocco senza alcun significato semantico aggiuntivo (W3C: Markup, WhatWG)
<section>—Un documento generico o sezione dell'applicazione. A normalmente ha un titolo (titolo) e forse anche un piè di pagina. È un pezzo di contenuto correlato, come una sottosezione di un lungo articolo, una parte importante della pagina (ad esempio la sezione delle notizie sulla homepage) o una pagina nell'interfaccia a schede di una webapp. (W3C: Markup, WhatWG)
Il mio consiglio: div: usato la versione inferiore (penso ancora 4.01) elemento html (molti designer lo hanno gestito). sezione: elemento html recentemente in arrivo (html5).
Il tag di sezione fornisce una sintassi più semantica per HTML. div è un tag generico per una sezione. Quando si utilizza il tag di sezione per il contenuto appropriato, può essere utilizzato anche per l'ottimizzazione dei motori di ricerca. il tag di sezione semplifica anche l'analisi del codice HTML. per maggiori informazioni, consultare. http://blog.whatwg.org/is-not-just-a-semantic
Ecco un suggerimento su come distinguo un paio di elementi html5 recenti nel caso di un'applicazione web (puramente soggettiva).
<section>contrassegna un widget in un'interfaccia utente grafica, mentre <div>è il contenitore dei componenti di un widget come un contenitore che contiene un pulsante, un'etichetta ecc.
<article> raggruppa widget che condividono uno scopo.
<header> è titolo e barra dei menu.
<footer> è la barra di stato.
Il <section>tag definisce le sezioni di un documento, ad esempio capitoli, intestazioni, piè di pagina o qualsiasi altra sezione del documento.
mentre:
Il <div>tag definisce una divisione o una sezione in un documento HTML.
Il <div>tag viene utilizzato per raggruppare elementi a blocchi per formattarli con CSS.
<header>, <footer>, <nav>, <article>Etc.)
<section></section>
L'
<section>elemento HTML rappresenta una sezione generica di un documento, ovvero un raggruppamento tematico di contenuti, in genere con un'intestazione. Ciascuno<section>dovrebbe essere identificato, in genere includendo un'intestazione (<h1>-<h6>element) come figlio<section>dell'elemento. Per dettagli Si prega di seguire il link.
Riferimenti :
<div></div>
L'
<div>elemento HTML (o HTML Division Division Element) è il contenitore generico per il contenuto del flusso, che non rappresenta intrinsecamente nulla. Può essere utilizzato per raggruppare elementi a scopi di stile (utilizzando gli attributi class o id) o perché condividono valori di attributi, come lang. Dovrebbe essere usato solo quando nessun altro elemento semantico (come<article>o<nav>) è appropriato.
Riferimenti: - http://www.w3schools.com/tags/tag_div.asp - https://developer.mozilla.org/en/docs/Web/HTML/Element/div
Ecco alcuni link che discutono di più sulle differenze tra loro: