Az <article> címke
📌 A <article> címke – Önálló tartalmi egységek HTML-ben
A <article> egy HTML5-ös szemantikus címke, amely önálló tartalmi egységek megjelölésére szolgál. Ez azt jelenti, hogy a böngészők és a keresőmotorok jobban megértik, milyen szerepet tölt be egy adott tartalom az oldalon.
De pontosan mikor és hogyan érdemes használni ezt a címkét? Nézzük meg részletesen! 👇
🔹 1. Mi az <article> címke, és mire használható?
Az <article> címke olyan tartalmi egységeket jelöl, amelyek önállóan is megállják a helyüket és külön-külön is értelmezhetőek.
📌 Példák az <article> használatára
✔ Blogbejegyzések
✔ Hírcikkek
✔ Felhasználói hozzászólások, fórumposztok
✔ Termékleírások egy webshopban
✔ Egyedi események, bejegyzések
🔹 2. Hogyan néz ki egy <article> HTML-ben?
Egy egyszerű blogbejegyzés szerkezete így nézhet ki:
<article>
<h2>Hogyan használjuk az `article` címkét?</h2>
<p>Az `article` egy önálló tartalmi egység, amely egy blogbejegyzést, hírcikket vagy más, külön-külön is értelmezhető tartalmat foglal magába.</p>
</article>
💡 Mit csinál ez?
✔ Egy teljes cikket tartalmaz
✔ A böngészők és keresőmotorok látják, hogy ez egy önálló tartalom
🔹 3. Mikor érdemes az <article> és mikor a <section> címkét használni?
A <article> és a <section> címke hasonlónak tűnhet, de van egy fontos különbség köztük:
| Címke | Mire való? | Példa |
|---|---|---|
<article> |
Önálló tartalmi egység, amely külön is értelmezhető | Egy blogposzt, egy hírcikk vagy egy fórumhozzászólás |
<section> |
Egy nagyobb tartalomrészt bont kisebb blokkokra | Egy oldal különböző szakaszai, például egy „Rólunk” oldal fejezetei |
📌 Ökölszabály:
✅ Ha a tartalom külön-külön is értelmezhető, akkor <article>!
✅ Ha egy nagyobb téma alrészeit akarod szervezni, akkor <section>!
🔹 4. Példa: Blogcikkek szerkezete <article> és <section> címkékkel
<article>
<header>
<h2>A HTML article címke használata</h2>
<p>Közzétéve: 2025. február 7.</p>
</header>
<section>
<h3>Mi az article jelentősége?</h3>
<p>Az article segít strukturáltabbá és SEO-barátabbá tenni a weboldalakat.</p>
</section>
<section>
<h3>Mikor érdemes használni?</h3>
<p>Ha egy cikk, blogposzt vagy fórumhozzászólás önállóan is megállja a helyét, akkor article-t érdemes használni.</p>
</section>
<footer>
<p>Szerző: Digitális Felfedezők</p>
</footer>
</article>
💡 Mit csinál ez?
✔ A <header> a cikk címét és dátumát tartalmazza
✔ A <section> blokkok tematikusan szervezik a cikket
✔ A <footer> tartalmazza a szerző nevét
🔹 5. Miért hasznos az <article> SEO szempontból?
A keresőmotorok, például a Google, felismerik, hogy az <article> címkével ellátott tartalmak önálló egységek. Ez előnyös lehet:
✔ Segít a keresőoptimalizálásban (SEO)
✔ Strukturáltabbá teszi az oldalt, így jobb felhasználói élményt nyújt
✔ Segíthet a „kiemelt találatok” (featured snippets) elérésében
Ha egy cikket <div> helyett <article>-be teszel, a Google pontosabban megérti, hogy ez egy különálló tartalom, nem csak egy formázott szövegrész.
🔹 6. Összegzés
✔ Az <article> önálló tartalmi egységeket jelöl (pl. blogcikk, hír, termékleírás).
✔ A <section> egy nagyobb témát oszt kisebb szakaszokra.
✔ SEO szempontból előnyös, mert segíti a keresőmotorokat a tartalom megértésében.
✔ Használata ajánlott blogokban, hírportálokon és webshopokban.
💡 Ha egy weboldalon több különálló cikket vagy hírt jelenítesz meg, akkor mindegyiket <article> címkébe tedd!