This article is currently in the process of being translated into Italian (~99% done).
Block & Inline elements
Abbiamo visto alcuni degli elementi in HTML5 di cui è composta una pagina web ed ora è arrivato il momento di introdurre un'altra proprietà degli elementi HTML5. Ne esistono di due tipi differenti: inline elements (elementi in linea) e block elements (elementi di blocco). Adottare uno o l'altro tipo influenzerà il modo in cui il browser eseguirà il rendering dell'elemento stesso.
Elementi block
Un block element viene interpretato, come indica il suo nome, come un reale blocco. Il block element è il più ampio, un rettangolo che non si interrompe ed in cui larghezza e altezza possono essere regolati. I block element possono contenere elementi inline ed altri elementi di blocco.
Elementi Inline
Gli elementi inline vengono trattati come parte del flusso del documento e le loro dimensioni di norma non vengono modificate manualmente. Solo gli elementi inline possono essere contenuti in inline element. E per confonderci ancora di più, gli elementi inline sono gli unici che possono essere contenuti all'interno di un elemento paragrafo, anche se il tag <p> è un elemento di tipo block.
L'elemento <p></p> è di tipo block, mentre il tag <p></p> è inline. (b sta per grassetto e cambia l'aspetto del testo).
Esempi
L'elemento block che viene utilizzato di più è il <div>. (Div è un'abbreviazione di Division). L'elemento <div> è un blocco utilizzato per separare i diversi tipi di contenuto nella tua pagina. Immagina di avere due gruppi di contenuto nella pagina, costituiti da un titolo, il tuo nome e la data di pubblicazione. Potrebbe assomigliare al seguente:
Solo un altro giorno
Scritto da Christina
l'11 gennaio
Questo è il mio secondo gruppo e volevo solo metterti alla prova
Il mio primo blocco
Scritto da Christina
Il 10 gennaio
Sono così felice di scrivere il mio primo gruppo!
Come puoi vedere, ci sono due gruppi e li abbiamo divisi usando l'elemento block. In questo caso abbiamo scelto un <div>. All'interno del blocco c'è un altro elemento block, il paragrafo (<p>). Usando solo il markup essenziale, l'HTML della tua pagina potrebbe essere simile a questo:
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<div>
<p>Just Another Day<br />
Written by Christina<br />
On January 11th
</p>
<p>This is my second blog entry, and I just wanted to check in on you
</p>
</div>
<div>
<p>My First Blog Entry<br />
Written by Christina<br />
On January 10th
</p>
<p>
I’m so happy to write my first blog entry – yay!
</p>
<div>
</body>
</html>Gli elementi <div> vengono utilizzati per separare le due voci del blog. All'interno di ogni elemento <div> ci sono due paragrafi consistenti in Titolo & Autore & Data e la voce vera e propria.
L'elemento <div> viene usato spesso come un contenitore ed è in grado di formattare la pagina web in qualsiasi punto lo desideri. Il limite è che gli elementi <div> non ti dicono nulla sul contenuto. Il browser sa di aver trovato una sezione separata, ma non di quale tipo. In HTML5 sono stati introdotti molti e nuovi elementi ed alcuni di questi sostituiscono l'uso del <div>. Per saperne di più, dai uno sguardo agli articoli sui nuovi elementi semantici da inserire nel markup.
Ho già parlato in precedenza degli elementi di nidificazione ed il fatto che gli elementi <p> si trovino all'interno del tag <div>. Questo è un esempio di nidificazione.
Cosa hai imparato
- Gli elementi di blocco (block) assomigliano a dei quadrati
- Gli elementi inline non hanno interruzioni di linea associate agli stessi
- Puoi nidificare gli elementi block all'interno di altri elementi dello stesso tipo
- Tuttavia non puoi annidare elementi di tipo block all'interno di quelli di tipo inline
- Il paragrafo è l'unico elemento block che deve contenere solo elementi inline
- Gli elementi <div> vengono usati attualmente come dei contenitori, ma i nuovi tag HTML5 cambieranno tutto
