Elementi Block e Inline in HTML

Ogni elemento HTML visibile viene reso dal browser come un riquadro block oppure inline. I riquadri block si impilano verticalmente e occupano tutta la larghezza disponibile; i riquadri inline scorrono orizzontalmente all'interno di una riga di testo, come le parole di una frase. Comprendere questa distinzione è essenziale per controllare il layout della pagina.

È importante sapere che "block" e "inline" non sono categorie HTML fisse — descrivono come un elemento viene renderizzato per impostazione predefinita. L'HTML5 moderno raggruppa gli elementi per categorie di contenuto (flow content, phrasing content, ecc.), mentre la distinzione block-vs-inline è in realtà un concetto CSS controllato dalla proprietà display. Ciò significa che il comportamento predefinito di qualsiasi elemento può essere sovrascritto: uno <span> può essere fatto comportare come un block, e un <div> come inline.

Vedi anche: Proprietà CSS display · Tag <div> · Tag <span>

Questa pagina tratta cosa sono gli elementi block-level e inline, l'elenco completo di ciascuno, come display consente di cambiare il valore predefinito, la fondamentale regola di annidamento e quando usare <div> rispetto a <span>.

Elementi Block-level

Un elemento block-level è un elemento HTML che inizia su una nuova riga e occupa tutta la larghezza orizzontale disponibile del suo elemento padre. Questo tipo di elemento crea blocchi di contenuto (paragrafi, divisioni di pagina). La maggior parte degli elementi HTML sono elementi block-level.

Gli elementi block-level vengono utilizzati all'interno del corpo di un documento HTML e possono contenere elementi inline o altri elementi block-level.

Esempio di elemento block-level:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>This is a block-level element. It starts on a new line and takes up the full width.</div>
    <p>This is another block-level element. It also starts on a new line.</p>
  </body>
</html>

Provalo tu stesso »

Elementi block-level:
`<address>`
`<canvas>`
`<dt>`
`<footer>`
`<hr>`
`<noscript>`
`<pre>`
`<ul>`

Elementi Inline

A differenza degli elementi block-level, gli elementi inline non iniziano su una nuova riga. Cominciano all'interno di una riga e occupano solo la larghezza strettamente necessaria. Gli elementi inline fanno parte del testo principale.

Gli elementi inline contengono comunemente altri elementi inline, oppure possono essere vuoti.

Esempio di elemento inline:

Qui un <img> si trova accanto a un paragrafo, e un elemento inline <a> scorre all'interno del testo senza interrompere la riga:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Heading </h1>
    <p>This is Aleq's photo</p>
    <img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Provalo tu stesso »

Per vedere chiaramente il flusso inline, inserire uno <span> nel mezzo di una frase. Poiché <span> è inline, il testo continua sulla stessa riga e solo il contenuto dello span viene modificato:

<p>The total price is
  <span style="color: red; font-weight: bold;">$49.99</span>
  including tax.</p>

Il $49.99 stilizzato rimane nella riga del testo corrente — nulla va a capo su una nuova riga.

Elementi inline:
`<a>`
`<br>`
`<data>`
`<i>`
`<kbd>`
`<output>`
`<script>`
`<strong>`
`<time>`

Modificare la Visualizzazione con CSS

Poiché block e inline sono comportamenti di rendering, è possibile cambiarli tramite la proprietà CSS display. Questo è uno dei motivi più comuni per utilizzare display.

Nell'esempio seguente, uno <span> viene forzato a renderizzarsi come block (quindi inizia su una nuova riga e occupa tutta la larghezza), e un <div> viene forzato a renderizzarsi inline (quindi si inserisce nel flusso del testo):

<!DOCTYPE html>
<html>
  <head>
    <style>
      span.as-block {
        display: block;
        background: #e0f7fa;
      }
      div.as-inline {
        display: inline;
        background: #ffecb3;
      }
    </style>
  </head>
  <body>
    <span class="as-block">I am a span behaving like a block.</span>
    <p>Text before <div class="as-inline">a div behaving inline</div> text after.</p>
  </body>
</html>

display: inline-block

Esiste un terzo valore utile, display: inline-block. Scorre insieme ad altri contenuti come un elemento inline, ma rispetta anche width, height e i margin/padding superiori/inferiori come un elemento block — il meglio di entrambi i mondi.

Un caso d'uso classico è una barra di navigazione orizzontale o una fila di pulsanti che richiedono una larghezza e un padding definiti pur rimanendo affiancati:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .btn {
        display: inline-block;
        width: 120px;
        padding: 10px 0;
        margin: 4px;
        text-align: center;
        background: #2196f3;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <a class="btn" href="#">Home</a>
    <a class="btn" href="#">About</a>
    <a class="btn" href="#">Contact</a>
  </body>
</html>

Ogni link mantiene la propria width e il proprio padding (comportamento block) pur allineandosi orizzontalmente (comportamento inline).

Regola di Annidamento: Block all'Interno di Inline Non è Consentito

Una regola fondamentale dell'HTML: un elemento block-level non deve essere inserito all'interno di un elemento inline. Ad esempio, uno <span> (inline) non deve racchiudere un <div> (block). In questo modo si produce HTML non valido, e i browser potrebbero "correggere" il markup in modi inaspettati.

Non valido — un <div> block all'interno di uno <span> inline:

<!-- Invalid: do not put a block element inside an inline element -->
<span>
  <div>This block must not be here.</div>
</span>

Valido — mantenere lo <span> inline all'interno del <div> block:

<!-- Valid: an inline element nested inside a block element -->
<div>
  <span>This inline element belongs here.</span>
</div>

La direzione inversa (inline all'interno di block) è sempre corretta. Quando si ha bisogno di un contenitore block, utilizzare un elemento block come <div>, non <span>. Nota: i link costituiscono un caso speciale — da HTML5 in poi, un elemento <a> può racchiudere contenuti block.

div vs span: Contenitori Generici

Quando nessun elemento esistente è adatto, HTML offre due elementi "wrapper" generici e privi di significato semantico a cui si ricorre costantemente:

<div> — un contenitore block-level generico. Usarlo per raggruppare sezioni più ampie di contenuto per il layout o lo stile (una card, una barra laterale, una riga).
<span> — un contenitore inline generico. Usarlo per selezionare un piccolo frammento di testo all'interno di una riga, come colorare una singola parola o aggiungere un tooltip.

Una semplice regola pratica: se si raggruppano interi blocchi della pagina, scegliere <div>; se si vuole contrassegnare un frammento all'interno del testo corrente, scegliere <span>.

<!-- div: groups a block section -->
<div class="card">
  <h2>Welcome</h2>
  <p>Hello, <span class="username">Aleq</span>!</p>
</div>

Preferire un elemento semantico (<section>, <article>, <nav>, <strong>, <em>, …) quando descrive il contenuto; ricorrere a <div>/<span> solo quando non esiste nulla di più significativo.

Pratica

Quale affermazione sugli elementi block e inline in HTML è corretta?

Che un elemento venga renderizzato come block o inline è controllato dalla proprietà CSS display e può essere modificato.Un elemento block come div può essere inserito all'interno di uno span inline senza produrre HTML non valido.L'elemento span è un contenitore block-level generico usato per raggruppare grandi sezioni di una pagina.Impostare display su inline-block rimuove la capacità di un elemento di rispettare width e height.