HTML <p> címkék
A <p> címke, azaz a bekezdések alapja
A <p> címke az egyik legalapvetőbb HTML elem, amelyet minden weboldalon megtalálunk. A neve az angol „paragraph” (bekezdés) szóból származik, és a szövegek bekezdésenkénti tagolására szolgál.
Miért fontos a <p> címke?
A HTML-ben nincsenek automatikus sortörések. Ha nem használunk <p> címkét, a böngésző egyetlen folyamatos szövegként jeleníti meg a tartalmat, hiába nyomunk entereket a kódban.
🔍 Példa – Mi történik <p> címke nélkül?
Ezt írod:
Ez itt egy szöveg.
Bár új sorban van, a böngésző mégis egy sorban jeleníti meg.
Hiába ütöttem entert.
Ezt fogod látni:
Ez itt egy szöveg. Bár új sorban van, a böngésző mégis egy sorban jeleníti meg. Hiába ütöttem entert
📌 Megoldás: Minden bekezdést <p> címkébe kell tenni, hogy a böngésző helyesen jelenítse meg!
Hogyan működik a <p> címke?
A bekezdés mindig egy új sorban kezdődik, és a teljes szélességet elfoglalja. Egy bekezdést így hozunk létre:
Ha ezt írod:
<p>Ez egy bekezdés HTML-ben.</p>
<p>Ez pedig egy másik bekezdés.</p>
Ez fog megjelenni:
Ez egy bekezdés HTML-ben.
Ez pedig egy másik bekezdés.
A <p> címke automatikus kiegészítése
Néhány tartalomkezelő rendszer (pl. WordPress, Google Docs, Wix) automatikusan hozzáadja a <p> címkét a bekezdésekhez.
📌 Figyelj rá, hogy ha nem akarsz új bekezdést, töröld ki a felesleges <p> címkéket!
Összegzés
✅ A <p> a bekezdés címke, amely tagolja a szöveget és biztosítja a megfelelő sortöréseket.
✅ Ha nem használunk <p>-t, a böngésző figyelmen kívül hagyja az entereket.
✅ Mindig HTML címkébe kell tenni a szöveget, különben nem fog megjelenni!
✅ Néhány szerkesztő (pl. WordPress) automatikusan hozzáadja a <p>-t – erre figyelni kell!
📌 Most már tudod, hogyan kell helyesen használni a <p> címkét! Próbáld ki a saját weboldaladon!
Feladat:
Írj egy HTML fájlt, amely három bekezdést tartalmaz a kedvenc témádról!
<!DOCTYPE html>
<html lang=”hu”>
<head>
<meta charset=”UTF-8″>
<title>Bekezdés gyakorlás</title>
</head>
<body>
<h1>Kedvenc témám</h1>
<p>Ez az első bekezdésem, amely bemutatja a témát.</p>
<p>Ez a második bekezdés, amely részleteket tartalmaz.</p>
<p>A harmadik bekezdésben egy összefoglalót írok.</p>
</body>
</html>
➡️ Kihívás: Próbáld ki, hogy <p> címkék nélkül is működik-e!