Validný, neznamená (nevyhnutne aj) sémantický.

Ste zaskočení? Dobre čítate. Skôr než tento článok zavriete, dovoľte mi prosím, vysvetliť moje tvrdenie.


<div class="nadpis">Navigácia:</div>
<div>
<div><a href="/">odkaz</a></div>
<div><a href="/">odkaz</a></div>
<div><a href="/">odkaz</a></div>
<div><a href="/">odkaz</a></div>
<div><a href="/">odkaz</a></div>
</div>


Výsledok predchádzajúcej ukážky kódu:

Navigácia:

odkaz

odkaz

odkaz

odkaz

odkaz


<h2>Navigácia:</h2>
<ul>
<li><a href="/">odkaz</a></li>
<li><a href="/">odkaz</a></li>
<li><a href="/">odkaz</a></li>
<li><a href="/">odkaz</a></li>
<li><a href="/">odkaz</a></li>
</ul>


Výsledok predchádzajúcej ukážky kódu:

Navigácia:

• odkaz


• odkaz


• odkaz


• odkaz


• odkaz

Vysvetlenie:

V prvom príklade sme len vytvorili divy. Problém je v tom, že napriek skutočnosti, že <div> je prvok blokový (dáta v ňom obsiahnuté, sa zobrazia na svojom vlastnom riadku), nie je sémantický (nedáva dátam charakter dôležitosti, význam), napr.: nadpisy, odstavce, zoznamy a atď... Môžete namietať: "O to sa predsa hravo postará CSS." Áno, ale iba na grafickej úrovni, nie však významovej. Viem, že moje argumenty sú možno pre vás nepresvedčivé, ale skúste si predstaviť, že si pozeráte modernú webovú stránku na staršom prehliadači, či inom výstupnom zariadení, ktoré slabo, alebo vôbec CSS nepodporuje.

Môžete argumentovať, že: "Veď predsa nikto také prehliadače dnes už nepoužíva." To je síce zaujímavý argument, avšak... Veľmi dobre vieme, že web už dávno nie je iba vecou stolových počítačov, ale stále viac naberajú na popularite alternatívne zariadenia typu: mobilné telefóny, PDA, terminály, televízne prijímače, bankomaty a mnohé iné... Väčšina týchto zariadení, má obmedzené zobrazovacie schopnosti. Existujú tiež negrafické zariadenia typu: textových prehliadačov (ktoré ignorujú grafiku, aj CSS), čítačky pre nevidiacich, braillové riadky (zariadenia umožňujúce nevidiacim čítať webový obsah), braillové tlačiarne atď...

Dodržiavaním sémantiky kódu, docielite správne pochopenie a následnú interpretáciu obsahu vašich stránok, v čo najširšom počte prehliadačov a výstupných zariadení. :)

P. S.: Vadí vám?

Vadí vám východzie nastavenie odrážok a ľavého odsadenia pri zoznamoch, nie je nič ľahšie, ako jednoduché pravidlo v CSS
ul {
list-style-type: none;
mergin-left: 0;
}

Vadí vám východzie nastavenie obrovskej veľkosti písma a tučné písmo pri nadpisoch H1 - h6, nie je nič ľahšie, ako jednoduché pravidlo v CSS
h1 {
font-size: 100%; /* Nastaví veľkosť textu na štandardnú - 100%. - Odporúčam vám nepoužívať pevné jednotky, typu: pixle, body, centimetre, milimetre a podobne... - V IE pre Windows, sa potom nedá meniť veľkosť písma. */
font-weight: normal; /* vypne tučné písmo */
}

Tak hor sa do písania nie len validných, ale aj zmysel dávajúcich a nie len pre najmodernešie prehliadače navrhovaných kódov našich webových stránok!!!