Správná struktura kódu

HTML kód lze psát v podstatě dvojím způsobem. Buď hezky, nebo prasácky (přestože se toto slovo může někomu zdát trochu drsnější, označení „prasácký kód“ pro špatně sestavený HTML kód je poměrně zažité). Takový kód tvoří většinou WYSIWYG editory, a někteří „webdesigneři“.

My si ukážeme, jak tvořit kód správný a hezký. Podstatou je zachování logické struktury. Ukázka prozradí víc.

<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01//EN“ „http://www.w3.org/TR/html4/strict.dtd“>
<html lang=“cs“>
  <head>
  <meta http-equiv=“content-type“ content=“text/html; charset=utf-8″>
  <title></title>
  <meta name=“description“ content=““>
  <meta name=“robots“ content=“all,follow“>
  </head>

  <body>
  <h1>Nadpis (název) mého webu</h1>

  <h2>Název kapitoly</h2>
    <p>Obsah kapitoly…</p>
    <p>Další odstavec obsahu…</p>

  <h3>Podnadpis kapitoly</h3>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>

  <hr>

  <h2>Název další kapitoly na stránce</h2>
    <p></p>
    <img src=““ alt=““ width=““ height=““>

  <hr>

  <h2>Kontakt</h2>
    <address>
      Jméno<br>
      Adresa<br>
      E-mail<br>
    </address>

</html>

Hlavní nadpis webu – h1 by měl být na začátku. Za ním by měl následovat další obsah v logické posloupnosti.

Obsah by měl být strukturován pomocí nadpisů a text rozdělen pomocí odstavců. Obsah stránky můžeme také rozdělit pomocí tagu hr, který přes CSS většinou schováváme: V HTML kódu mu třeba přiřadíme třídu .noscreen a v CSS definujeme .noscreen {display: none;}. Jakýkoli tag, kterému pak přiřadíme tuto třídu, bude schovaný. Ano, můžeme, v CSS definovat hr {display: none;} ,ale někdy se může vodorovná čára hodit, a navíc první způsob má univerzálnější použití. Prvku, který chceme schovat, tedy přiřadíme třídu .noscreen. V předchozí ukázce kódu není třída .noscreen použita.

Při vypnutých stylech je pak takový dokument přehlednější, obzvláště pokud je delší.

<br>kací kód

Jedná se o něco takového:

  Text o podrepce…
  <br>
  <br>
  <br>
  <br>
  <br>
  Text o mákovce…

Příliš značek <br> použitých pro odřádkování. Pokud chceme v dokumentu odřádkovat, text strukturujeme do odstavců a užijeme CSS vlastnost margin. Občasné použití tagu br za účelem odřádkování není na škodu, ale neměli bychom to přehánět.

Blokový a řádkový element

Blokový prvek (div, p, h1–h6, …) zalamuje před sebou a za sebou řádek a roztáhne se přes celou dostupnou šířku. Blokový element začíná vždy na novém řádku. Dva blokové prvky tedy nemohou být na stejném řádku (můžeme změnit přes CSS vlastnost display).

Řádkový prvek (a, span, …) nezalamuje řádek. Na jednom řádku jich může být více. Udělat z řádkového elementu blokový lze opět pomocí CSS vlastnosti display.

Platí základní pravidlo, v řádkovém elementu by neměl být element blokový.

<span><p>Řádkové a blokové tagy</p></span> – špatný zápis
<p><span>Řádkové a blokové tagy</span></p> – správný zápis

<p><div>Řádkové a blokové tagy</div></p> – špatný zápis
<div><p>Řádkové a blokové tagy</p></div> – správný zápis

Něco o sémantice

Sémantika je nauka o významu znaků (slov). V našem případě o významu tagů.

Uvedu příklad dvou zápisů. Oba mohou vypadat v prohlížeči zcela stejně. První je však špatný, druhý je potom sémanticky v pořádku.

ŠPATNĚ
<div id=“hlavni-nadpis“>Nadpis (název) webu</div>

<p>
  Střevlík<br>
  Tesařík<br>
  Páteříček<br>
  Krasec<br>
  Potápník
</p>


SPRÁVNĚ
<h1>Nadpis (název) webu</h1>

<ul>
  <li>Střevlík</li>
  <li>Tesařík</li>
  <li>Páteříček</li>
  <li>Krasec</li>
  <li>Potápník</li>
</ul>

Snad je to z příkladu patrné – každá HTML značka by měla být používána na to, k čemu byla určena. Podívejte se na přehled HTML tagů.

Nesémantické tagy (nenesou význam) div a span by pak měly být používány pouze k definici vzhledu stránky.

Proč bychom měli dodržovat sémantiku, když stránky mohou vypadat stejně i s kódem nesémantickým?

  1. Stránky se sémantickým kódem jsou pro vyhledávače (Google, Seznam, Bing, Yahoo, …) více viditelné. Ve výsledcích vyhledávání se tak budou naše stránky umísťovat na přednějších pozicích a tím pádem je navštíví více lidí. Na web s nesémantickým kódem, který je ve výsledcích hledání někde na páté stránce či dál, moc lidí nezavítá.
  2. Sémantický a správně strukturovaný kód se lépe spravuje.
  3. Pokud vypnu kaskádové styly, web je i tak poměrně přehledný.
  4. V neposlední řadě, správně strukturovaný a sémantický web je důležitý pro zrakově postižené uživatele, kterým obsah stránek předčítá hlasová čtečka, jež se řídí právě HTML kódem.
Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Jak nahrát stránky na Internet Velikost písma Validátor Přístupnost a použitelnost