21. Kevéssé ismert szemantikus elemek

By Szökőcs Csaba

• Előző leírás — HTML űrlapok — az alapok
• Következő leírás — Általános tárolók — a div és a span elemek
• Tartalomjegyzék

Bevezető

Ebben a leírásban néhány kevéssé ismert és ritkán használt szemantikus elemet fogok bemutatni a HTML-ből. Megnézzük, hogyan lehet programozási kódot megjelölni, számítógép kimenetet jelölni, idézeteket és rövidítéseket megadni, a dokumentumok változásait megjelölni, stb. A végén még bemutatok néhány új szemantikus jelölést a HTML 5 vázlatából.

• Kapcsolat információk kiemelése
• Programozási nyelvek és kódok
• Számítógépes kimenet megjelenítése
• Változók
• Idézetek
• Rövidítések
• Példányok definiálása
• Felső- és alsó index
• Sortörések
• Vízszintes vonalak
• Dokumentumok változása (beillesztés és törlés)
• Néhány jövőbeli HTML elem
• Összefoglaló

Megjegyzés: minden példakód mögött találsz egy „Forrás megtekintése” hivatkozást, amelyre ha rákattintasz, akkor megnyithatod a példakódhoz tartozó oldalt, hogy láthasd, hogyan jelenik meg a böngészőben — így élő példákat kapsz a felsorolt elemekhez, és a forrást is könnyen megnézheted vagy módosíthatod.

Kapcsolat információk kiemelése

Az address elem valószínűleg az egyik legrosszabb hírű és leginkább félreértett elem a HTML-ben. Első ránézésre azt mondanánk, hogy az „address” elnevezés alapján ez az elem leginkább postai- vagy e-mail címeket foghat közre. Ez azonban csak részben igaz.

Az address valódi jelentése az lenne, hogy kapcsolati információkat biztosítson a lap, vagy a lap nagyobb részének szerzőjéről, esetleg szerzőiről. Ez vonatkozhat névre, e-mail címre, postai címre vagy egy kapcsolati lapra való hivatkozásra is. Például:

<address> 
  <span>Mark Norman Francis</span>, 
  <span class="tel">1-800-555-4865</span>
</address>

A következő példában az address elemet a láblécben adjuk meg, és egyszerűen hivatkozunk benne egy másik lapra az oldalról. A bővebb kapcsolati információkat érdemes így egy külön lapon megadni, hogy ne ismételjük vég nélkül az oldal minden lapján.

<p class="footer">© Copyright 2008</p>
<address>
<a href="/contact/">Mark Norman Francis</a>
</address>

Természetesen, ha az oldalnak több szerzője is van, akkor ezt a formát használhatjuk ugyanígy a többi szerzőre is, különböző kapcsolati lapokra hivatkozva.

*Hibás* viszont az address elem használata minden más cím megadására, mint például:

<p> A cégünk címe: </p>
  <address>
    Opera Software ASA,
    Waldemar Thranes gate 98,
    NO-0175 OSLO,
    NORWAY
  </address>

(Persze ha az Opera felelősséget vállal a leírásban foglaltakért, akkor ez is helyes lehet, annak ellenére, hogy én írtam a cikket, és nem az Opera.)

Általános címekhez használhatod az ún. „microformat” elemeket annak jelölésére, hogy egy paragrafus egy címet tartalmaz. A microformatokról bővebben a dev.opera.com leírásaiban olvashatsz.

Programozási nyelvek és kódok

A code elemet arra használhatjuk, hogy számítógépes kódokat vagy programozási nyelvek kódjait jelöljük vele, mint például PHP, JavaScript, CSS, XML és társaik. Bekezdésen belül egy rövid kódrészletet egyszerűen tedd a code tagek közzé, mint itt:

<p>Nem ajánlott az eseménykezelőket, mint például
az <code>onclick</code>, közvetlenül a HTML-ben használni.</p>

Nagyobb, többsoros kódrészletek bemutatására előformázott blokkokat érdemes használni, amint azt a Szöveges részek megjelölése HTML-ben leírásban már megmutattuk.

Bár nincs megszabott módszer arra, hogy hogyan jelölheted meg a code elemben használt programozási nyelvet vagy kódot, de erre használhatod a class attribútumot. Gyakori módszer (sőt a HTML 5 vázlatban is említik), hogy először beírod a language- előtagot, majd utána a használt nyelvet. Így a fenti példa a következőképpen módosul:

