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 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. 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 globali.

Il tuo web hosting come mai prima d'ora
  • Certificato SSL e protezione DDoS
  • Velocità, flessibilità e scalabilità
  • Dominio e consulente personale
  • 1 anno gratis del gestionale di fatturazione elettronica FlexTax

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:

<body>Tutti i contenuti visibili del sito web sono memorizzati qui.</body>
html

In seguito sulla pagina web corrispondente verrà visualizzato solo il contenuto tra i tag di apertura (<body>) e di chiusura (</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>
<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">
</body>
</html>
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. Il codice appropriato è il seguente:

<!DOCTYPE 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>
</body>
</html>
html

Incorporare un video tramite il tag HTML <body>

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:

<!DOCTYPE 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>
</body>
</html>
html

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

Servendoti del linguaggio CSS, hai la possibilità di utilizzare la sezione <body> per personalizzare il design dei contenuti web. Nell’esempio seguente puoi osservare concretamente come funziona:

<!DOCTYPE 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>
</body>
</html>
html

Personalizzare gli sfondi nel <body> HTML

Se desideri modificare lo sfondo in HTML solo con i CSS, puoi farlo anche direttamente dal <body>. Qui puoi vedere come impostare il colore di sfondo:

<!DOCTYPE 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>
</body>
</html>
html

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

<!DOCTYPE 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>
</body>
</html>
html
Dominio
Registra il tuo dominio
  • Certificato SSL Wildcard incluso
  • Registrazione di dominio sicura
  • Indirizzo e-mail professionale da 2 GB
Hai trovato questo articolo utile?
Vai al menu principale