RSS

Zapomniane znaczniki XHTML

Liczba odsłon: 66

Język HTML zawiera kilka­naś­cie znacz­ni­ków, któ­rych użycie nigdy nie było wyma­gane. Dopóki bowiem kod HTML miał od­zwier­cied­lać jedynie wygląd strony WWW, każdy ele­ment języka posiada­jący zna­czenie nie tylko wizu­alne, ale też funkcyjne, mógł zos­tać zastą­piony ele­men­tem o zna­cze­niu wy­łącz­nie wizu­alnym. Dopiero in­wazja XHTML i CSS, roz­dziela­ją­cych warstwy lo­giczną i wizu­alną kodu, spowodo­wała po­nowne od­kry­cie znacz­ników, których wyko­rzys­tanie zna­cząco pop­rawia struk­turę kodu i umoż­liwia wy­róż­nia­nie frag­men­tów strony nie tylko pod wzglę­dem wyg­lądu, ale też peł­nio­nych przez nie funkcji.

Pop­raw­nie przy­goto­wana strona WWW powin­na być zapi­sana w spo­sób zapew­nia­jący nie tylko jej ele­gancki wyg­ląd, ale też właś­ciwy po­dział lo­gicz­ny doku­mentu. Do każ­dego ele­men­tu strony należy sto­sować właś­ciwe znacz­niki języka XHTML. Niestety, wielu autorów stron WWW zasy­puje wręcz swój kod ele­men­tami <b>, <i> czy – jeżeli zaczy­nają stoso­wać język opisu wyg­lądu CSS – <span><div>. Tak stworzona strona będzie oczy­wiś­cie wyg­lądać doskonale w każdej nowo­czes­nej przeglą­darce WWW; prob­lem zacz­nie się w momen­cie próby doko­nania automa­tycz­nej kon­wersji strony WWW na inną pos­tać (na przyk­ład na doku­ment tekstowy czy prezen­tację), czy nawet przy próbie wyś­wiet­lenia strony za po­mocą przeglą­darki nie obsługu­jącej kaska­dowych arkuszy stylu (nie mówię tutaj o jakichś staro­ciach: wys­tarczy wyobrazić sobie „wyś­wiet­lanie” strony za pomocą opro­gramo­wania czy­tają­cego zawar­tość strony osobie niewidomej).

<hr>

Element jedno­znacz­ni­kowy <hr> wy­daje się na pierwszy rzut oka nie tylko nie­przy­dat­ny, ale też nie­moż­liwy do sen­sow­nego wyko­rzys­tania w opisie logiki dokumentu.

Element ten może jednak świet­nie odpo­wia­dać wszyst­kim poziomym obiek­tom graficz­nym roz­dziela­ją­cym frag­menty strony. Na przykład cień rzu­cany przez nag­łówek strony lub roz­działu może być two­rzony właśnie przez element <hr>, zmody­fiko­wany za po­mocą CSS tak, by za­miast pros­tego tła czy ramki wyś­wiet­lać pół­przezro­czysty obraz cienia o okreś­lonej wysokości.

Efektem takiego zas­toso­wania ele­mentu <hr> (a nie na przyk­ład odpo­wiednio ostylowa­nego ele­mentu <div>) będzie ignoro­wanie go przez opro­gramo­wanie ana­lizu­jące treść strony. Również w przy­padku wyś­wiet­lania strony bez użycia arkusza stylu CSS, element <hr> zos­tanie wyświet­lony w uprosz­czonej, jednak podobnej do zamie­rzonej formie graficz­nej (pozioma kreska), a nie jako pusty blok <div>.

<q>

W języku HTML wtrą­cony w tekst cytat wys­tar­czyło zaw­rzeć wewnątrz ele­mentu <i>, by za­pisać go kursywą. Autorzy bar­dziej dba­jący o wygląd swojej strony mogli dodat­kowo zamknąć cytat znakami cudzy­słowu .