<p>Nem ajánlott az eseménykezelőket, mint például
az <code class="language-javascript">onclick</code>, 
közvetlenül a HTML-ben használni.</p>

Egyes programozási nyelveknek olyan nevei vannak, amelyeket nem lehet egyszerűen használni a class attribútumban. Ilyen például a C# (C-Sharp). A helyes módja a nyelv leírásának az lenne, hogy class='language-c\#', de ez zavaró és könnyen elírható. Ezért inkább azt javaslom, hogy az osztálynevekben csak betűket és kötőjelet használjunk, és ilyen esetekben írjuk ki az ejtett formát. Ebben az esetben például használjuk inkább a class='language-csharp' elnevezést.

Számítógépes kimenet és bemenet megjelenítése

A samp és kbd elemekkel jelölhetjük meg egy számítógépes program kimenetét és bemenetét. Például:

<p>Annak a megállapítására, hogy egy számítógép csatlakozva 
van-e az internethez, gyakori módszer a <code>ping</code> nevű
számítógépes program használata, amellyel ellenőrízhetjük, hogy
egy másik gép elérhető és működik.</p>

<pre><samp class="prompt">kittaghy%</samp> <kbd>ping -o google.com</kbd>
  <samp>PING google.com (64.233.187.99): 56 data bytes
  64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms

  --- google.com ping statistics ---
  1 packets transmitted, 1 packets received, 0% packet loss
  round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
  </samp></pre>

A samp elemmel egy számítógépes program kimenetét jelölhetjük. Amint a fenti példában is látható, a különböző típusú kimeneteket megjelölhetjük a class attribútum használatával. Arra azonban nincs széles körben elterjedt gyakorlat, hogy ezeket a típusokat hogyan nevezzük el.

A kbd elemmel az olyan bemeneteket jelölhetjük, amellyekben a felhasználó kapcsolatba lép a számítógéppel. Bár ez hagyományosan a billentyűzet (erre utal a „kbd” rövidítés is), más típusú bemenetekre is használhatjuk, például hangparancsok esetében.

Változók

A var elemet használhatjuk változók jelölésére szöveges környezetben. Ez lehet egy matematikai változó egy algebrai kifejezésben, vagy egy programkódban található változó. Például:

<p>Az <var>x</var> értéke 4 ebben az egyenletben:
 3<var>x</var>+2=14.</p>
    
<pre><code class="language-perl">
my <var>$udvozlet</var> = "Helló világ!";
</code></pre>

Idézetek

A cite elemet arra használjuk, hogy megjelöljük vele a közrefogott tartalom forrását — egy személy, egy könyv vagy más publikáció idézésekor, vagy általánosan egy másik forrásra való hivatkozáskor. Ilyen esetekben a forrást a cite elemmel jelölhetjük. Például:

<p>A <q>Mindent a legegyszerűbben, de nem egyszerűbben kell csinálni</q> 
mondást gyakran tulajdonítják <cite>Albert Einsteinnek</cite>,
pedig valójában csak egy körülírása egy olyan idézetnek, 
amelyet jóval nehezebb megérteni.</p>

Rövidítések

Az abbr és az acronym elemeket olyan esetekben használhatjuk, amikor egy rövidítést kell jelölnünk, lehetőséget teremtve ezáltal a rövidítés feloldására anélkül, hogy megtörnénk a dokumentum formáját.

A szöveg rövidített alakja kerül az abbr elembe, míg a hosszabb, teljes vátlozata a title attribútumba. Például:

<p>A <abbr title="Hypertext Markup Language">HTML</abbr>
dokumentumokhoz <abbr title="Cascading Style Sheets">CSS</abbr>
használatával rendelhetünk stílust.</p>

Az acronym elemmel egy betűszót jelölhetünk, ami ugyancsak egy rövidítési forma, azzal a különbséggel, hogy a végeredmény olyan, mintha egy külön szó lenne, és úgy is kell ejteni. Ilyen például a gyes, ami a gyermekágyi segély rövidítése. Bár a HTML 4.01 specifikáció megengedi mind az abbr, mind az acronym elemeket is, mégis egy kis problémába ütközünk, ha helyesen akarjuk jelölni ezeket a szavakat.

