Elementul HTML <body> conține tot conținutul vizibil al unui document HTML. Poate exista doar o singură zonă <body> per document HTML.

Ce este eticheta HTML <body> și la ce servește?

HTML <body> este un element HTML utilizat pentru a afișa conținutul unui document utilizatorilor. Tot conținutul vizibil, cum ar fi titluri, blocuri de text, imagini, tabele, hyperlinkuri, liste și alte elemente, este stocat în această etichetă HTML. În fiecare document poate exista o singură <body>. Aceasta se află întotdeauna sub zona <head> și deasupra subsolului HTML. Eticheta <body> acceptă toate atributele HTML globale.

Care este sintaxa și funcționalitatea HTML <body>?

Înainte de a vă arăta cum funcționează HTML <body> folosind câteva exemple simple, merită să aruncăm o privire asupra sintaxei de bază a elementului. Aceasta arată astfel:

<body>This is where all the visible website content is stored.</body>
html

Numai conținutul dintre etichetele introductive (<body>) și de închidere (</body>) va fi afișat ulterior pe pagina web relevantă.

<body> exemple HTML

În exemplele următoare, puteți vedea cum se utilizează în practică eticheta HTML <body>.

Document HTML cu <body> de elemente simple

Mai întâi, vom crea un document HTML simplu cu un titlu, o secțiune de text și o imagine, toate acestea fiind plasate în corp. Acesta este codul corespunzător:

<html>
<head>
<title>HTML body in a document</title>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
<img src="example.jpg" alt="Here’s an image">
</body>
</html>
html

Crearea unei bare de navigare cu href

Următorul exemplu vă arată cum să creați o bară de navigare pentru site-ul dvs. web folosind eticheta HTML <body> și atributul href. Iată codul:

<html>
<head>
<title>Website with a navigation bar</title>
</head>
<body>
<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>
</body>
</html>
html

Incorporarea videoclipurilor prin intermediul etichetei HTML <body>

Dacă doriți să încorporați un videoclip pe site-ul dvs., secțiunea <body> este locul corect (și singurul) pentru a face acest lucru. Mai jos găsiți un exemplu de încorporare a unui videoclip:

<html>
<head>
<title>Website with a video</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="example-film.mp4" type="video/mp4">
</video>
</body>
</html>
html

Modificarea designului conținutului prin intermediul etichetei HTML <body>

Cu ajutorul CSS, puteți utiliza zona <body> pentru a personaliza designul conținutului web. Puteți vedea cum funcționează acest lucru în exemplul următor:

<html>
<head>
<title>HTML body with visual adjustments</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #BFEFFF;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p>Here’s your website content.</p>
</body>
</html>
html

Personalizarea fundalurilor în HTML <body>

Dacă doriți să modificați fundalul HTML cu CSS, puteți face acest lucru și în HTML <body>. Iată cum puteți seta culoarea fundalului:

<html>
<head>
<title>HTML body with new background colour</title>
<style>
body {
background-color: #BFEFFF;
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html

Pentru a insera o imagine, utilizați codul de mai jos:

<html>
<head>
<title>HTML body with new background image</title>
<style>
body {
background-image: url(example.png);
}
</style>
</head>
<body>
<h1>Here’s your heading</h1>
<p><a href="https://www.example-website.com">Visit example-website.com!</a></p>
</body>
</html>
html
Mergi la meniul principal