HTML
Elemento div

introduzione

Sintassi

• <div>example div</div>

annidamento

È pratica comune posizionare più <div> all'interno di un altro <div> . Questo è solitamente definito come elementi di "nidificazione" e consente di suddividere ulteriormente gli elementi in sottosezioni o di aiutare gli sviluppatori con lo stile CSS.

<div class="outer-div"> è usato per raggruppare due elementi <div class="inner-div"> ; ognuno contenente un elemento <p> .

<div class="outer-div">
  <div class="inner-div">
    <p>This is a paragraph</p>
  </div>
  <div class="inner-div">
    <p>This is another paragraph</p>
  </div>
</div>

Ciò produrrà il seguente risultato (stili CSS applicati per chiarezza):

Nidificazione di elementi inline e di blocco Mentre si annidano gli elementi, è necessario tenere presente che esistono elementi in linea e di blocco. mentre gli elementi di blocco "aggiungono un'interruzione di riga sullo sfondo", ciò significa che gli altri elementi nidificati vengono mostrati automaticamente nella riga successiva, gli elementi in linea possono essere posizionati uno accanto all'altro per impostazione predefinita

Evita nidificazione profonda <div>

Un layout di contenitori nidificati profondi e spesso usati mostra uno stile di codifica errato.

Gli angoli arrotondati o alcune funzioni simili spesso creano un tale codice HTML. Per la maggior parte dei browser di ultima generazione ci sono le controparti CSS3. Cerca di utilizzare il minor numero possibile di elementi HTML per aumentare il contenuto per taggare il rapporto e ridurre il carico della pagina, ottenendo un posizionamento migliore nei motori di ricerca.

sezione div elemento non deve essere nidificato più profondo di 6 livelli.

Utilizzo di base

L'elemento <div> solito non ha un significato semantico specifico di per sé, rappresenta semplicemente una divisione ed è tipicamente usato per raggruppare e incapsulare altri elementi all'interno di un documento HTML e separarli da altri gruppi di contenuti. In quanto tale, ogni <div> è meglio descritto dal suo contenuto.

<div>
  <p>Hello! This is a paragraph.</p>
</div>

L'elemento div è in genere un elemento a livello di blocco , ovvero separa un blocco di un documento HTML e occupa la larghezza massima della pagina. I browser in genere hanno la seguente regola CSS predefinita:

div {
  display: block;
}

È fortemente incoraggiato dal World Wide Web Consortium (W3C) per visualizzare l'elemento div come elemento di ultima istanza, per quando nessun altro elemento è adatto. L'uso di elementi più appropriati anziché l'elemento div consente una migliore accessibilità per i lettori e una più semplice manutenibilità per gli autori.

Ad esempio, un post sul blog verrebbe contrassegnato usando <article> , un capitolo che usa <section> , gli aiuti alla navigazione di una pagina usando <nav> e un gruppo di controlli di form usando <fieldset> .

Gli elementi div possono essere utili per scopi stilistici o per racchiudere più paragrafi all'interno di una sezione che devono essere annotati tutti in un modo simile.