Ez a bejegyzés a webes szabványok huszonegyedik leírása. Az eredeti, angol nyelvű cikket Mark Norman Francis írta.
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.
A szerzőről
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.
Fotó: Andy Budd.
