W3docs
it
Accedi

Elementi HTML

Scopri cosa sono gli elementi HTML: elementi accoppiati vs vuoti (void), elementi block-level vs inline e come annidarli, con esempi eseguibili.

Gli elementi sono i fondamenti dell'HyperText Markup Language (HTML). Ogni documento HTML è composto da elementi specificati tramite i tag.

Gli elementi HTML e i tag HTML vengono spesso confusi. I tag vengono utilizzati per aprire e chiudere l'oggetto, mentre l'elemento include sia i tag che il suo contenuto. Consideriamo un esempio con il tag <h1>: <h1> Titolo del documento </h1> - è un elemento, mentre <h1>, </h1> - sono i tag.

Gli attributi di un elemento vengono scritti nel suo tag di apertura — consulta Attributi HTML per scoprire come aggiungono informazioni extra.

Tipi di elementi HTML

Gli elementi HTML si presentano in due forme: elementi accoppiati ed elementi vuoti (void).

Un elemento accoppiato ha un tag di apertura (<tag>) e un corrispondente tag di chiusura (</tag>), e il contenuto dell'elemento si trova tra di essi. Ad esempio, <p>Hello</p> è composto dal tag di apertura <p>, dal testo Hello e dal tag di chiusura </p>.

Suggerimento

Non dimenticare il tag di chiusura! Anche se alcuni elementi HTML vengono visualizzati correttamente anche senza il tag di chiusura, non fare affidamento su questo. Potrebbe portare a risultati inattesi o errori.

Esempio di elementi HTML accoppiati:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Title of the document</h1>
    <p>The first paragraph</p>
    <p>The second paragraph, <br /> where line break is inserted </p>
  </body>
</html>
Provalo tu stesso »

Nell'esempio sopra abbiamo utilizzato 4 elementi accoppiati:

  • l'elemento <html>, che include tutti gli altri elementi HTML della pagina web,
  • l'elemento <body>, che contiene il corpo della pagina web,
  • l'elemento <p>, che definisce un paragrafo,
  • l'elemento <h1>, che contiene il titolo della pagina web.

Abbiamo anche utilizzato il tag vuoto <br> per inserire un'interruzione di riga.

Elementi HTML vuoti

Gli elementi vuoti (chiamati anche elementi void) non hanno contenuto e quindi non hanno un tag di chiusura. L'elemento <br>, che inserisce un'interruzione di riga, è un buon esempio. In XHTML gli elementi vuoti sono "auto-chiusi" nel tag di apertura in questo modo: <br/>.

Gli elementi vuoti in HTML sono: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> e <wbr>.

Informazione

Il vecchio elemento <keygen> era anch'esso un elemento vuoto, ma è stato rimosso dallo standard HTML e non dovrebbe più essere utilizzato.

Essere "vuoti" si riferisce solo all'assenza di contenuto — non dice nulla riguardo al layout. Alcuni elementi vuoti sono block-level (ad esempio, <hr> disegna una riga orizzontale a piena larghezza), mentre altri sono inline (ad esempio, <br> e <img>).

Esempio del tag HTML <br>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>HTML &lt;br&gt; tag</h1>
    <p>This tag <br /> defines a line break.</p>
  </body>
</html>
Provalo tu stesso »

Elementi HTML block-level e inline

Ai fini dello stile e del layout, la maggior parte degli elementi HTML rientra in una di due categorie in base al valore predefinito di display: elementi block-level ed elementi inline. Questo comportamento predefinito è importante perché controlla tre aspetti prima ancora di scrivere qualsiasi CSS:

  • Flusso: gli elementi block-level iniziano su una nuova riga e si impilano verticalmente; gli elementi inline si affiancano all'interno di una riga di testo.
  • Larghezza e box model: un elemento block-level occupa tutta la larghezza disponibile e rispetta le proprietà width, height e margin/padding verticale. Un elemento inline occupa solo la larghezza del suo contenuto e ignora width/height e i margini verticali.
  • Annidamento: un elemento block-level può contenere altri elementi block-level e inline, ma un elemento inline dovrebbe generalmente contenere solo altri elementi inline (e testo), non elementi block-level.

Puoi modificare la categoria predefinita di un elemento con la proprietà CSS display, ma conoscere il valore predefinito ti aiuta a prevedere come verrà strutturata una pagina. Per un approfondimento, consulta Elementi HTML Block e Inline.

Gli elementi block-level strutturano la parte principale della tua pagina web dividendo il contenuto in blocchi coerenti. Iniziano sempre su una nuova riga, occupano tutta la larghezza disponibile e presentano un'interruzione di riga prima e dopo l'elemento.

Gli elementi block-level sono: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> e <video>.

Tutti gli elementi block-level hanno tag di apertura e di chiusura.

Esempio di elementi HTML block-level:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <footer>
      <p>Author: W3docs team</p>
      <p><a href="[email protected]">Send message to the author</a>.</p>
    </footer>
  </body>
</html>
Provalo tu stesso »

Nell'esempio abbiamo utilizzato l'elemento block-level <footer> per definire il piè di pagina della pagina web e il suo contenuto.

Gli elementi inline vengono utilizzati per distinguere una parte di testo, per attribuirle una funzione o un significato particolare. Gli elementi inline di solito comprendono una singola parola o poche parole. Non causano un'interruzione di riga e non occupano tutta la larghezza della pagina, ma solo lo spazio delimitato dal loro contenuto. Gli elementi inline vengono solitamente usati all'interno di altri elementi HTML.

Gli elementi inline sono: <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time> e <var>.

Informazione

Gli elementi <acronym>, <big> e <tt> erano anch'essi elementi inline, ma sono ormai obsoleti. Usa <abbr> al posto di <acronym>, e usa CSS al posto di <big> e <tt>.

Elementi HTML annidati

Gli elementi HTML possono contenere altri elementi, ovvero essere annidati. Ad esempio, se vuoi dare a un testo un'enfasi forte e indicare al browser di visualizzarlo in grassetto, puoi usare il tag <strong> annidato nel tag <p>.

Esempio di elementi HTML annidati:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Title of the document</h1>
    <p>The first paragraph</p>
    <p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
  </body>
</html>
Provalo tu stesso »
Suggerimento

I tag HTML devono essere "annidati" nel corretto ordine, il che significa che il tag aperto più di recente è sempre il successivo ad essere chiuso.

Nel nostro esempio, abbiamo chiuso prima il tag <strong> e poi il tag <p>.

Esercitati

Pratica
Quale affermazione sugli elementi HTML è corretta? (Seleziona tutte le risposte applicabili.)
Quale affermazione sugli elementi HTML è corretta? (Seleziona tutte le risposte applicabili.)
Was this page helpful?