W języku XHTML właś­ciwym znacz­nikiem ozna­czania cytatów jest element <q>. Uży­wanie go nie tylko nic nie kosz­tuje, ale wręcz umoż­liwia zmniej­sze­nie kodu HTML strony i oszczę­dzenie sobie pracy. Wys­tarczy bowiem zas­tąpić ele­ment <i>, w którym zapi­sany jest cytat, ele­men­tem <q>, by nie tylko zyskać wyróż­nienie funkcji tak ozna­kowa­nego frag­mentu (element <i> ma tylko zna­czenie wizu­alne; element <q> ma zna­czenie funkcyjne!), ale też oszczę­dzić sobie potrzeby wpisy­wania do kodu encji HTML opisu­jących znaki cudzy­słowu. Ot, wystarczy napisać <q>Być albo nie być — oto jest py­tanie<q>, by przeglą­darka nie tylko zas­toso­wała kur­sywę, ale też dodała cudzy­słowy: Być albo nie być — oto jest pytanie.

Oczy­wiście, wygląd cyto­wanych frag­mentów można dowolnie us­talać za po­mocą kaska­dowych arkuszy stylu. W przeglą­dar­kach obsługu­jących w pełni CSS2 można nawet użyć pseudo­selek­torów :before:after w celu zmiany wyglądu znaków cudzy­słowu uży­wanych standar­dowo przez przeglą­darkę. By uzyskać taką samą elas­tycz­ność przy użyciu ele­mentu <i> (choć bez ozna­czenia funkcji wyróżnio­nego frag­mentu), trzeba użyć klas stylu.

W razie pot­rzeby pod­kreś­lenia źródła, z któ­rego pochodzi cyto­wany frag­ment, atrybut cite ele­mentu <q> umoż­liwia podanie ad­resu URI strony źródłowej.

<blockquote>

Więk­sze frag­menty cytowa­nego tekstu umieszcza się w od­ręb­nych aka­pitach, często sfor­mato­wanych w specy­ficzny sposób. Typowe for­mato­wanie obej­muje szerszy lewy i prawy margines oraz pochy­lony krój pisma; często sto­sowa­nymi efek­tami są też ciem­niej­sze tło i element gra­ficzny dużego cudzysłowu.

Klasyczne podejście pole­gało na zapi­saniu cytatu w osobnym aka­picie tekstu (element <p>), przypi­saniu do tego aka­pitu klasy stylu i zdefinio­waniu wyglądu tej klasy aka­pitów tekstu. Powo­duje to jednak utratę infor­macji o cytowaniu.

Właściwym roz­wią­za­niem jest zas­toso­wanie ele­mentu <blockquote>. Sam z siebie sta­nowi on akapit tekstu, zacho­wuje jednak infor­mację o cyto­waniu i umoż­liwia rezyg­nację z two­rzenia od­rębnej klasy stylu (a więc up­raszcza defi­nicje CSS). Tak samo jak element <q>, umoż­liwia też podanie w kodzie adresu pocho­dzenia cytowa­nego fragmentu.

I tak, frag­ment kodu zapi­sany w nas­tępu­jący sposób:

<blockquote cite="http://en.wikipedia.org/wiki/Sherlock_Holmes">Sherlock
Holmes is a fictional character of the late nineteenth and early twentieth
centuries who first appeared in publication in 1887. He is the creation of
Scottish-born author and physician Sir Arthur Conan Doyle.</blockquote>

zos­tanie na stronie przedsta­wiony jak poniżej:

Sherlock Holmes is a fictional character of the late nine­teenth and early twentieth cen­turies who first appeared in publi­cation in 1887. He is the creation of Scot­tish-born author and physician Sir Arthur Conan Doyle.

Jest warte pod­kreś­lenia, że zapi­sany w kodzie adres URL nie sta­nowi odnoś­nika (dotyczy to rów­nież ele­mentu <q>). Atrybut cite przecho­wuje infor­mację orga­niza­cyjną (meta­infor­mację), a nie użyt­kową. Adres źród­łowy jest jednak dos­tępny tak dla użytkow­nika (po otwarciu okna właści­wości akapitu tekstu lub – bar­dziej bez­poś­rednio – po podgląd­nięciu źród­ło­wego kodu HTML), jak i dla automa­tycz­nych sys­temów analizy cytowań.

<code>, <samp>, <kbd>, <var>

Każdy podsta­wowy kurs języka HTML opi­suje dwa znacz­niki umoż­liwia­jące zapsy­wanie frag­mentów tekstu czcionką nie­pro­porcjo­nalną (o stałej szero­kości znaków). Element <tt> poz­wala wtrą­cać takie frag­men­ty w aka­picie. Z kolei ele­ment <pre> nie tylko zmienia rodzaj kroju pisma, ale też sam tworzy akapit tekstu, do tego uwzględ­niając każdy znak od­stępu (spację) i przej­ścia do nowego wiersza (CR/LF).

