V tomto článku nájdete ukážky sémanticky správnych XHTML konštrukcii, ktoré sa bežne využívajú v kóderskej praxi – logická štruktúra dokumentu, nadpisy, odstavce, zoznamy a citácie.
Všetky konštrukcie sú zapísané v XHTML
1.0 Strict, čo je v súčastnosti asi najčastejšie používaný štandard medzi
kódermi, ktorí sémantike venujú nejakú pozornosť.
Logická štruktúra dokumentu a nadpisy
Každému sa bude zdať samozrejmé keď otvorí knihu o webdesigne, že v nej nájde
informácie o webdesigne. Je taktiež samozrejmé, že keď si nalistuje kapitolu o
použiteľnosti tak sa tam bude písať o použiteľnosti. Prečo to píšem? No predsa
každá internetová stránka s vypnutými štýlmi, JavaScriptom, … je v podstate
kniha a preto pre ňu musí platiť to isté.
Pod každým nadpisom teda musia byť informácie, ktoré sa ho týkajú. Toto však
platí pre celý strom nadpisov ako aj strom dokumentu, na čo naozaj veľa kóderov
zabúda. Ukážme si teda ako by mal taký správny strom nadpisov vyzerať.
Nadpis serveru
+- Webdesign: Základné pojmy
| +- SEO — Optimalizácia pre vyhľadávače
| +- CSS — Kaskádové štýly
| +- XHTML
| +- Validita — Syntaktická správnosť
| +- Sémantika — Významová správnosť
| +- Prístupnosť — Accessibility
|
+- Staršie zápisy
+- Novšie zápisy
Jediné čo ostáva je zadefinovať tieto nadpisy tak aby spĺňali zadefinovanú
štruktúru. Slúžia nám na to elementy <h1> až
<h6> pričom <h1> je v strome nadpisov
najvyššie a žiadnu úroveň nesmieme preskočiť. Vždy teda začíname s
<h1> a postupne sa dostávame k nižším úrovniam.
Výsledný kód bude vyzerať takto:
<h1>johno#blog</h1>
<h2>Webdesign: Základné pojmy</h2>
<h3>SEO — Optimalizácia pre vyhľadávače</h3>
<h3>CSS — Kaskádové štýly</h3>
<h3>XHTML</h3>
<h3>Validita — Syntaktická správnosť</h3>
<h3>Sémantika — Významová správnosť</h3>
<h3>Prístupnosť — Accessibility</h3>
<h2>Staršie zápisy</h2>
<h2>Novšie zápisy</h2>
Odstavce
Aj keď to možno znie neuveriteľne, tak práve tu sa robia najväčšie chyby.
Veľa kóderov používa na nové odstavce dvojnásobné zariadkovanie elementom
<br />. Aj keď výsledok môže vyzerať rovnako sémantika
odstavca sa vytráca.
Na definovanie odstavca nám slúži párový element <p>. Pozrite sa na
teda túto jednoduchú ukážku správneho použitia odstavcov. Aby ste aj tu
nezabudli na dôležitosť logickej štruktúry dokumentu pripojil som k ukážke
nadpis.
<h3>Prístupnosť — Accessibility</h3>
<p>Každá stránka alebo aspoň jej obsah…</p>
<p>Menej prístupné stránky strácajú…</p>
Nezabúdajte na to, že samostatné odstavce by mali obsahovať ucelenú myšlienku
a nielen slúžiť na prevzdušnenie dlhého textu.
Usporiadané a neusporiadané (odrážkové) zoznamy
Zo zoznamami si väčšina začínajúcich kóderov komplikuje život. Snažia sa
napodobniť odrážky rôznymi znakmi a mnohonásobnými medzerami, no pritom je to
úplne jednoduché.
Pokiaľ máme nejaký zoznam, v ktorom rozhoduje poradie položiek použijeme
element <ol> definujúci usporiadaný zoznam. Typickým
príkladom môže byť nejaký návod alebo obsah knihy.
<ol>
<li>Do hrnčeka dáme vodu a jedno vajce.</li>
<li>Po zovretí vody varíme 7 minút.</li>
<li>Podávame s osoleným chlebom.</li>
</ol>
Naopak keď na poradí položiek nezáleží je ideálne použiť element
<ul> pre odrážkový zoznam. Príkladom neusporiadaného zoznamu
môže byť napríklad zoznam vecí, ktoré treba nakúpiť alebo aj menu rozsiahlejšej
internetovej stránky.
<ul>
<li>hrnček</li>
<li>vajce</li>
<li>chlieb</li>
<li>soľ</li>
</ul>
Citácie
Citovanie rôznych zdrojov sa na internete rozmohlo hlavne na blogoch ale
najbežnejšie s ním stretávame v novinách. Pri citáciach však treba rozlišovať
citácie na dva druhy. Blokové a riadkové.
Na dlhé citácie je ideálne použiť párový element <blockquote>, ktorý
môže obsahovať aj celé časti iných stránok. Napríklad:
<blockquote>
<p>Môj počítač je:</p>
<ul>
<li>600MHz procesor</li>
<li>256MB RAM</li>
</ul>
</blockquote>
Naopak na krátke citácie sa využíva element <q>.
<p>Platí tu výrok <q>Sýty hladnému neverí.</q></p>
Oba elementy obsahujú nepovinný atribút cite, ktorý má obsahovať
odkaz na citovanú stránku. Tento atribút sa však skoro vôbec nevyužíva pretože v
momentálnych prehliadačoch je bez klientského skriptovania pre bežného užívateľa
takmer nepoužiteľný.
Podrobnejšie informácie
Pokiaľ Vás zaujíma sémantika nespomínaných elementov či atribútov odporúčam
Vám prebehnúť si DTD XHTML
1.0 Strict. Sú tam popísané významy naozaj všetkých tagov a ich
atribútov.