# Tag body HTML: l’elemento HTML per il contenuto da visualizzare

L’elemento HTML `<body>` contiene tutto il contenuto visibile di un documento HTML. Per ogni documento può esistere una sola sezione `<body>`.

## Cos’è il tag `<body>` in HTML e a cosa serve?

`<body>` è un elemento [HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml/) utilizzato per visualizzare il contenuto di un documento. Tutti i **contenuti visibili** come titoli, blocchi di testo, immagini, tabelle, collegamenti ipertestuali, elenchi e altri possibili elementi sono memorizzati all’interno di questo [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/). In ogni documento può esserci solo **un `<body>`** HTML, che si trova sempre sotto la sezione `<head>` e sopra il footer HTML. Il tag `<body>` supporta tutti gli [attributi HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/) globali.

## HTML `<body>`: sintassi e funzionamento

Prima di mostrare il funzionamento di `<body>` in HTML con alcuni semplici esempi, diamo un’occhiata alla sintassi di base dell’elemento. Si presenta come segue:

```html
<body>Tutti i contenuti visibili del sito web sono memorizzati qui.<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
```

In seguito sulla pagina web corrispondente verrà visualizzato solo il contenuto tra i tag di apertura (`<body>`) e di chiusura (`<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>`).

## Esempi di utilizzo di `<body>` in HTML

Negli esempi seguenti si può vedere come viene utilizzato in pratica il tag HTML `<body>`.

### Documento HTML con elemento `<body>` semplice

Per prima cosa, creiamo un documento HTML semplice con un **titolo, una sezione di testo e un’immagine**, tutti collocati all’interno del corpo. Ne risulta il codice seguente:

```html
<html>
<head>
<title>Il tag body HTML in un documento</title>
</head>
<body>
<h1>Qui c'è il titolo</h1>
<p>Qui c'è il contenuto del sito web.</p>
<img src="esempio.jpg" alt="Qui viene visualizzata un'immagine">
<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Creare una barra di navigazione con href

L’esempio seguente mostra come creare una barra di navigazione per il proprio sito web utilizzando il tag HTML `<body>` e l’attributo [href](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/a-href-html/). Il codice appropriato è il seguente:

```html

<html>
<head>
<title>Sito web con una barra di navigazione</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">Chi siamo</a> |
<a href="#contact">Contatti</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>Chi siamo</h2></section>
<section id="contact"><h2>Contatti</h2></section>
<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Incorporare un video tramite il tag HTML &lt;body&gt;

La sezione `<body>` è il posto giusto (e anche l’unico possibile) per incorporare un video nel tuo sito web. Di seguito un esempio di codice per l’integrazione di un video:

```html

<html>
<head>
<title>Sito web con video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="film-esempio.mp4" type="video/mp4">
</video>
<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Modifica del design del sito attraverso il tag HTML-`<body>`

Servendoti del linguaggio [CSS](https://www.ionos.it/digitalguide/siti-web/web-design/come-imparare-il-css-una-guida-semplice/), hai la possibilità di utilizzare la sezione `<body>` per personalizzare il design dei contenuti web. Nell’esempio seguente puoi osservare concretamente come funziona:

```html

<html>
<head>
<title>HTML body con modifiche al design</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Qui c'è il titolo</h1>
<p>Qui c'è il contenuto del sito web.</p>
<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

### Personalizzare gli sfondi nel `<body>` HTML

Se desideri modificare lo [sfondo in HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/sfondi-html/) solo con i CSS, puoi farlo anche direttamente dal `<body>`. Qui puoi vedere come impostare il colore di sfondo:

```html

<html>
<head>
<title>HTML body con un nuovo colore di sfondo</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Qui c'è il titolo</h1>
<p><a href="https://www.pagina-esempio.com">Visita pagina-esempio.com!</a></p>
<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

Se, invece, desideri inserire un’immagine, il codice appropriato da utilizzare è il seguente:

```html

<html>
<head>
<title>HTML body con un nuovo colore di sfondo</title>
<style>
body {
background-image: url(esempio.png);
}
</style>
</head>
<body>
<h1>Qui c'è il titolo</h1>
<p><a href="https://www.pagina-esempio.com">Visita pagina-esempio.com!</a></p>
<div class="hash d-none" hidden>hash_2f4bd568cabcba0ecf2904907a894a676c73543a</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-body/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-body/) for AI/LLM consumption.