22. Általános tárolók — a div és a span elemek

By Szökőcs Csaba

Bevezető

Ebben a leírásban be fogom mutatni, hogyan és mikor használatod a HTML-ben azt a két elemet, amelyek nem a tartalom leírására szolgálnak. A div és a span elemek ugyanis semmilyen jelentést nem rendelnek ahhoz a tartalomhoz, amit közrefognak, hanem egy általános módszert biztosítanak ahhoz, hogy a tartalmat olyan saját struktúrába vagy csoportokba rendezd, amelyre nincs más, odavaló HTML elem. Az ilyen csoportokat aztán CSS-ből stílusozhatod és JavaScripttel módosíthatod is. Habár a div önmagában nem tartalmaz szemantikus jelentést a dokumentumban, mégis tekinthetjük úgy, mint egy strukturált felosztást elősegítő jelölést, a megfelelő szemantikus osztály- vagy azonosító névvel együtt.

Ezeket a tageket csak „végső esetben” használjuk, amikor már semmilyen más HTML elemet nem tudunk felhasználni, mivel ezek az elemek már semmilyen plusz információt nem hordoznak például a kisegítő technológiák, keresőmotorok számára.

A leírás felépítése a következő:

Szemantikailag semleges

A HTML elemek legnagyobb része azért van, hogy leírjon valamilyen tartalmat, például képeket, listákat, címsorokat, vagy hogy segítsen a dokumentum felépítésében, a fejléc (head), a törzs (body), a külső hivatkozások (link) vagy a metaadatok (meta) definiálásában. A HTML specifikáció a következőt írja:

A div és a span elemek, ellentétben az id és a class attribútumokkal, egy sokkal általánosabb mechanizmus nyújtanak a dokumentumok strukturálására.

Ezekre az elemekre úgy tekinthetünk, mint a HTML állványaira. Lehetőséget adnak arra, hogy csoportosítsd a tartalmat, hogy extra információkat definiálhass a tartalmak körül, amelyeket aztán kapaszkodóként szolgálnak a JavaScript és CSS használatakor. Viszont nem adnak semmilyen új szemantikai jelentést a dokumentumhoz, sem a jelölésen belül, sem kívül.

Inline kontra blokk

Ahogy már korábban tanultuk, a blokk szintű elemek olyan elemek, amelyek segítenek a dokumentum strukturálásában. A div element — ami a division, vagyis a felosztás rövidítése — egy blokk szintű általános tároló elem. Normál esetben arra használhatjuk, hogy más blokk szintű elemeket fogjon közre, egy csoportba rendezve azokat (a következő szakaszban bővebben is fogunk erről beszélni). Arra is használható, hogy összegyűjtsön egy adag inline elemet és/vagy szöveget, amelyek egyébként logikailag nem tartoznak egy közös blokk szintű elem alá, de ezt csak végső esetben használjuk.

A span az inline, vagyis szövegen belüli általános tároló elem. Segíthet abban, hogy a dokumentum struktúráját felépítsük, de általában arra használjuk, hogy összefogjon más inline elemeket és/vagy szövegeket, kivéve a blokk szintű elemeket.

A kettő közötti különbség első ránézésre eléggé elenyészőnek tűnhet. Ami alapján elsősorban különbséget tehetünk közöttük, az a tartalom típusa, valamint hogy hogyan jelenne meg, ha stílusozás nélkül írnánk le őket. A div elemet egy csoport blokk szintű elem köré szoktuk tenni — például összefoglalhatunk egy címsort és egy hivatkozáslistát, hogy készítsünk belőlük egy navigációs menüt. A span ezzel szemben inkább a csoport inline elemet és (elsősorban) egyszerű szöveges részeket fog közre. A kulcsszó mindkét esetben a „csoport”: ha egy div csak egyetlen blokk szintű elemet fog közre, vagy a span egyetlen inline elemet, akkor fölösleges a használatuk. Nézd meg például, hogy használjuk a div és a span elemeket az alábbi egyszerű kódban:

