Odstavce a zalomení řádku

00:00:00

Text na webu se neskládá z volně psaných slov. Každý kus textu má svůj HTML tag, který mu dává strukturu a smysl. Nejzákladnější textový prvek je odstavec – a právě s ním tato lekce začíná.

Odstavec – tag <p>

Tag <p> (z anglického paragraph) označuje odstavec textu. Prohlížeč před ním a za ním automaticky přidá svislou mezeru:

<p>Toto je první odstavec. Obsahuje několik vět, které tvoří jeden ucelený myšlenkový celek.</p>

<p>Toto je druhý odstavec. Vizuálně ho od prvního odděluje mezera.</p>

Důležité: text v HTML souboru psaný na více řádků se v prohlížeči zobrazí jako jeden řádek. Bílé znaky (mezery, tabulátory, nové řádky) prohlížeč ignoruje. Pokud chceš nový odstavec, musíš použít tag <p>.

Zalomení řádku – tag <br>

Tag <br> (z anglického break) zalomí řádek na daném místě, aniž by začal nový odstavec. Je to tzv. samouzavírací tag – nemá uzavírací variantu:

<p>
  Zdeněk Doležal<br>
  Praha, Česká republika<br>
  crazy-mac.cz
</p>

Tag <br> se hodí pro adresy, texty básní nebo jiná místa, kde záleží na přesném zalomení řádku. Nepoužívej ho pro tvorbu vertikálních mezer mezi bloky textu – na to je správné použít CSS (margin) nebo tag <p>.

Inline textové tagy

Uvnitř odstavce lze část textu označit pomocí inline tagů, které mu dají sémantický nebo vizuální význam:

  • <strong> – důležitý text. Prohlížeč ho zobrazí tučně a VoiceOver ho zdůrazní. Použi pro slova, která jsou klíčová pro pochopení.
  • <em> – zdůrazněný text. Prohlížeč ho zobrazí kurzívou. Použi pro text, který by byl v mluvené řeči zdůrazněn tónem hlasu.
  • <code> – kód nebo technický výraz. Zobrazí se neproporcionálním písmem. Použi pro názvy tagů, příkazy, proměnné.
  • <mark> – zvýrazněný text, jako by byl přejetý zvýrazňovačem.
  • <small> – vedlejší informace, drobnější text. Například autorské právo v zápatí.
  • <abbr> – zkratka s rozepsáním: <abbr title="HyperText Markup Language">HTML</abbr>
<p>
  Atribut <code>lang</code> na tagu <code><html></code> je <strong>povinný</strong> pro přístupný web.
</p>

Vodorovná čára – tag <hr>

Tag <hr> (z anglického horizontal rule) vloží tematický předěl – vodorovnou čáru oddělující různé části obsahu. Stejně jako <br> je samouzavírací:

<p>Kapitola první.</p>

<hr>

<p>Kapitola druhá.</p>

Tematický předěl VoiceOver oznámí jako oddělovač, takže dává smysl i pro uživatele bez zraku.

Tip od Zdeňka

Zdeněk radí: Nepoužívej <br><br> místo odstavce. Vizuálně to může vypadat stejně, ale pro odečítač je rozdíl zásadní: <p> je sémantická jednotka textu, VoiceOver ji přečte jako celek. Dvojité <br> jsou jen dvě zalomení řádku bez jakéhokoli sémantického obsahu. Navíc CSS kontrolu mezer nad odstavci ztrácíš. Piš čistě – pro lidi i pro stroje.