Používejte HTML5 tagy správně

Samozřejmě můžete použít DIV nebo SPAN a připlácnout k němu nějakou třídu, přes kterou ho naformátujete. Nebo můžete změnit tag STRONG, aby byl podtržený místo tučný. Nebo můžete použít ARIA role, a dodávat význam tam, kde není potřeba. Ale nešlo by to trochu chytřeji s využitím všech těch úžasných novinek, které přináší HTML5? (Nebo dokonce HTML4?)

Formátovací tagy

Původní HTML tagy se zaměřovali na formát, takže existovali tagy jako FONT (v HTML5 již není podporován), B a I (nejsou doporučovány), EM a STRONG (ty jsou doporučovány, i když rozdíl oproti B a I často není jasně vysvětlen), a další.

Samozřejmě je můžete používat (vyjma níže uvedených) pro označení a formátování blíže neurčeného textu, ale ve většině případů je možno použít lepší tagy, které místo konkrétního formátu zachytí význam daného textu a vy nebudete muset přemýšlet to tom, jestli citát má být napsán kurzívou nebo jiným písmem, nebo zda cena zboží má být tučná nebo podtržená.

Pro shrnutí:

  • B označuje tučný text, prostě proto, že chcete aby byl tučný.
    • Např. chcete zdůraznit jméno vaší firmy.
  • I označuje kurzívu, protože chcete kurzívu.
    • Např. chcete označit jméno jiné firmy.
  • EM označuje zvýrazněný text, který má nějaký speciální význam.
    • Např. neznámý výraz, který později objasníte.
  • STRONG označuje důležitý text, na který je potřeba dát si pozor.
    • Např. upozornění nebo varování.
    • Název strong nepochází z významu „silný“ (jak se někdy označuje tučné písmo), ale od „vážný“ nebo „důležitý“ (např. „strong warning“ = důležité varování)
  • MARK označuje text, který se nějak týká toho, co uživatel zrovna dělá nebo co je důležité v kontextu stránky.
    • Např. na stránce se slevami takto označíte zvýhodněné ceny.
    • Slouží také k označení hledaného výrazu v textu.
  • SMALL označuje méně důležitý text nebo poznámku.
    • Např. že cena je bez DPH.
  • U označuje podtržení, tedy text, který je potřeba označit, ale nemá vyšší (EM, STRONG, …) ani nižší (SMALL) prioritu.
    • v HTML5 lze použít např. pro označení gramatické nebo matematické chyby (podržení vlnovkou)
  • SUB (dolní) a SUP (horní) označuje dolní a horní index.
    • Např. pro matematické zápisy nebo poznámky pod čarou.
  • Tagy FONT, STRIKE, BIG a CENTER jsou v HTML5 zakázány (nejsou podporovány).

Části stránky

Pro označení různých částí stránky slouží různé tagy:

  • MAIN označuje hlavní část stránky, kde uživatel najde obsah.
  • HEADER označuje hlavičku stránky, tedy tu část, kde je logo, jméno stránky, příp. rychlé menu
  • FOOTER označuje konec stránky, obvykle obsahující odkazy na jiné části webu, kontakt autora, apod.
  • SECTION označuje části stránky, které obsahují odlišné informace.
    • Např. část pro firmy, soukromé osoby, novináře, apod.
  • ARTICLE označuje blok obsahující hlavní text stránky nebo sekce.
  • ASIDE pak označuje text, který hlavní článek doplňuje nebo rozšiřuje.
  • MENU označuje menu se seznamem odkazů. Ty by měli být značeny tagem MENUITEM.
  • FIGURE označuje část, která obsahuje různé spolu související prvky. Titulek by měl být označen tagem FIGCAPTION.
    • Např. blok s obrázkem a jeho popisem, datem a místem pořízení, apod.
    • Ve formulářích může označovat blok s inputem, jeho labelem, chybovou hláškou, atd.
    • Figure může obsahovat více obrázků, videa, reklamy, atd. Může obsahovat i další vnořené figure.
    • FIGCAPTION může obsahovat další tagy jako je Hx, P, atd.
  • ADDRESS obsahuje kontaktní informace související s článkem nebo stránkou.
    • Nejedná se o poštovní adresu, kterou chcete uvést, ale nesouvisí s textem nebo jeho autorem.
    • Může obsahovat údaje jako jméno, telefon, email, ale i poštovní adresu (pokud dává v kontextu smysl) buď na autora článku, majitele autorských práv, nebo někoho, kdo je za text zodpovědný (např. HR nebo PR oddělení).
    • Adresa se vždy váže k textu v tagu ARTICLE, nebo k celé stránce (pokud není uvnitř ARTICLE).
  • TIME obsahuje časové informace (jak čas tak i datum) související s článkem nebo stránkou.
    • Opět nejde o označení času uvedeného v textu.

