Webdesign: Sémantika v praxi

Najbežnejšie používané sémanticky správne XHTML konštrukcie. Logická štruktúra dokumentu, nadpisy, odstavce, zoznamy a citácie.

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. Pokiaľ nerozumiete niečomu v predchádzajúcej vete tak Vám silne odporúčam najprv si prečítať môj článok o základných pojmoch vo webdesigne.

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 a SEO 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ť.

johno#blog
  +- 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.

(29. január 2004)