<div>: l'elemento di divisione contenuti

L' elemento HTML <div> è il contenitore generico per il contenuto. Non ha effetto sul contenuto o sul layout fino a quando non viene applicato uno stile in qualche modo usando CSS (ad esempio lo stile viene applicato direttamente ad esso, o una sorta di modello di layout come Flexbox viene applicato al suo elemento genitore).

In quanto contenitore "puro", l'elemento <div> non rappresenta intrinsecamente nulla. Invece, viene utilizzato per raggruppare il contenuto in modo che possa essere facilmente stilizzato utilizzando gli attributi class o id, contrassegnando una sezione di un documento come scritta in una lingua diversa (utilizzando l'attributo lang ) e così via.

Attributi

Nota: l'attributo align è obsoleto; non usarlo più. Invece, dovresti usare le proprietà o le tecniche CSS come CSS Grid o CSS Flexbox per allineare e posizionare gli elementi <div> sulla pagina.

Note d'uso

L'elemento <div> deve essere utilizzato solo quando nessun altro elemento semantico (come <article> o <nav> ) è appropriato.

Problemi di accessibilità

L'elemento <div> ha un ruolo implicito di generic , e non nessuno. Ciò può influire su alcune dichiarazioni di combinazione ARIA che prevedono il corretto funzionamento di un elemento discendente diretto con un determinato ruolo.

Esempi

Un esempio semplice

<div>
  <p>Puoi mettere qualsiasi tipo di contenuto qui.</p>
</div>

Un esempio di stile

Questo esempio crea un riquadro ombreggiato applicando uno stile al <div> usando CSS. Notare l'uso dell'attributo class su <div> per applicare lo stile denominato "shadowbox" all'elemento.

HTML

<div class="shadowbox">
  <p>Ecco una nota molto interessante visualizzata in un
  bel div ombreggiato. </p>
</div>

CSS

.shadowbox {
  width: 15em;
  border: 1px solid #333;
  box-shadow: 8px 8px 5px #444;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}