<body>
  <div id="foTartalom">
    <h1>A lap címe</h1>
    <p>Ez az első bekezdés a példa lapunkon.</p>
    <img src="pelda.gif" alt="Ez csak egy példa kép, semmi különleges">
    <p>Ez a második bekezdés a példa lapunkon. Nagyon hasonló
    az elsőhöz, csak itt van egy <span id="specialisFigyelmeztetes">speciális
    figyelmeztetés, amit meg akarunk színezni és a kicsit megnövelni CSS-sel</span>.
    Ez nem a normál kiemelés, inkább stílusozás, szóval az <em> és
    a <strong> nem a legmegfelelőbbek.</p>
  </div>
</body>

Mostantól a div és span elemekben található tartalmat elérheted az id attribútumaik segítségével, és speciális stílusozást és pozicionálást adhatsz nekik CSS-ben.

Példa a tartalom felosztására

Ha megnézed az interneten található lapok forrását, találhatsz egy csokor olyan div elemet, amelyeknek mind hasonló neveik vannak a class vagy id attribútumaikban, például header (fejléc), footer (lábléc), content (tartalom), sidebar (oldalsáv), és így tovább.

A class és id attribútumaid nevei legyenek szemantikusak, vagyis elsősorban a közrefogott tartalom jelentésére, funkciójára vonatkozzon, ne pedig a vizuális megjelenésére. Például az oldalsav és a figyelmeztetes jó osztálynevek, míg a pirosbalsav és a kekvillogoszoveg már nem. Mi van akkor, ha az oldalsávod színét egy későbbi időpontban át szeretnéd állítani pirosról kékre, vagy áttennéd balról jobbra? Mi van akkor, ha a figyelmeztetéseket mostantól zöld aláhúzottként akarod megjeleníteni a villogó kék helyett?

Ezek a felosztások jól átláthatóvá teszik a struktúrát a lap készítésekor, de még fontosabb, hogy amikor később megnézzük a HTML kódot, nagy segítséget nyújtanak abban, hogy melyik rész mire szolgál. Egy jól felosztott lap önmagát magyarázza.

Ahhoz, hogy ez érthetőbb legyen, nézzük meg egy valódi weboldal felosztását — mégpedig a dev.opera.com oldalét. Ne felejtsd el, hogy az alábbi példakód egyáltalán nem tartalmaz hasznos tartalmat, leszámítva azt a néhány elemet, amelyik szükséges az oldal struktúrájának bemutatásához. Csak arra koncentráltunk, hogy felépítsük az adott oldal struktúráját, div elemeket felhasználva. A kódban olvasd el figyelmesen a HTML kommenteket — ezekben magyarázom meg az oldal struktúráját. Miközben végigolvasod a kódot, nyisd meg a dev.opera.com oldalt egy másik fülön vagy ablakban, így azonnal láthatod a felépített struktúraelemeket élesben is.

<body>
<!-- Legelőször van egy wrapper div, ami közrefogja a teljes lapot, ezen keresztül pontosabban befolyásolhatjuk a teljes lapot -->
  <div id="wrap">
  <!-- Ez a rendezetlen lista tartalmazza a hivatkozásokat az Opera különböző oldalaira, amelyeket a lap legfelső részében láthatsz -->
    <ul id="sitenav" class="hidemobile">
      ...
    </ul>
      ...
    <!-- Ez egy keresőmező - a kereső, amit a lap jobb felső részében láthatsz -->
    <form action="/search/" method="get" id="search">
      <div>
        ...
      </div>
    </form>
    <!-- Ez a rendezetlen lista tartalmazza a fő navigációs menüjét az oldalnak - a vízszintes menüsávot, amelyet a főcím képe alatt láthatsz -->
    <ul id="menu">
      ...
    </ul>
    <!-- Ezek az egymásbaágyazott div-ek adják meg a belépődoboz struktúráját, ahol megadhatod a felhasználóvedet és a jelszavadat a belépéshez az oldalra. Ezt csak akkor látod, ha nem vagy belépve -->
    <div id="loginbox">
      <div id="login">
        ...
      </div>
    </div>
    <!-- Ezekbe az egymásbaágyazott div-ekbe kerül a lap valódi tartalma - a cikkek rövid tartalma, amelyek a lap fő tartalmát adják -->
    <div id="content2">
      <div id="main">  
        ...
        <div class="major">
          ...
        </div>
        <div class="major">
          ...
        </div>
        ...
      </div>
    </div>
    <!-- Ez a div tartalmazza a lap oldalsávját - a cikkek kategóriáit, az utolsó hozzászólásokat, stb -->
    <div id="side">
      ...
    </div>
    <!-- Ez a div tartalmazza a láblécet, ahol láthatod a copyright megjegyzést, valamint mindenféle hivatkozásokat -->
    <div id="footer">
      ...
    </div>
  <!-- A lap vége - itt zárjuk be az első wrapper div-et -->  
  </div>