Az Internet Explorer (a 7-es verzió előtt, de a 7-es sem húzza alá a rövidítéseket szaggatott vonallal, mint a többi böngésző) nem ismeri fel az abbr elemet, viszont felismeri az acronym elemet. Sajnos az acronym a rövidítéseknek csak egy részhalmaza, ezért helytelen például egy HTML rövidítést acronym elemmel jelölni.

A HTML 5 specifikáció vázlatában ráadásul az egyértelműbb szabvány érdekében el is hagyták az acronym elemet, mivel minden így jelölt szöveg egyben egy érvényes rövidítés is.

A legjobb, amint tehetsz, hogy kerülöd az acronym használatát, és csak az abbr elemet használod a kódodban. Ha vizuális stílust akarsz rendelni az abbr elemhez, akkor tedd bele a tartalmát még egy span elembe, és ehhez rendeld a stílust az abbr helyett, hogy minden böngésző ugyanúgy jelenítse meg az elemet. Erről később részletesebben is fogunk beszélni a Szöveg stílusozása CSS-sel leírásban.

Példányok definiálása

Ugyancsak zavaros a dfn elem helyes használata is, amit a HTML specifikáció úgy értelmez, hogy a közrezárt kifejezés példánydefiníciója. Ez eléggé közel áll a dt elem értelméhez, amit a definíciós listákban használhatunk.

A különbség az, hogy a dfn elem nem kell része legyen egy kifejezéseket és értelmezéseket definiáló listának, hanem egyszerűen bele lehet fűzni a normál szövegfolyamba. Lássunk egy példát a dfn elem használatára:

<p><dfn>HTML</dfn>: A HTML a "HyperText Markup Language" 
rövidítése. Ezt a nyelvet használják a webes 
dokumentumok tartalmának leírására.</p>

Megjelenik benne a HTML kifejezés, majd közvetlenül utána következik a kifejezés értelmezése, így ideális hely a dfn elem számára. Minden kifejezésre csak egyszer használjuk a lapon belül, az első előfordulásnál, de a kifejezéseket amúgy is csak egyszer szoktuk értelmezni egy lapon, úgyhogy ez nem okozhat nagy gondot.

Ez mind szép és jó, de egy ilyen izolált példa nem túl praktikus. A dfn elemet akkor ajánlott használni, ha egy kifejezés többször is előfordul a lapon. Például A HTML alapjai leírásban több mint 50-szer fordul elő a HTML kifejezés. Az <abbr title="HyperText Markup Language>HTML</abbr> kód használata minden egyes alkalommal csak fölösleges sávszélesség-pazarlás, vizuálisan zavaró és valószínűleg igen fárasztó a képernyő-felolvasókat használóknak is, akik minden egyes előforduláskor meghallgathatják, hogy minek is a rövidítése a HTML. Ehelyett megadhatjuk ezt a kódot a HTML definiálásának a helyén:

<p>A <dfn><abbr>HTML</abbr></dfn> („HyperText Markup Language”, 
azaz hiperszöveg-leíró nyelv) a webes dokumentumok 
leírására szolgáló nyelv.</p>

Később, a HTML rövidítés használatakor egyszerűen jelölhetjük így: <abbr>HTML</abbr>. A kliens eszköz így biztosíthat egy módot a felhasználónak arra, hogy a rövidítés definícióját megmutassa. Sajnos jelenleg nincs olyan kliens eszköz, amelyik biztosítana erre valamilyen módot, beleértve a képernyő-felolvasókat is. Éppen ezért jobb módszer, ha ezt az információt a title attribútumban is megadod:

<p>A <dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
(„HyperText Markup Language”, azaz hiperszöveg-leíró nyelv) 
a webes dokumentumok leírására szolgáló nyelv.</p>

Most viszont sajnos megdupláztuk a HTML rövidítés kifejtését, ami problémát okozhat a képernyő-felolvasóknak. Ha viszont kihagyjuk a vizuális megjelenítését, akkor a dokumentum kevésbé lesz hasznos a látóknak, akik a látogatók jóval nagyobb részét teszik ki az esetek túlnyomó részében.

