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