W3docs
it
Accedi

Tag HTML <main>

Il tag definisce il contenuto principale del documento in HTML5. Descrizione, attributi ed esempi del tag.

Il tag <main> è un elemento a livello di blocco introdotto nella specifica HTML5. Racchiude il contenuto dominante dell'elemento <body> del documento — il contenuto specifico di quel documento e non ripetuto nelle altre pagine del sito, come l'intestazione del sito, il menu di navigazione, la barra laterale, il campo di ricerca o il piè di pagina.

Questa pagina illustra a cosa serve <main>, come si inserisce in una struttura documentale completa insieme a <header>, <nav> e <footer>, come abilita i link "salta al contenuto" e le regole sull'utilizzo di più di un elemento <main> in una pagina.

Dove <main> può e non può essere inserito

L'elemento <main> non deve essere collocato all'interno di un elemento <article>, <aside>, <footer>, <header> o <nav> — <main> è una regione di primo livello, quindi quei contenitori non si applicano a esso.

Questo elemento fa parte dell'albero del DOM ma è escluso dalla struttura del documento, a differenza degli elementi di intestazione come <h1> a <h6>, che vi contribuiscono.

Accessibilità e il landmark main

<main> rappresenta il landmark ARIA main. Le tecnologie assistive come gli screen reader espongono i landmark in modo che gli utenti possano passare direttamente alle aree principali di una pagina. È preferibile usare l'elemento <main> anziché aggiungere role="main" a un elemento generico come <div>, poiché <main> porta quel ruolo implicitamente.

Dovrebbe esserci esattamente un landmark main per pagina. Gli utenti che usano la tastiera e gli screen reader possono anche saltare i contenuti ripetuti (navigazione, banner, annunci) tramite la tecnica "salta la navigazione". Se si assegna un id all'elemento <main>, quell'id diventa la destinazione di un link di salto — vedere l'esempio di seguito.

Sintassi

Il tag <main> va in coppia. Il contenuto viene scritto tra il tag di apertura (<main>) e quello di chiusura (</main>).

Esempio del tag HTML <main>:

Tag HTML <main>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <main>
      <h1>Programming languages</h1>
      <p>
        Languages HTML and CSS are intended for site layout.
      </p>
      <article>
        <h2>HTML</h2>
        <p>
          HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
        </p>
        <p>... </p>
        <p>... </p>
      </article>
      <article>
        <h2>CSS</h2>
        <p>
          CSS is a language of styles, defining the display of HTML documents.
        </p>
        <p>... </p>
      </article>
    </main>
  </body>
</html>
Provalo tu stesso »

<main> in una struttura documentale completa

In una pagina reale, <main> si affianca agli altri elementi landmark. L'intestazione, la navigazione e il piè di pagina sono ripetuti in tutte le pagine, quindi rimangono fuori da <main>; solo il contenuto specifico della pagina va al suo interno.

<!DOCTYPE html>
<html>
  <head>
    <title>Programming languages</title>
  </head>
  <body>
    <header>
      <h1>My Web Tutorials</h1>
    </header>

    <nav>
      <a href="/html">HTML</a> |
      <a href="/css">CSS</a> |
      <a href="/js">JavaScript</a>
    </nav>

    <main>
      <h2>Programming languages</h2>
      <p>HTML and CSS are intended for site layout.</p>
    </main>

    <footer>
      <p>&copy; 2026 My Web Tutorials</p>
    </footer>
  </body>
</html>
Result

Un link di salto permette agli utenti che usano la tastiera e gli screen reader di saltare direttamente la navigazione ripetuta. Abbinare l'href del link all'id dell'elemento <main>:

<body>
  <a href="#main-content">Skip to main content</a>

  <header>
    <h1>My Web Tutorials</h1>
  </header>
  <nav>
    <a href="/html">HTML</a> |
    <a href="/css">CSS</a>
  </nav>

  <main id="main-content">
    <h2>Programming languages</h2>
    <p>HTML and CSS are intended for site layout.</p>
  </main>
</body>

Attivando il link, il focus si sposta su #main-content, quindi l'utente approda direttamente sul contenuto principale della pagina.

Utilizzare più di un elemento <main> con l'attributo hidden

Una pagina può contenere solo un elemento <main> visibile. Eventuali ulteriori elementi <main> devono avere l'attributo hidden. Ciò è utile nelle applicazioni a pagina singola (SPA), dove più "viste" esistono nel DOM contemporaneamente ma viene mostrata solo la vista attiva:

<main>
  <h2>Home view</h2>
  <p>This view is visible.</p>
</main>

<main hidden>
  <h2>Settings view</h2>
  <p>This view is in the DOM but hidden until activated.</p>
</main>

Quando l'utente cambia vista, lo script scambia l'attributo hidden in modo che esattamente un elemento <main> sia visibile in qualsiasi momento.

Attributi

Il tag <main> supporta gli Attributi Globali e gli Attributi di Evento.

Applicare stili all'elemento <main>

<main> è semplicemente un contenitore strutturale, quindi va stilizzato come qualsiasi elemento a blocco. Poiché contiene il contenuto principale della pagina, è il posto naturale in cui impostare la larghezza complessiva di lettura, il padding e la spaziatura:

main {
  display: block;       /* ensures block layout in older browsers */
  max-width: 800px;
  margin: 0 auto;       /* center the content column */
  padding: 20px;
  background-color: #f9f9f9;
}

Esercitazione

Pratica
Qual è il significato e l'utilizzo dell'elemento main in HTML? (Seleziona tutte le risposte applicabili.)
Qual è il significato e l'utilizzo dell'elemento main in HTML? (Seleziona tutte le risposte applicabili.)
Was this page helpful?