HTML Info

Webről, magyarul, mindenkinek

A h elemek használatáról

10 megjegyzés

Aki már használja egy ideje a CSS-t és egyéb webes kváziszabványokat, az már valószínűleg tudja, hogy a HTML h1-h6 elemei egyfajta hierarchiát alakítanak ki; fontossági sorrendet is jeleznek a dokumentumban: a legfontosabb mondandót a <h1>, a legkevésbé fontosat a <h6> elemmel jelöljük. Aki még csak most kezd ismerkedni a stíluslapokkal és a webes szabványokkal, az tán még úgy gondol a címsor elemekre, mint amelyek segítségével könnyen lehet különböző betűméretű, vastagított szövegeket kialakítani. A címsorok azonban többet rejtenek, mint amennyit egy átlagos webdizájner felismer. Pedig a megfelelően szemantikus webhelyek felépítéséhez a <h> elemek alapos ismerete feltétlenül szükséges.

A megfelelő hierarchia kialakítása

Ahogy fentebb említettem, a címsor elemek egy tartalomblokk számára több, vagy kevesebb fontosságot jeleznek, a címsor jelzett számától (1-6) függően. A W3C szerint:

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Vagyis, egy címsor elem röviden leírja az általa bevezetett szövegrész tartalmát. A címsorok által szolgáltatott információt a felhasználói alkalmazások felhasználhatják, pl. tartalomjegyzék készítésére.

Fontos, hogy a címsorokat sorban, egymás után helyezzük el, viszont nem szükséges lapunkon mindegyiket felhasználnunk. Például, lapunknak kell, hogy legyen egy fő címe (<h1>), utána lehet egy alcíme (<h2>), és semmi több (már ami a címsorokat illeti). Ez a megoldás tökéletesen – mind strukturálisan, mind szemantikailag – elfogadható. Ellenben, ha a lapon a <h1> után <h3> következik, az szemantikailag hibás. Bár a lapot a böngésző tökéletesen megjeleníti, a dokumentum-struktúra felborul (egyes megveszekedett országokat nem számítva, az épületekben is sorban egymás után következnek az emeletek).

Hasonlóan fontos, hogy oldalanként csak egy <h1> elemet használjunk. A <h1> elem jelzi az oldal legfontosabb címsorát. Egynél több legfontosabb címsornak nincs értelme. A legfontosabb címsor (általában az oldal címe) mellett természetesen annyi h2-h6 elemet használhatunk fel, amennyit csak szükségesnek látunk.

H elemek használata a lapelrendezésben

Ha a címsor elemekre gondolunk, az első, ami eszünkbe juthat (különösen azoknak, akiknek beletört a foguk a Front Page-be) az a tartalom (tud valaki jobb elnevezést?). A <h1> elemnek a tartalom fölött kell lennie, a többi elem pedig a lap többi részén bárhol elhelyezkedhet. Egy jól strukturált weblapon az elemek ott vannak, ahol helyük szemantikailag is megfelelő – ahol a leghatékonyabban utalnak tartalmukra. E célból általában jobb, ha a lapelrendezést szolgáló elemek nem az általános tartalmazó elemként alkalmazható <div> elemek. Ne felejtsük el, hogy a <div> elemen kívül létezik még jónéhány blokkszintű elem, amely ugyanarra képes, mint a <div>.

Egy csomó designer bűnösnek találtatott abban, hogy úgy gondolja: a CSS elrendezés egyben szemantikus elrendezés is. Csakhogy ez nem igaz. Vessünk egy pillantást a következő ködra, ami ugyan jól strukturált XHTML, de szemantikailag értelmetlen:

<div id="header">
 <div class="logo">
  <img src="logo.gif" alt="HTML Info" />
 </div>
 <div class="tagline">
  <img src="tagline.gif"
  alt="Webet, magyarul, mindenkinek!" />
 </div>
</div>

Strukturálisan semmi baj ezzel a kóddal. Egy kis CSS-el megfűszerezve marha jól néz ki minden böngészőben. A gond az, hogy az általános <div>-nek nincs jelentése – nem írja le tartalmát. Vagyis, egy korlátozott CSS támogatással rendelkező mobil eszköznek, vagy képernyőolvasónak elképzelése sem lesz róla, miért van legfelül a logó – az a legfontosabb az oldalon? Az oldal nem lesz igazán jól használható, nem ér többet, mint egy kupac kocsonyás betűhalmaz. Nézzük, hogy nézhetne ki jobban:

<div id="header">
 <h1>HTML Info</h1>
  <h2>Webet, magyarul, mindenkinek!</h2>
</div>

Nem csak az így megírt kód lehet szemantikailag korrekt, mindenesetre tömörebb és olvashatóbb, mint az eredeti példa. Most változtassuk a <h1> és <h2> elemeket képekké a CSS-t támogató böngészők számára; írjuk meg a stíluslapot:

#header h1 {
background: url(logo.gif) no-repeat;
text-indent: -9999px; /*Eltüntetjük a szöveget az útból*/
}
#header h2 {
background: url(tagline.gif) no-repeat;
text-indent: -9999px; /*Eltüntetjük a szöveget az útból*/
}

Még megcifrázhatjuk némi height és width attribútumok hozzáadásával a <h1> és <h2> elemekhez, hogy hozzáméretezzük őket a logo.gif és tagline.gif képekhez, de anélkül is készen vagyunk. A tartalom teljesen elkülönül a megjelenítéstől, ami pontosan megfelel a szemantikai kívánalmaknak.

(Valószínűleg feltűnt, hogy a <h1> és <h2> elemekre -9999 text-indent értzéket állítottunk be. Ezzel a trükkel a CSS-t támogató böngészőknél a szöveget kilöktük a látható felületről. A CSS-t nem támogató felhasználói alkalmazások a szöveget fogják megmutatni.)


A spam kommentek sajnálatos elszaporodása miatt a megjegyzések lehetősége lezárva.

Írta: htmlinfo

2008. 10 30 at 7:03 pm

Kategória: Tippek

Címkék , ,