W języku XHTML – przy wykorzys­taniu CSS – wszystkie te cechy roz­różnia­jące ele­menty <tt><pre> przes­tają być istotne. Możliwe jest zapi­sanie takiej defi­nicji stylu CSS, by ele­ment <tt> stał się ele­mentem blo­kowym uwzględnia­ją­cym wszystkie znaki w tekście, a ele­ment <pre> wręcz prze­ciw­nie — zaczął re­prezen­tować wtrą­cenie w aka­picie (odrębną sprawą jest sens takiej zamiany). Wygląd ele­mentu przes­tał być istotny: ważniej­sze jest zna­czenie wyróżnio­nego frag­mentu tekstu.

Język XHTML pro­muje uży­wanie obec­nych od dawna, rzadko jednak wyko­rzys­ty­wanych ele­mentów <code>, <samp>, <kbd> oraz <var>. Element <code> w wielu przy­pad­kach może wprost zas­tąpić <tt>: to element typu inline, odpo­wiada­jący frag­men­towi kodu (prog­ramu, skryptu pow­łoki, strony WWW). Podając na stronie WWW przyk­łady znacz­ników języka HTML czy nag­łówki pod­prog­ramów języka C należy używać właś­nie ele­mentu <code>.

Element <samp> wy­różnia z kolei frag­menty kodu stano­wiące kom­pletny przyk­ład kodu źródło­wego lub wyniku dzia­łania. Czasem decyzja o tym, czy użyć <code>, czy <samp>, może nie być łatwa. O zas­toso­waniu jed­nego lub dru­giego znacz­nika powinna decy­dować funkcja peł­niona przez przyk­ład kodu: jeżeli służy on wpro­wa­dzeniu jakiegoś ele­mentu języka lub wymie­nieniu go — należy użyć <code>. Gdy jednak poda­jemy gotowy, zło­żony przyk­ład, który ma spowo­dować kon­kretny rezul­tat — należy użyć <samp>.

Ele­menty <kbd><var> ozna­czają tekst, który ma być wpro­wa­dzony przez użytkow­nika z kla­wia­tury. Za pomocą <kbd> należy oznaczyć tekst, który ma być dos­łow­nie przepi­sany przez użytkow­nika; domyślnie taki tekst jest wyś­wiet­lany w oknie przeglą­darki czcionką nie­pro­porcjo­nalną, tak samo jak przyk­łady kodu. Element <var> ma sub­tel­niej­sze zna­cznie: ma on wystę­pować wew­nątrz innych ele­men­tów oz­nacza­jących kod (takich jak <code>, <samp> czy <kbd>), wyróż­niając te frag­menty, które mają być zastą­pione przez użytkow­nika dowolnym, odpo­wiada­jącym mu tek­stem (czyli po prostu para­metry). Na przyk­ład zapis <code>exit(<var>kod</var>)</code> spowo­duje wyś­wiet­lenie napisu exit(kod), w którym frag­ment kod jest para­met­rem pod­lega­jącym podsta­wieniu przez użytkownika.

<strong>, <em>

Znacz­niki <b><i> należą do jed­nych z pierw­szych pozna­wa­nych przez nowych adeptów języka HTML. Pierwszym błędem w ich użyciu jest zaz­wy­czaj stoso­wanie ich do pogru­biania i pochy­lania całych bloków lub aka­pitów tekstu — czyli zadań, które powin­ny być rea­lizo­wane przez arkusze stylu CSS. Gdy twórca stron WWW nauczy się w końcu używać ich do wyróż­niania tylko poje­dyn­czych wyrazów czy fraz, dowia­duje się o istnieniu ele­mentów <strong><em> i staje przed pytaniem: jaka jest róż­nica między <b><strong> czy <i><em>?

