Tag <div> HTML

  • Pagina precedente <dir>
  • Pagina successiva <dl>

Definizione e uso

<div> I tag definiscono la divisione o la parte (sezione o sottosezione, division/section) dei documenti HTML.

<div> I tag possono dividere i documenti in parti indipendenti e diverse. Possono essere utilizzati come strumenti di organizzazione rigorosi e non sono associati a nessun formato.

Qualsiasi tipo di contenuto può essere messo <div> !<div> può essere utilizzato come contenitore per l'elemento HTML, quindi impostare lo stile con CSS o eseguire operazioni con JavaScript all'interno del

se il tag id o class per etichettare <div>se questo tag è disponibile, allora l'effetto del tag sarà più efficace. Utilizzando class o id proprietà, può impostare facilmente <div> etichetta con lo stile.

Attenzione:Di default, il browser imposta sempre lo stile sui <div> mettere un carattere di ritorno a capo prima e dopo l'elemento.

Uso

<div> è un elemento bloccante. Questo significa che il suo contenuto inizia automaticamente una nuova riga. In effetti, il ritorno a capo è <div> formato predefinito univoco. È possibile <div> con class o id a ciascuno di loro.

Non è necessario applicare stili aggiuntivi <div> ma farlo ha anche i suoi vantaggi.

È possibile aggiungere sia la classe che l'id allo stesso <div> Applicazione degli elementi class o id Le proprietà, ma nel caso più comune si applica solo una di esse. La principale differenza tra le due è che la classe viene utilizzata per gruppi di elementi (elementi simili, o che possono essere considerati come un tipo di elemento), mentre l'id viene utilizzato per identificare elementi unici singoli.

Vedere anche:

Lezione HTML:Elementi bloccanti e inline di HTML

Lezione HTML:Layout HTML

Manuale di riferimento HTML DOM:Oggetto Div

Esempio

La parte del <div> che utilizza CSS per impostare lo stile nel documento:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Questo è il titolo all'interno di un elemento div</h2>
  <p>Questo è un testo all'interno di un elemento div.</p>
</div>
</body>
</html>

Prova tu stesso

Caso di studio

<body>
 <h1>Nuovo sito</h1>
  <p>Qualche testo. Qualche testo. Qualche testo...</p>
  ...
 <div class="news">
  <h2>Titolo delle notizie 1</h2>
  <p>Qualche testo. Qualche testo. Qualche testo...</p>
  ...
</div>
 <div class="news">
  <h2>Titolo delle notizie 2</h2>
  <p>Qualche testo. Qualche testo. Qualche testo...</p>
  ...
 </div>
 ...
</body>

Esempio di spiegazione

Come vedete, questo pezzo di HTML simula la struttura di un sito web di notizie. Ogni div combina il titolo e l'abstract di ogni notizia, il che significa che il div aggiunge una struttura aggiuntiva al documento. Allo stesso tempo, poiché questi div appartengono allo stesso tipo di elemento, possono essere identificati con class="news", il che non solo aggiunge un significato appropriato ai div, ma facilita anche la loro formattazione con stili ulteriori, un vero e proprio due in uno.

Suggerimento:Per una comprensione più approfondita dell'uso di class e id, si prega di leggere la sezione 'div, id e altri aiutanti' del capitolo 'Marcatura strutturata di W3school'.

Attributi globali

<div> Il tag supporta anche Attributi globali in HTML.

Attributi eventi

<div> Il tag supporta anche Attributi eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <div> Elemento:

div {
  display: block;
}

Prova tu stesso

Supporto browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto
  • Pagina precedente <dir>
  • Pagina successiva <dl>