HTML - Blocchi

Tutti gli elementi possono essere categorizzati in (a) Elementi Livello Blocco (b) Elemeni Inline

Elementi Blocco

Gli elementi Blocco vengono mostrati come se ci fosse un interrutore di linea sia prima che dopo di loro. Come accade per gli elementi <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, e <address> che sono appunto elementi di livello Blocco. Tutti loro iniziano in una nuova riga, e tutto ciò che segue andrà nella riga successiva.

Elementi Inline

Gli elementi Inline. Inline elements, in pratica possono apparire all'interno di frasi senza andare in una nuova riga. Degli esempi di elementi inline sono gli elementi <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, e <var>.

Raggruppare Elementi HTML

Ci sono due importanti tag che vengono usati molto frequentemente per raggruppare gli altri tags HTML, e sono (i) il tag <div> ed (ii) il tag <span>

Il tag <div>

È un tag di livello blocco molto importante in quanto gioca un ruolo fondamentale nel raggruppare gli altri tag HTML e applicare CSS a gruppi di elementi. Il tag <div> inoltre può essere usato per creare il layout di una pagina web definendo le diverse parti ( Sinistra, Destra, Superiore, ecc). Questo tag di per se non effettua nessun cambiamento grafico nel blocco, ma ha molto più senso quando viene utilizzato con i CSS.

Esempio

A seguire un semplice esempio di utilizzo del tag <div>. Impareremo il Cascading Style Sheet (CSS) in un capitolo separato, adesso lo useremo semplicemente per mostrare l'utilizzo del tag &<div>:

<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>

<!-- First group of tags -->
<div style="color:red">
   <h4>This is first group</h4>
   <p>Following is a list of vegetables</p>
   <ul>
   <li>Beetroot</li>
   <li>Ginger</li>
   <li>Potato</li>
   <li>Radish</li>
   </ul>
</div>

<!-- Second group of tags -->
<div style="color:green">
   <h4>This is second group</h4>
   <p>Following is a list of fruits</p>
   <ul>
   <li>Apple</li>
   <li>Banana</li>
   <li>Mango</li>
   <li>Strawberry</li>
   </ul>
</div>

</body>
</html>

Produrrà il seguente risultato:

This is first group

Following is a list of vegetables

  • Beetroot
  • Ginger
  • Potato
  • Radish

This is second group

Following is a list of fruits

  • Apple
  • Banana
  • Mango
  • Strawberry

Il tag <span>

Il tag HTML <span> è un elemento inline e può essere utilizzato per raggruppare diversi elementi inline all' interno di un documento HTML. Anche questo tag di per se non effettua nessun cambiamento grafico, ma si rende utile abbinato ad un CSS.

La differenza fra il tag div e il tag span è che il tag div viene usato con elementi di livello blocco mentre il tag span viene usato con gli elementi inline (ossia nella stessa riga).

Esempio

A seguire un semplice esempio di utilizzo del tag <span>. Impareremo il Cascading Style Sheet (CSS) in un capitolo separato, adesso lo useremo semplicemente per mostrare l'utilizzo del tag <span>:

<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>

<p>This is <span style="color:red">red</span> and this is <span style="color:green">green</span></p>

</body>
</html>

Produrrà il seguente risultato:

This is red, and this is green

Advertisements