</body>

Extra információk

Néhány tartalom olyan extra információkat tartalmaz, amelyeket a különböző kliens eszközök fel tudnak használni. Az ilyen információkat valamilyen attribútummal lehet leírni. A span elem gyakran a legjobb megoldás az ilyen információk befűzésére, amint azt az alábbiakban bemutatjuk.

Egy jó példa az az eset, amikor valamilyen más nyelvű szövegrész jelenik meg a dokumentumban. Például:

<p><q>Plus ça change, plus c'est la même chose</q> — mondta.</p>

Bár a fő dokumentum nyelve magyar, az idézet valójában francia. Ezt a lang attribútum használatával adhatjuk meg: 

<p><q lang='fr'>Plus ça change, plus c'est la même chose</q> — mondta.</p>

Ebben az esetben könnyen meg tudtuk jelölni az eltérő nyelvet, mivel az egy idézetben jelent meg, így a q elem éppen megfelelt az idegen nyelvű tartalom közrezárására. Vannak viszont olyan esetek, amikor nem találunk egyetlen olyan elemet sem, amelyik megfelelő lenne, így kénytelenek vagyunk használni a div vagy a span elemeket. Például:

<p>A képernyő-felolvasó a francia chat (macska) szót mindaddig hibásan fogja felolvasni, amíg helyesen meg nem jelöljük a szó nyelvét.</p>

Ebben a példában a chat szó megjelenésekor valahogyan jelezni kellene a dokumentumban, hogy a képernyő-felolvasó más nyelvet használjon a kiolvasására. Ebben az esetben egy span elemmel a szó körül nagyon egyszerűen érhetjük el ezt, mivel semmilyen más HTML elemet nem tudunk használni helyette. Mivel csak egyetlen szóról van szó egy hosszabb szövegen belül, így inline, szövegen belüli elemre van szükség. A példát így lehetne átírni helyesen:

<p>A képernyő-felolvasó a francia <span lang='fr'>chat</span> (macska) szót mindaddig hibásan fogja felolvasni, amíg helyesen meg nem jelöljük a szót.</p>

Ugyanezt a technikát használják a microformatok esetében is, az adattípusok egyforma jelölésére a weblapokon belül. A microformatokról sokkal többet is megtudhatsz a dev.opera.com haladó HTML cikkeiből.

Kapaszkodók a JavaScriptekhez és CSS-hez

Már beszéltünk arról, hogyan használhatod a div és a span elemeken az id és a class attribútumokat arra, hogy ezeken keresztül CSS-ből közvetlenül stílusozhasd és pozicionálhasd a dokumentum bizonyos részeit. Pontosan ugyanígy kell eljárnod ahhoz, hogy JavaScripttel is elérhesd ezeket a részeket.

Ha egy bizonyos elemet megkeresni vagy módosítani szeretnél JavaScripttel, akkor az általános módszer szerint rendelj az elemhez egy id azonosítót, majd használd a getElementById függvényt a lekéréséhez. A JavaScriptről a tanfolyam későbbi részeiben lesz szó bővebben.

div-itis

Érdemes megemlíteni még egy gyakran előforduló problémát, amelyre „div-itis” névvel szoktak hivatkozni a webfejlesztők.

Bár nagyon egyszerű a div és a span elemek stílusozása, ezt a módszert lehetőség szerint kerülni kell. A legtöbb esetben a stílusozást vagy a JavaScript funkcionalitást a már létező elemekhez is hozzá lehet rendelni a dokumentumban. Az általános tárolók használata csak végső megoldásként merülhet fel — a legjobb, ha a weblapot megpróbáljuk csak a szemantikus elemek felhasználásával megírni, és a tárolókat csak akkor alkalmazzuk, amikor már nincs más lehetőség.

