HTML <body> Tag
Il tag <body> contiene il contenuto visibile di una pagina. Scopri il suo ruolo, le sostituzioni CSS degli attributi deprecati e gli eventi body.
Il tag <body> definisce il contenuto di una pagina web — tutto ciò che il visitatore vede effettivamente, come testo, immagini, link, elenchi, tabelle e moduli. È collocato all'interno dell'elemento <html>, immediatamente dopo l'elemento <head>. Un documento HTML può contenere un solo tag <body>.
Il ruolo di <body> nel documento
Ogni documento HTML è diviso in due parti all'interno dell'elemento radice <html>:
- L'elemento
<head>contiene i metadati relativi alla pagina — il titolo, il set di caratteri, i fogli di stile collegati e gli script. Nulla all'interno del<head>viene visualizzato nell'area della pagina. - Il
<body>contiene il contenuto renderizzato della pagina — la parte che il browser disegna sullo schermo.
Quindi il <body> è l'area del contenuto visibile. Quando si scrive un'intestazione, un paragrafo o un'immagine che deve apparire nella pagina, va inserita all'interno del <body>.
Le classi CSS vengono comunemente aggiunte all'elemento <body>, consentendo a sviluppatori e designer di selezionare facilmente un'intera pagina (ad esempio, una classe theme-dark che ridefinisce lo stile di tutto ciò che si trova sotto di essa). Anche se tali classi non vengono mai utilizzate, non causano alcun problema.
Sintassi
Il tag <body> viene in coppia. Il contenuto viene scritto tra il tag di apertura <body> e quello di chiusura </body>.
Esempio del tag HTML <body>:
Tag HTML <body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<p>Content of the document</p>
</body>
</html>Risultato
Esempio del tag HTML <body> utilizzato con le proprietà CSS color e line-height:
Esempio del tag HTML <body> con le proprietà CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
color: #444444;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>HTML body tag example</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Attributi deprecati
Nel vecchio HTML, il tag <body> includeva attributi presentazionali che impostevano i colori a livello di pagina e l'immagine di sfondo. Questi sono deprecati in HTML5 — non utilizzarli. Ognuno ha un'equivalente CSS:
| Attributo | Valore | Scopo | Equivalente CSS moderno |
|---|---|---|---|
| bgcolor | color | Colore di sfondo della pagina | background-color |
| text | color | Colore del testo predefinito | color |
| background | URL | Immagine di sfondo | background-image |
| link | color | Colore dei link non visitati | a:link { color: … } |
| vlink | color | Colore dei link visitati | a:visited { color: … } |
| alink | color | Colore del link attivo (mentre viene cliccato) | a:active { color: … } |
Il metodo CSS
Invece degli attributi presentazionali, applica lo stile al <body> tramite un foglio di stile. Questo separa il contenuto dalla presentazione e mantiene il markup pulito:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
<style>
body {
background-color: #f5f5f5;
color: #333333;
background-image: url("paper.png");
}
a:link { color: #0645ad; }
a:visited { color: #663399; }
a:active { color: #d04437; }
</style>
</head>
<body>
<p>Styled with CSS instead of deprecated <code><body></code> attributes.</p>
<p><a href="https://www.w3docs.com">A link</a></p>
</body>
</html>Il tag <body> supporta anche gli Attributi Globali standard (class, id, style, lang, e così via) e gli Attributi degli Eventi.
Attributi degli eventi specifici del body
La maggior parte degli attributi degli eventi (come onclick) si applica a qualsiasi elemento, ma alcuni sono significativi solo su <body> perché reagiscono agli eventi dell'intera finestra/documento:
| Attributo | Si attiva quando |
|---|---|
| onload | La pagina ha terminato il caricamento (tutto il contenuto e le risorse). |
| onunload | L'utente naviga verso un'altra pagina e la pagina corrente viene scaricata. |
| onresize | La finestra del browser viene ridimensionata. |
Esempio — esegui del codice una volta che la pagina è pronta e di nuovo ogni volta che la finestra viene ridimensionata:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body onload="report('loaded')" onresize="report('resized')">
<p id="status">Waiting…</p>
<script>
function report(message) {
document.getElementById("status").textContent = "Window " + message;
}
</script>
</body>
</html>Nel codice moderno questi vengono spesso collegati tramite JavaScript, ad esempio window.addEventListener("load", …), il che mantiene il comportamento separato dal markup.
Accessibilità
Il <body> è la radice di tutto il contenuto renderizzato, quindi stabilisce le basi per le tecnologie assistive:
- L'attributo
langsull'elemento<html>(ad esempiolang="en") indica agli screen reader quale lingua utilizzare quando leggono tutto ciò che si trova all'interno del<body>. Impostarlo correttamente migliora la pronuncia. - Poiché il
<body>è il luogo in cui risiedono sia la navigazione che il contenuto principale, fornisci un link di salto alla navigazione come primo elemento focalizzabile, in modo che gli utenti da tastiera e i lettori di schermo possano passare direttamente al contenuto principale:
<body>
<a href="#main" class="skip-link">Skip to main content</a>
<nav><!-- site navigation --></nav>
<main id="main">
<h1>Page title</h1>
<p>Main content…</p>
</main>
</body>Il link di salto è solitamente nascosto visivamente finché non riceve il focus da tastiera, ma rimane sempre disponibile per le tecnologie assistive.