A HTML <body> elem tartalmazza a HTML dokumentum összes látható tartalmát. HTML dokumentumonként csak egy <body> terület lehet.

Mi az a HTML <body> tag és mire használják?

A HTML <body> egy HTML-elem, amelyet a dokumentum tartalmának a felhasználók számára történő megjelenítésére használnak. Minden látható tartalom, például címsorok, szövegblokkok, képek, táblázatok, hiperhivatkozások, listák és egyéb elemek ebben a HTML-címkében vannak tárolva. Minden dokumentumban csak egy HTML <body> lehet. Ez mindig a <head> terület alatt és a HTML lábléc felett található. A <body> címke minden globális HTML-attribútumot támogat.

Mi a HTML <body> szintaxisa és funkcionalitása?

Mielőtt néhány egyszerű példával bemutatnánk a HTML <body> működését, érdemes megnézni az elem alapvető szintaxisát. Ez a következőképpen néz ki:

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

Csak a bevezető (<body>) és záró (</body>) címkék közötti tartalom jelenik meg később a vonatkozó weboldalon.

HTML <body> példa

Az alábbi példákban láthatja, hogyan használják a HTML <body> címkét a gyakorlatban.

Egyszerű, <body> elemből álló HTML-dokumentum

Először létrehozunk egy egyszerű HTML-dokumentumot, amely tartalmaz egy címsort, egy szövegrészt és egy képet, amelyek mind a testben helyezkednek el. Ez a megfelelő kód:

<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

Navigációs sáv létrehozása href segítségével

Az alábbi példa bemutatja, hogyan hozhat létre navigációs sávot a webhelyéhez a HTML <body> címke és a href attribútum segítségével. Íme a kód:

<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

Videó beágyazása a HTML <body> címkével

Ha videót szeretne beágyazni a webhelyére, akkor a <body> szakasz a megfelelő (és egyetlen) hely erre. Az alábbiakban egy példa látható a videó beágyazására:

<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

A tartalom megjelenésének megváltoztatása HTML <body> címkével

A CSS segítségével a <body> területet is felhasználhatja webtartalmának megjelenésének testreszabásához. Az alábbi példában láthatja, hogyan működik ez:

<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

Háttér testreszabása HTML-ben <body>

Ha CSS-sel szeretné megváltoztatni a HTML háttérét, azt a HTML <body>-ben is megteheti. A háttérszín beállítása a következőképpen történik:

<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

Kép beszúrásához használja az alábbi kódot:

<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
Ugrás a főmenübe