Odpo­wiedź jest prosta: ele­menty <b><i> mają wpływ tylko na warstwę wizu­alną tekstu, zaś ele­menty <strong><em> — rów­nież na warstwę funkcyjną. Za pomocą <b><i> ozna­czamy frag­menty, które mają tylko i wyłącznie inaczej wyglą­dać: na przyk­ład rozwi­jając skrót HTML możemy pokusić się o pogru­bienie liter two­rzą­cych ten skrót (Hyper­text Mark­up Langu­age) i ponieważ to pogru­bienie ma jedynie zna­czenie wizualne, a nie definiuje funkcji pogrubio­nego frag­mentu, uży­jemy w tym celu ele­mentu <b>. Z kolei pogru­biając w jakimś tekście wyraz czy frazę, na które chcemy położyć szcze­gólny nacisk i wymusić na czyta­jącym użycie innego akcentu lub tonu głosu przy ich czy­taniu, musimy zasto­sować <strong> lub <em>.

Jeszcze jednym argu­men­tem za stoso­waniem ele­mentów <strong><em> do pod­kreś­lania zna­czenia wyrazów, a nie ich wyglądu, jest możli­wość zmiany (za po­mocą arkuszy stylu CSS) spo­sobu inter­pre­tacji tych znacz­ników. Elementy <b><i> w zasa­dzie muszą być inter­preto­wane jako pogru­bienie i kursywa — właśnie z racji peł­nienia jednej, kon­kretnej funkcji wizualnej. Interpre­tacja ele­mentów <strong><em> nie jest taka jedno­znaczna. Co waż­niejsze, o ile zmiana wyglądu ele­mentów <b><i> jest tak absur­dalna, jak opi­sanie czerwo­nego przed­miotu słowem „zie­lony”, w przy­padku ele­mentów o zna­czeniu funkcyj­nym – <strong><em> – mamy pełne prawo zmienić całko­wicie sposób inter­pre­tacji — na przyk­ład powo­dując wyś­wiet­lanie tekstu wszystkich ele­mentów <strong> na czerwono w celu zwięk­szenia ich widoczności.

<dfn>, <dl>, <dd>, <dt>

Element <dfn> jest uży­wany w celu wyróż­nienia terminu tech­nicz­nego lub nazwy. Specyfi­kacja XHTML (i zdrowy roz­sądek) zaleca, aby wyróż­niać wyłącznie pierwsze wystą­pienie ter­minu na stronie WWW; pozos­tałe wystą­pienia nie muszą być spec­jalnie ozna­czone i mogą być zapi­sane zwykłą czcionką.

Nieco ciekaw­sze są ele­menty <dl>, <dd><dt> tworzące listy terminów. Można je sto­sować w zastępstwie pros­tych list wypunkto­wanych i numero­wanych lub tabel. Na przykład poniż­szy fragment kodu:

<dl>
 <dt>CSS</dt>
 <dd>Język opisu wyglądu elementów, nakierunkowany na języki
 opisu struktury dokumentu operujące na <dfn>znacznikach</dfn>.
 W szczególności język CSS nadaje się do opisu wyglądu
 dokumentów XHTML.</dd>
 <dt>XHTML</dt>
 <dd>Język opisu struktury logicznej dokumentu. Powstał (pod nazwą
 HTML) jako uproszczona forma języka SGML. Nazwa XHTML odzwierciedla
 unifikację słabo sformalizowanego języka HTML z silnie sformalizowanym
 językiem XML.</dd>
</dl>

spowo­duje pows­tanie następu­jącej listy definicji:

CSS
Język opisu wyg­lądu ele­men­tów, nakierunko­wany na języki opisu struk­tury doku­men­tu operu­jące na znacz­ni­kach. W szczegól­ności język CSS nadaje się do opisu wyg­lądu doku­men­tów XHTML.
XHTML
Język opisu struk­tury logicz­nej doku­mentu. Powstał (pod nazwą HTML) jako uprosz­czona forma języka SGML. Nazwa XHTML odzwier­ciedla unifi­kację słabo sformali­zowa­nego języka HTML z silnie sforma­lizo­wanym językiem XML.

Powyższe trzy znacz­niki dosko­nale pasują do inter­netowych słow­ników i encyklo­pedii. Dokładne ozna­czenie ter­minów i odpo­wiada­jących im defi­nicji nieco kompli­kuje co prawda pracę (trzeba bowiem stworzyć defi­nicję stylu CSS zapewnia­jącą elegancki wygląd listy defi­nicji), upraszcza jednak znako­micie późniejsze automa­tyczne ana­lizo­wanie stron WWW i przetwa­rzanie ich treści na doku­menty innego typu.

<abbr>, <acronym>

Ostatnie dwa opisy­wane znacz­niki nabie­rają zna­czenia dopiero w mo­mencie spoj­rzenia na nie z po­zycji twórcy strony WWW przys­toso­wanej do obs­ługi przez osoby niewi­dome. Ich celem jest zamiana nic nie zna­czą­cych skrótów wyra­zów i nazw w ich pełne formy.

Na przyk­ład angiel­skie wyra­żenie „we repre­sent the WHO” może zostać zinter­preto­wane przez czytnik w sen­sie „repre­zentu­jemy kogo” i wypowie­dziane w spo­sób właś­ciwy dla wyrazu who, a nie dla skrótu WHO. Stosując ele­ment <acronym> z atry­butem title roz­wija­jącym skrót (we repre­sent the <acronym title="World Health Organi­zation">WHO</acronym>) za jed­nym zamachem usuwamy prob­lem nie­właści­wego odczy­tania wyrazu, ozna­czamy skrót nazwy w spo­sób poz­wala­jący określić funkcję składa­ją­cych się na niego liter w tekście, dajemy sobie moż­liwość mody­fiko­wania wyg­lądu skrótowców w sposób scentra­lizo­wany (za po­mocą arkuszy stylu CSS) i wprowa­dzamy do treści strony roz­wi­nięcie skrótu dos­tępne po wskazaniu tegoż skrótu myszą.

Element <acronym> dotyczy tylko skrótow­ców stano­wią­cych nazwy firm czy organi­zacji. Szersze zna­czenie ma ele­ment <abbr>, umoż­liwia­jący zamianę dowol­nego skrótu na rozwi­nięcie. Na przykład, jeżeli zapi­szemy na stronie WWW tekst referat ds. różnych, opro­gramo­wanie synteza­tora głosu może odczytać ten frag­ment jako referat de es różnych lub w inny, niezbyt natu­ralny sposób. Wystarczy jednak zapisać kod w formie referat <abbr title="do spraw">ds.</abbr> różnych, by wyra­żenie do spraw było wyświet­lane w formie krót­kiej, ale od­czyty­wane jako rozwinięcie.

Podsumowanie

Korzys­tanie ze wszystkich wymie­nio­nych powyżej ele­men­tów języka XHTML może wyda­wać się na pierwszy rzut oka marno­waniem czasu. Ten sam efekt wizu­alny można bowiem osiągnąć znacz­nie prost­szymi meto­dami — a czy­tel­nika strony intere­suje prze­cież jej wyg­ląd, a nie ele­gancka struk­tura kodu XHTML.

Pozorna strata czasu może się jednak zmie­nić w osz­częd­ność w momen­cie potrzeby prze­prowa­dzenia korekty lub kon­wersji doku­mentu. Właściwie ozna­czone wyróż­nie­nia, skróty czy listy defi­nicji można automa­tycz­nie zamienić na właś­ciwy dla danej formy pre­zen­tacji format — nieza­leż­nie od tego, czy doku­men­tem wyjścio­wym ma być doku­ment edy­tora tekstu czy prezen­tacja wyświet­lana projektorem.

Wykorzys­tanie właś­ciwych ele­men­tów XHTML upraszcza też stero­wanie wyg­lądem serwisu WWW. Wygląd wyróż­nio­nych logicz­nie skrótów, cytatów i defi­nicji można okreś­lić bez pot­rzeby two­rzenia nowych klas stylu. Uprosz­czeniu ulega w ten sposób plik CSS, w szcze­gól­ności w przy­padku inten­syw­nego wyko­rzysty­wania selek­torów dziedzi­czenia.

Najważ­niejsze jest jednak dobre samopo­czucie, jakie towa­rzyszy stwo­rzeniu kodu XHTML, który można wyko­rzys­tać w niezmie­nio­nej formie w wielu miejscach strony, stosując tylko inne dekla­racje stylu.


Wielkie dzięki za tekst, dowiedziałem się kilku rzeczy, które mnie interesowały, a których jakoś nigdy nie miałem motywacji poszukać. Dodałbym jeszcze jedną zaletę starannego tworzenia kodu: strony takie lepiej się pozycjonują, a to już zysk wymierny i dla wielu ważny.