Citace

Pokud uvádíte text z jiné stránky, knihy či jiného dokumentu, můžete použít tagy Q (quote), BLOCKQUOTE a CITE.

Tag Q je určen pro inline text, kdy například do vaší věty zahrnete citát z jiného zdroje. Naopak BLOCKQUOTE, jak název napovídá, slouží jako blokový prvek, kdy uvádíte celou větu nebo odstavec z jiného dokumentu. Oba mohou mít atribut cite, který by měl obsahovat URL adresu, odkud jste čerpali. Pokud do textu pak uvedete i jméno autora nebo díla, můžete k tomu použít tag CITE.

Jaký je rozdíl mezi I a EM? 
Slovy <cite>Shakespeara</cite>:
<q>Voněla by snad růže jinak, kdyby nebyla
růží zvána? <cite>(Romeo a Julie)</cite>
</q>

Používejte je ale jak chcete, protože
<cite>Cimrman</cite> by na to řekl:
<blockquote cite="http://citaty.net/autori/jara-cimrman/">
    Do hospody s umytýma nohama.
</blockquote>

Úpravy textu

Pro různé blogy a novinové servery, které se o své články starají a upravují je podle současné situace, se hodí tagy DEL, INS a S. Lze je ale také použít např. pro seznamy, kde chcete označit již neplatné nebo nově přidané položky (seznam úkolů, kroky návodu, apod.).

Tag S (jméno pochází ze strike-through, protože v HTML4 jednoduše označoval přeškrtnutí, ale v HTML5 má jiný význam – jméno zůstalo pro zapamatovatelnost) slouží pro označení textu, který již za současné situace neplatí, ale stále je dobré vědět, jak to dříve fungovalo. Naopak tag DEL („deleted“ = smazáno) označuje text, který byl vymazán kvůli tomu, že je chybný.

Tag INS („inserted“ = vloženo) by pak měl následovat za S nebo DEL a označovat text, který byl nově vložen a nahrazuje původní text. Samozřejmě tagy S, DEL a INS je možno použít i samostatně, pokud mažete text, který není potřeba nahradit, nebo vkládáte text, který něco doplňuje, ale neruší platnost stávajícího textu.

<!-- Starý text je opraven novým, ale ten nemění fakt, že dříve to tak fungovalo a bylo to správně, proto tag S -->
<s>Tag B označuje tučný text.</s>
<ins>V HTML5 používejte EM pro zvýraznění,
STRONG pro zdůraznění a MARK pro
označení.</ins>

<!-- Zde naopak nový text opravuje starý, který nebyl platný ani v době zápisu, ale byl v textu ponechán, aby si čtenář uvědomil, že původní text obsahoval chybu, takže tag DEL -->
Flexbox je plně podporován ve Firefoxu
od verze <del>20</del><ins>28 (předchozí
verze mají částečnou nebo experimentální
podporu)</ins>.

<!-- Zde se jedná o starou informaci, protože IE8 již není podporováno, ale je dobré stále vědět, že byla nějaká omezení, proto tag S. Není ale již potřeba uvádět, že od IE9 je podporován (vyplývá to z textu), takže není potřeba uvádět INS. -->
Tag MARK podporují všechny prohlížeče
<s>kromě IE8</s>.

