Elementi Block e Inline in HTML

Ogni elemento HTML ha un valore di visualizzazione predefinito, a seconda del tipo di elemento che è.

Ci sono due valori di visualizzazione: blocco (block) e inline.

Elementi a blocco

Un elemento a blocco inizia sempre su una nuova riga e i browser aggiungono automaticamente uno spazio (un margine) prima e dopo l’elemento.

Un elemento a blocco occupa sempre l’intera larghezza disponibile (si estende a sinistra e a destra quanto possibile).

Due elementi a blocco comunemente utilizzati sono: <p> e <div>.

L’elemento <p> definisce un paragrafo in un documento HTML.

L’elemento <div> definisce una divisione o una sezione in un documento HTML.

<p>Ciao, mondo</p>
<div>Ciao, mondo</div>

Ecco gli elementi a blocco in HTML:

• <address>
• <article>
• <aside>
• <blockquote>
• <canvas>
• <dd>
• <div>
• <dl>
• <dt>
• <fieldset>
• <figcaption>
• <figure>
• <footer>
• <form>
• <h1-h6>
• <header>
• <hr>
• <li>
• <main>
• <nav>
• <noscript>
• <ol>
• <p>
• <pre>
• <section>
• <table>
• <tfoot>
• <ul>
• <video>

Elementi inline

Un elemento inline non inizia su una nuova riga.

Un elemento inline occupa solo la larghezza necessaria.

<span>Ciao, mondo</span> <span>Ciao, mondo</span>

Ecco gli elementi in linea in HTML:

• <a>
• <abbr>
• <acronym>
• <b>
• <bdo>
• <br>
• <button>
• <cite>
• <code>
• <dfn>
• <em>
• <i>
• <img>
• <input>
• <kbd>
• <label>
• <map>
• <object>
• <output>
• <q>
• <samp>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <textarea>
• <time>
• <var>

Elemento <div>

L’elemento <div> viene spesso utilizzato come contenitore per altri elementi HTML.

L’elemento <div> non ha attributi obbligatori, ma style, class e id sono comuni.

Quando usato insieme a CSS, l’elemento <div> può essere utilizzato per stilizzare blocchi di contenuto:

<div style="background-color:black;color:white;padding:20px;">
  <h2>Titolo</h2>
  <p>Questo è un paragrafo dentro un div a cui abbiamo cambiato colore.</p>
</div>

Elemento <span>

L’elemento <span> è un contenitore inline utilizzato per marcare una parte di testo o una parte di un documento.

L’elemento <span> non ha attributi obbligatori, ma style, class e id sono comuni.

Quando usato insieme a CSS, l’elemento <span> può essere utilizzato per stilizzare parti del testo:

<p>
  Il mio colore preferito è il
  <span style="color:blue;font-weight:bold;">blu</span>, mentre il tuo è il
  <span style="color:red;font-weight:bold;">rosso</span>.
</p>