Szerintem ez egy elfogadható megoldás, ha csak egy-két kifejezés definícióját kell megadnunk (az olyan lapokon, amelyeken sok definíciót kell megadni, jobb lehet egy külön lapot létrehozni a definícióknak, ahol a sokkal egyértelműbb definíciós lista is használható). De ha nagyon zavar a fenti megoldás, még használhatod ezt is:

<p>A <abbr title="HyperText Markup Language">HTML</abbr>
(<dfn>HyperText Markup Language</dfn>, azaz hiperszöveg-leíró nyelv) 
a webes dokumentumok leírására szolgáló nyelv.</p>

Ebben az esetben a kliens eszköznek még mindig kellene biztosítania egy módszert arra, hogy az értelmezést összekapcsolja a különböző példányokkal. Jelenleg viszont egyetlen böngésző sem tesz semmi hasznosat a dfn elemmel, így szinte csak CSS stílusozásra használhatjuk. A fenti megoldás a legjobb, amit eddig sikerült kitalálnunk.

Ez egy elég szerencsétlen eset, mivel a specifikáció anélkül készült el, hogy világos útmutatást adna arra, hogyan kellene használni pontosan az elemet, és valószínűleg nem a valódi használatát vették figyelembe az elemnek, máskülönben lenne valamilyen módszer a kifejezések definíciójának és leírásának az összekapcsolására. A HTML 5 specifikáció már részletesebben foglalkozik azzal, hogy hogyan kell használni a dfn elemet, de ez még csak vázlat, és nem alkalmas a mindennapi használatra.

Felső- és alsó index

Ha egy szövegrészt felső- vagy alsó indexként akarsz megjelölni (vagyis a többi szövegrészhez viszonyítva kissé feljebb vagy lejjebb elhelyezni), akkor erre használhatod a sup és a sub elemeket.

Egyes nyelvekben szükség van ezekre a rövidítések helyes használatához, valamint rövid matematikai formulák leírására is használható (bonyolultabb formulákhoz már a MathML használatát javasoljuk, amely pontosan a komplex és bonyolult matematikai formulák leírására készült).

<p>A víz kémiai vegyjele a H<sub>2</sub>O, vagy más néven 
a hidrogén-hidroxid.</p>
<p>Albert Einstein híres képlete az energia megmaradására 
az E=mc<sup>2</sup> — az energia egyenlő 
a tömeg és a sebesség négyzetének a szorzata.</p>

Sortörések

Amiatt, ahogy a HTML a fehér karaktereket kezeli, nem tudjuk a sorok tördelését úgy befolyásolni, hogy egyszerűen megnyomjuk az Entert a szöveg beírásakor (például ha egy bekezdésben megadunk egy postai címet, és azt szeretnénk, ha a cím minden része külön sorban jelenne meg).

A szövegbe a br elemmel tehetünk be egy sortörést. Viszont csak abban az esetben használjuk, amikor valóban szükség van a sortörésre, és soha ne használjuk helykitöltésre, például arra, hogy megnöveljük a távolságot két bekezdés között — ezt sokkal könnyebben és szebben megtehetjük a CSS-sel.

Például a korábban megadott Opera címet így írhatjuk le:

<p> A cégünk címe: </p>
  <address>
    Opera Software ASA,<br>Waldemar Thranes gate 98,<br>
    NO-0175 OSLO,<br>NORWAY
  </address>

Természetesen, ha XHTML-t használsz a HTML helyett, akkor az elemet le kell zárni, valahogy így: <br />

Vízszintes vonalak

Egy vízszintes vonalat a HTML-ben a hr elemmel készíthetünk. Ez behelyez a dokumentumba egy vonalat, amely meghatározás szerint arra szolgál, hogy elválassza egymástól a dokumentum különböző szakaszait.

Sokan nem értenek egyet azzal, hogy ez valóban egy szemantikus elem, és nem pusztán vizuális, prezentációs célokat szolgál. Ennek az előzményei a nyomtatott irodalomba nyúlnak vissza, ahol egy fejezeten belül (amely egy könyv szakaszainak felel meg) egy vízszintes vonalat tettek az olyan jelenetek közé, amelyek más időben és/vagy más helyen játszódtak. A verseskötetekben ugyancsak sokszor használtak ilyet a nagyobb szakaszok elválasztására.

