Mire jó a section címke?
🔹 1. Mi a <section> címke, és mire jó?
A <section> jelentése „szakasz”, és a weboldalak tartalmi blokkjait jelöli meg. Segítségével a HTML-kód könnyebben értelmezhetővé és szervezettebbé válik.
📌 Példák a <section> használatára
✔ Egy weblap különböző részei (pl. „Rólunk”, „Szolgáltatások”, „Kapcsolat”)
✔ Egy hosszabb cikk vagy blogbejegyzés fejezetei
✔ Egy termékoldal különböző szakaszai (pl. leírás, specifikáció, vélemények)
🔹 2. Hogyan néz ki egy <section> HTML-ben?
Egy egyszerű weboldal szerkezete így nézhet ki:
<section>
<h2>Rólunk</h2>
<p>Mi egy innovatív webfejlesztő csapat vagyunk…</p>
</section>
<section>
<h2>Szolgáltatásaink</h2>
<p>Weboldal készítés, keresőoptimalizálás, UX/UI design…</p>
</section>
<section>
<h2>Kapcsolat</h2>
<p>Írj nekünk a [email protected] címen!</p>
</section>
💡 Mit csinál ez?
✔ Minden szakasz külön címkét kapott
✔ A tartalom logikusan elkülönül
✔ Jobb felhasználói élményt biztosít
🔹 3. Mikor érdemes <section> és mikor <div> címkét használni?
Gyakori kérdés: Mikor kell <section> és mikor <div>?
| Címke | Mire való? | Példa |
|---|---|---|
<section> |
Tartalmilag összetartozó blokkok megjelölése | Egy „Rólunk” vagy „Kapcsolat” rész egy oldalon |
<div> |
Általános elrendezéshez, nem feltétlenül tartalmaz önálló jelentést | Egy doboz egy weboldalon |
📌 Ökölszabály:
✅ Ha a tartalomnak van saját jelentése, akkor <section>!
✅ Ha csak egy dizájnelem vagy tartalomcsoport, akkor <div>!
🔹 4. Példa: Blogcikkek szerkezete <section> címkével
Egy hosszabb blogcikk szerkezetében így nézhet ki a <section> használata:
<article>
<h1>Hogyan használjuk a section címkét?</h1>
<section>
<h2>Miért fontos a section?</h2>
<p>A section segít a weboldal tartalmát logikus egységekre bontani.</p>
</section>
<section>
<h2>Hogyan néz ki HTML-ben?</h2>
<p>Egyszerűen beilleszthető egy weboldal különböző részeibe.</p>
</section>
<section>
<h2>Összegzés</h2>
<p>Ha a tartalom különálló jelentéssel bír, akkor section használata ajánlott!</p>
</section>
</article>
💡 Mit csinál ez?
✔ Minden fő témakör külön szakaszt kapott
✔ A böngészők és keresőmotorok jobban értelmezik az egyes részeket
✔ A felhasználók könnyebben átláthatják a tartalmat
🔹 5. SEO és a <section> használata
A Google és más keresőmotorok számára a szemantikus HTML segít megérteni az oldal szerkezetét. A <section> használata:
✔ Segíti a keresőoptimalizálást (SEO)
✔ Javítja a weboldal struktúráját
✔ Könnyebbé teszi a tartalom indexelését
Ha egy hosszabb cikket <div> helyett <section> blokkokba szervezel, a Google könnyebben megérti, miről szól az adott szakasz.
🔹 6. Összegzés
✔ A <section> címke egy weboldal tartalmának logikus szerkezetét jelöli.
✔ Főbb részek elkülönítésére használjuk, például „Rólunk”, „Szolgáltatások”, „Kapcsolat” szakaszokra.
✔ SEO szempontból előnyös, mert segíti a keresőmotorokat a tartalom jobb értelmezésében.
✔ Ha a tartalomnak önálló jelentése van, akkor <section> a megfelelő választás!