Helytelen szemantika

Ebben a részben néhány olyan HTML jelölésekkel kapcsolatos gyakori félreértést szeretnék bemutatni, amelyeket érdemes elkerülni, ha csak lehetséges.

Általános „bekezdések”

Néha csábító lehet egyszerűen egy p elembe tenni egy szöveget (bekezdésnek jelölve), de ez nem mindig helyes. Ahogy már korábban is említettem a szöveges részek megjelölése leírásban:

Ha csak néhány szóról van szó, vagy nem egy teljes mondatról, akkor ezeket nem kell feltétlenül paragrafusként megjelölnöd.

Egy div vagy span elem (a környezet függvényében) sokkal inkább megfelelő az olyan szöveges tartalmak szétválasztására, amelyek között nincs más HTML elemmel leírható kapcsolat.

Prezentációs elemek

Az interneten fellelhető tanácsok között van egy, amelyik egyértelműen káros, mégpedig a rövid, megjelenítő elemek, mint a b vagy az i használata általános tárolóként a span elem helyett. Általában két indokot hoznak fel a módszer mellett:

  • Ezek az elemek három byte-tal rövidebbek, így sávszélességet lehet spórolni a HTML és a CSS esetében is.
  • Az elemeket csak vizuális megjelenítésre használjuk, így a a „prezentációs” elemek használata ilyen esetekben megengedhető.

Az első pont az igaz, de a megspórolt mennyiség túlnyomórészt jelentéktelen (kivéve ha irdatlan mennyiségű vizuális effektust használsz), különösen a mai modern tömörítő módszerek mellett, amelyeket a webes kiszolgálók alkalmaznak a dokumentumokon a böngészőhöz való átküldés előtt. Ezek sokkal rövidebbé teszik a dokumentumokat, mint bármilyen kézileg alkalmazott trükk.

A második pont arra utal, hogy nem értették meg pontosan a prezentációs elemek jelentését a HTML-lel kapcsolatban. A prezentációs elemek azt jelölik, hogy a tartalmuk hogyan néz ki (tehát egyszerűen annyit, hogy „ez a szöveg félkövér”). Nem jelentenek viszont kapaszkodókat a bennük található szövegrészek stílusozásához.

Ha egy rövid szövegrészt egy bekezdésen belül stílusozni vagy JavaScripttel módosítani kell, és nincs hozzá illő szemantikus elem, ami közrefoghatná, akkor az egyetlen helyes elem, amit használhatunk, az a span.

Összefoglaló

Ezzel véget is ér a bemutatónk a div és a span elemekről — mostanra már jobban megértheted, hogy mire szolgálnak, és megfelelő helyeken tudod használni őket. A későbbi, CSS-ről szóló leírásokban még lesz róluk szó a lapszerkezetek készítése és más felhasználási módok között is.

Tesztkérdések

  • Mi a különbség a div és a span között?
  • Nevezd meg a fenti elemek 2 felhasználási módját a weblapokon.
  • Nézd meg az egyik kedvenc weboldalad forráskódját. Figyeld meg a felépítését. Sok div és span elemet használ hozzá? Látsz helytelen felhasználási módokat rajtuk? Hogyan lehetne jobban megoldani?

A szerzőről

Mark Norman Francis

Fotó: Andy Budd.

Mark Norman Francis már azelőtt az internettel foglalkozott, hogy a web megszületett volna. Jelenleg a Yahoo!-nál a világ legnagyobb weboldalán dolgozik mint kezelőfelület-tervező, új módszereket és kódolási szabályokat dolgoz ki, valamint nemzetközi támogatást nyújt a minőségi webfejlesztéshez.

A Yahoo! előtt a Formula One Management, a Purple Interactive és a City University vállalatoknál dolgozott különböző minőségben, többek között mint webfejlesztő, CGI programozó és rendszertervező. A http://marknormanfrancis.com/ oldalon blogol.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.