Egyik használati mód sem ad okot egy új fejléc elem bevezetésére, amely egy elfogadott mód a dokumentum szakaszhatárainak a jelölésére.

A hr elemnek nincs semmilyen különleges attribútuma, és CSS-ben stílusozható, ha az alap megjelenése nem megfelelő.

Hasonlóan a sortöréshez, ha XHTML-t használsz HTML helyett, akkor az elemet le kell zárnod: <hr />

Dokumentumok változása (beillesztés és törlés)

Ha egy dokumentum az első megjelenés után megváltozott, akkor a későbbi változásokat megjelölheted, hogy a visszatérő látogatók vagy az automatikus folyamatok láthassák, mi és mikor változott.

Az új szövegeket (beszúrásokat) az ins elemmel jelölheted meg. Az eltávolított (törölt) szövegeket a del elemmel tudod megjelölni. Ha a törlés és a beszúrás ugyanazon a helyen történt a dokumentumban, akkor a javasolt módszer szerint előre kerül a törölt szöveg, majd ezt követi a beszúrás.

Mindkét elemnek van még két attribútuma, amelyekkel megadhatod a szerkesztés részleteit.

Ha a módosítás oka valahol megtalálható a lapon vagy a weben, akkor hivatkozhatsz erre a dokumentumra vagy szakaszra a cite attribútum segítségével. Ez egészen pontosan arra vonatkozik, hogy „ez a változás ebből az okból történt”.

Ezen kívül megadhatod azt az időpontot is, amikor a változás törént, mégpedig a datetime attribútum segítségével. Az érték egy ISO szabvány szerinti időpont kell legyen, amelyik a következő formátumot használja: “ÉÉÉÉ-HH-NN ÓÓ:PP:MM ±ÓÓ:PP” (további információt erről a Wikipédián találsz).

Egy példa mindkét attribútum használatára:

<p>Csak a felmerült problémákat kellene megoldanunk.
Amint <cite><del datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">Donald Knuth</del><ins
  datetime="2008-03-25 18:26:55 Z"
  cite="/changes.html#revision-4">C. A. R. Hoare</ins></cite>
  mondta: <q>az elhamarkodott optimalizálás minden
  gonosz gyökere</q>.</p>

Néhány jövőbeli HTML elem

Amint azt már többször is megemlítettük ebben és más leírásokban is, már hozzáférhető a HTML 5-ös verziójának a vázlata. Ez lesz a legradikálisabb frissítés a HTML-hez a fennállása óta. Ahelyett, hogy azon gondolkodtak volna, hogy mi lenne jó az embereknek, elemezték a jelenleg használt HTML dokumentumokat az interneten, így jó esély van arra, hogy az időközben széleskörűen elterjedt szemantikus jelöléseket beveszik a szabványba.

A következő néhány új HTML elem például jelentősen javítja majd a dokumentumok kódolását és használatát:

• header — a lap fejlécét tartalmazza; szokás szerint a logót és a címet, esetleg egy rövid bemutatkozó részt vagy egy globális navigációs struktúrát, mint például belépés, kilépés, profil hivatkozások.
• footer — a lap láblécét tartalmazza, amely szokás szerint további hivatkozásokat tartalmaz a lapra; copyright és más hivatalos információkat.
• nav — a lap fontosabb navigációs hivatkozásait tartalmazza.
• article — a lapnak azt a részét tartalmazza, amelyik a fő területen van, kivéve a lap olyan elemeit, mint a navigáció, a fejléc vagy a lácléc.
• aside — az oldalsáv információit tartalmazza a lap egy adott területén, de arra is jó lehet, hogy szavazásokat vagy megjegyzéseket helyezz el a fő tartalomban.

Természetesen több is van, ezeket a HTML 5 specifikációjában találod meg.

Összefoglaló

Ebben a leírásban bemutattunk néhány kevéssé ismert és ritkábban használt szemantikus elemet a HTML-ből. A következő leírásban bemutatjuk, hogyan kell helyesen használni a két szemantikusan semleges HTML elemet, a div és a span elemeket.

• Előző leírás — HTML űrlapok — az alapok
• Következő leírás — Általános tárolók — a div és a span elemek
• Tartalomjegyzék

A szerzőről

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.