<body> – a weboldal látható tartalma
A <body> HTML címke az oldal látható tartalmát foglalja magában. Minden, amit egy felhasználó a böngészőben lát – szövegek, képek, videók, linkek, gombok és egyéb elemek – itt található.
🔹 Mi a <body> szerepe?
✔ Az összes megjelenített tartalom a <body> címke belsejében helyezkedik el.
✔ A HTML dokumentum fő része, amely a látogatók számára látható.
✔ Tartalmazhat más szerkezeti HTML elemeket, pl.:
<header>– fejléc<nav>– navigáció<main>– fő tartalom<section>,<article>– tartalmi egységek<aside>– oldalsáv<footer>– lábléc
🔹 Alap HTML szerkezet
A <body> mindig a <html> címkén belül, de a <head> után helyezkedik el.
<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Weboldal címe</title>
</head>
<body>
<header>
<h1>Üdvözlünk a weboldalon!</h1>
</header>
<nav>
<ul>
<li><a href=”#”>Kezdőlap</a></li>
<li><a href=”#”>Rólunk</a></li>
<li><a href=”#”>Kapcsolat</a></li>
</ul>
</nav>
<main>
<h2>Legfrissebb hírek</h2>
<p>Ez egy példa bejegyzés a weboldal tartalmára.</p>
</main>
<footer>
<p>© 2025 Digitális Felfedezők</p>
</footer>
</body>
</html>
🔹 Hogyan épül fel a <body> tartalma?
A <body> különböző típusú tartalmakat foglalhat magában:
1️⃣ Szöveges elemek
🔹 Címsorok: <h1> – <h6>
🔹 Bekezdések: <p>
🔹 Felsorolások: <ul>, <ol>, <li>
Példa:
<body>
<h1>Weboldalam címe</h1>
<p>Ez egy bekezdés a weboldalon.</p>
<ul>
<li>Első listaelem</li>
<li>Második listaelem</li>
</ul>
</body>
2️⃣ Médiaelemek
🔹 Képek: <img>
🔹 Videók: <video>
🔹 Audió: <audio>
Példa:
<body>
<h1>HTML médiaelemek</h1>
<img src=”kep.jpg” alt=”Példa kép”>
<video controls>
<source src=”video.mp4″ type=”video/mp4″>
</video>
</body>
3️⃣ Interaktív elemek
🔹 Gombok: <button>
🔹 Űrlapok: <form>, <input>, <textarea>
🔹 Linkek: <a>
Példa:
<body>
<button>Kattints ide!</button>
<form>
<label for=”email”>Email címed:</label>
<input type=”email” id=”email” name=”email”>
<button type=”submit”>Küldés</button>
</form>
</body>
🔹 A <body> és a <head> közötti különbség
| Tulajdonság | <head> |
<body> |
|---|---|---|
| Funkció | A háttérben működő információkat tartalmazza (pl. metaadatok, CSS, JavaScript) | A weboldal megjelenített tartalma |
| Láthatóság | Nem látható a böngészőben | Látható a böngészőben |
| Példa elemek | <title>, <meta>, <link>, <script> |
<h1>, <p>, <img>, <table>, <form> |
🔹 GYIK – Gyakran Ismételt Kérdések
1️⃣ Kötelező a <body> címke egy HTML dokumentumban?
🔹 Igen. Minden látható tartalom a <body>-ba kerül.
2️⃣ Lehet több <body> egy HTML oldalon?
🔹 Nem. Egy HTML oldalon csak egy <body> lehet.
3️⃣ Mi történik, ha nem használok <body> címkét?
🔹 A böngészők még mindig megjeleníthetik a tartalmat, de a HTML szabvány szerint nem ajánlott elhagyni.
🔹 Összegzés
✔ A <body> tartalmazza a weboldal összes látható elemét.
✔ Minden HTML oldalnak pontosan egy <body> címkéje van.
✔ Nem keverendő össze a <head>-del, amely a metaadatokat tartalmazza.
✔ Szövegek, képek, multimédia és interaktív elemek egyaránt elhelyezhetők benne.
👉 Nézd meg a következő bejegyzést a <head> szerepéről és a metaadatokról! 🔗