Všechy 3 tagy mohou obsahovat atribut cite s URL odkazující na důvod změny (zde by to mohl být třeba http://caniuse.com pro příslušné vlastnosti).

Také mohou obsahovat atribut timestamp s časem, kdy ke změně došlo, pokud je to relevantní. Čas by měl být ve formátu yyyy-mm-ddThh:mm:ss+zz:zz (tedy datum a čas vč. časové zóny; místo T lze uvést mezeru a odděluje datum a čas). Pokud nechcete uvádět přesný čas, můžete použít atribut datetime a uvést datum a/nebo čas s libovolnou přesností.

Rozšiřující informace

Pro rozbalovací prvek, který po kliknutí zobrazí další informace slouží kombinace prvků DETAILS a SUMMARY. Tag DETAILS označuje kontejner, který obsahuje všechny informace. Tag SUMMARY pak označuje text, který bude (jako jediný) vidět a ostatní obsah v DETAILS se skryje. Po kliknutí na SUMMARY se pak zobrazí i zbytek DETAILS. Zatím to ale automaticky funguje jen v Chrome (a souvisejících), takže ve Firefox a IE/Edge bude muset přidat JS.

Alternativně můžete použít tag DIALOG, jehož obsah bude také skryt. V okamžiku, kdy prvku nastavíte atribut open, zobrazí se jeho obsah uprostřed stránky. Opět ho zatím podporuje jen Chrome (a související).

<details>
<summary>Klikni pro více informací</summary>
Více informací...
</details>

<dialog>Tohle nebude vidět</dialog>
<dialog open>Tohle bude vidět uprostřed stránky</dialog>

Kód

Původní tag TT („TeleType“ = telegrafický zápis) je v HTML5 zakázán. Místo něj lze použít tagy podle toho, co chcete zobrazit.

  • Tag CODE je určen pro zdrojový kód (např. tak, jako se to používá zde).
  • Pokud v textu odkazujete na konkrétní proměnnou nebo funkci, k označení slouží tag VAR („variable“).
  • Pokud chcete uvést, co má uživatel zadat do systémové konzole nebo jakou klávesu má stisknout, můžete použít tag KBD („keyboard input“ = vstup z klávesnice).
  • Pro zápis toho, co se v konzoly, v programu nebo v souboru vypíše, pak slouží tag SAMP („sample“ = ukázka).

Samozřejmě v HTML5 je možno použít tag PRE, který se od všech ostatních liší tím, že zobrazuje mezery, tabulátory a odřádkování přesně tak, jak jsou zapsány v HTML souboru.

Kromě PRE jsou všechny tyto tagy primárně inlinové, ale lze je pomocí CSS změnit na blokové či jinak formátovat.

Formuláře

Formátováním formulářů se zabývá článek Méně známé typy inputů.

V HTML5 jsou pro seskupování prvků formuláře nejvhodnější tagy FIELDSET (rámeček s titulkem LEGEND) nebo FIGURE (skupina souvisejících prvků).

Tabulka

Tabulka má celou řadu tagů, které slouží pro její formátování:

  • TABLE označuje celou tabulku.
  • TBODY obsahuje řádky (TR) a sloupce (TD) s daty.
  • THEAD obsahuje řádky (TR) a sloupce (TH) s popisy sloupců v TBODY.
  • TFOOT obsahuje řádky (TR) a sloupce (TD) se součty nebo jinými souhrnými informacemi.
  • TH lze také použít pro popis řádky (první buňka řádky).
  • CAPTION může obsahovat popis tabulky
    • Uvádí se uvnitř tabulky a bude zobrazen nad nebo pod tabulkou přes celou její šířku.
  • COLGROUP může definovat hromadný formát pro celý sloupec (stejně jako TR definuje formát pro řádek).
    • Měl by obsahovat tag COL pro každý TD v řádkách TR. COL nemá žádný obsah, jen definuje ID, CLASS nebo STYLE pro celý sloupec. COL může obsahovat atribut span, pokud zastupuje více sloupců.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *