A HTML Címsorai és a Header Elem

Ebben a leckében megismerkedhetsz a HTML címsorok hierarchiájával és a <header> elem szerepével.

A HTML címsorainak szerepe

A HTML címsorai hat szintig tagolódnak: <h1>, <h2>, <h3>, <h4>, <h5> és <h6>. Ezek a tagok különböző fontosságú címeket jelölnek.

A <h1> általában az oldal vagy dokumentum főcímét takarja, míg a többi szint az alárendelt tartalmak hierarchiáját mutatja.

A címsorok helyes használata lehetővé teszi az olvasók számára, hogy gyorsan átlássák a tartalom felépítését, és könnyen megtalálják az őket érdeklő részeket.

A címsorok helyes alkalmazása

A címhierarchia kialakítása logikai szempontból fontos. A dokumentumnak tartalmaznia kell egy főcímet (<h1>), majd ezt követhetik a főbb fejezetcímek (<h2>), az alfejezetek címei (<h3>) és így tovább.

A helyes sorrendet nem szabad önkényesen felborítani. Gyakori hiba például, hogy valaki egy <h4> elemet használ pusztán azért, mert vizuálisan kisebb címet szeretne.

A HTML elemek jelentését soha ne keverjük össze a megjelenéssel.

Példa egy helyes címsorhierarchiára

Az alábbi egyszerű példa bemutatja, hogyan érdemes felépíteni a dokumentum címeit:

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Címsor példa</title>
</head>
<body>
    <h1>Főcím</h1>
    <h2>Fejezet címe</h2>
    <h3>Alfejezet címe</h3>
    <h2>Következő fejezet</h2>
</body>
</html>

Ez a struktúra lehetővé teszi az olvasók és a keresőmotorok számára, hogy egyértelműen azonosítsák a tartalom szerkezetét.

A header elem feladata és jelentése

A HTML <header> elem a dokumentum vagy egy tartalmi egység bevezető részét tartalmazza.

Ez lehet az egész oldalra jellemző fejléc (például egy logóval és navigációs menüvel), de egy cikk vagy szekció saját <header> eleme is. A <header> elem célja, hogy összefoglaló jelleggel tartalmazza az adott rész legfontosabb információit – mint például a címet, dátumot, szerzőt vagy bevezető szöveget.

A header elem helyes használata

Fontos megkülönböztetni a <header> elemet a <head> elemtől. A <head> technikai információkat tartalmaz (például metaadatokat, stíluslapokra és parancsfájlokra mutató hivatkozásokat), míg a <header> elem vizuálisan is megjelenik a weboldalon, és a felhasználók számára fontos tartalmakat közvetít.

Egy <header> elem gyakran tartalmaz címeket, de nem kötelező. Lehet benne navigáció, keresősáv, rövid bevezető szöveg vagy akár képek is.

A lényeg, hogy a <header> elem az adott tartalom kontextusát adja meg.

Összefoglalás

A HTML címsorai és a <header> elem együtt biztosítják a weboldalak áttekinthetőségét, logikus szerkezetét, használhatóságát és keresőbarát kialakítását.

Ezek helyes alkalmazása minden webfejlesztő alapvető feladata. A címsorok segítenek a tartalom strukturálásában és a felhasználók navigációjában, míg a <header> elem a dokumentum vagy szakasz kontextusát adja meg.

A megfelelő hierarchia és logikai felépítés nem csupán esztétikai, hanem funkcionális szempontból is kulcsfontosságú.

Vissza az Oktatóanyagokhoz