HTML

10+ HTML méně známych značek, které byste měli začít používat

Věděli jste, že HTML obsahuje přibližně 150 tagů? Některé jsou užitečné víc a některé méně. Kolik z nich používáte vy? Omezujete se pouze na základní značky jako <div>, <span>, <ul>, <body>...? Rozšiřte si obzory, které tagy dnes můžete bezpečně používat.

<time>

Tag <time> pomáhá hlavně správně pochopit čas pro roboty, kromě toho pomáhá i prohlížečům správně číst čas a vytvářet tak na základě něj například události v kalendáři. Mezi otevírací a uzavírací tag můžete napsat jakýkoli obsah chcete. Co vložíte mezi otevírací a uzavírací tag uvidí uživatel na webu. Nemusí tam být tedy zrovna čas, ale pak nastává otázka, zda to tedy má smysl. Důležitý prvek time tagu je ale v jeho atributu datetime, kde specifikujete zmiňovaný čas.

příklad použití:

<time datetime="2023-01-03T20:00:00">20:00</time>

Formátů, které podporuje <time> tag je poměrně dost. Jedna z nejspolehlivějších webových dokumentací je pěkně popisuje zde. Podpora datetimu je velmi dobrá a tak není důvod proč jej nepoužít. Máme ho aj tu na ForDevs, pozrite sa, ako je riešený čas vypublikovania článku vyššie.

<picture>

Tento tag vznikl za účelem, abychom měli lepší flexibilitu v obrázcích při responzivním designu. Je velmi snadné jej použít a má úžasné schopnosti při řešení performance webu. Díky němu dokážeme kontrolovat jaký obrázek se má načíst na jakém viewportu a tak šetříme uživateli data. Pojďme si to vysvětlit na příkladu:

<picture>
  <source media="(min-width: 1024px)" srcset="/images/cat-large.jpg">
  <source media="(min-width: 768px)" srcset="/images/cat-medium.jpg">
  <img src="/images/cat.jpg" alt="cat">
</picture>

Z kódu výše je zřejmé, že jsme vložili 2 <source> tagy a jeden <img> tag. Do source tagu zadáváme media, kterým říkáme prohlížeči, který obrázek (z těch source) má být vykreslen (jak v CSS media). Nakonec vždy v případě <picture> zadáváme <img> tag, který slouží jako fallback pro prohlížeče, které picture tag neznají nebo v případě, že ani jedna podmínka pro source nebyla splněna a prohlížeč tak nemá jaký obrázek z našich source zobrazit.

Picture tag zvládnou všechny dnešní moderní prohlížeče.

<progress>

Progress nám zobrazuje indikátor dokončení daného úkolu. Má 2 atributy:

value - musí to být hodnota mezi 0 a naším definovaným max. atributem
max - maximální hodnota, kterou progress bar může dosáhnout (stav 100%), výchozí stav je 1

<progress value="7" max="10"></progress>

Takhle vypadá náš progress bar

Hlavní nevýhodou progress-baru jsou jeho omezené možnosti jej nastylovat, o tomto problému napsal Pankaj Parashar na známém CSS Tricks v článku zde.

<thead>, <tbody>

Jsou to sice 2 značky, ale můžeme je klidně zařadit do jedné kategorie. Jejich účel je jednoduchý. Mají rozdělit hlavičku a tělo tabulky. <thead> definuje hlavičku sloupců a <tbody> již samotná data. Do <thead> i <tbody> vkládáme klasicky <tr> a <td> jak jsme z tabulek zvyklí. Bez problémů tyto značky podporují všechny prohlížeče.

<table>
  <thead>
    <tr>
      <td>Značka</td>
      <td>Model</td>
    <tr>
  </thead>
  <tbody>
    <tr>
      <td>Hyundai</td>
      <td>Tucson</td>
    <tr>
    <tr>
      <td>Škoda</td>
      <td>Octavia</td>
    <tr>
  </tbody>
</table>

<ol>

Asi si většina z vás říká, proč je zde tento tag, vždyť <ul> a <ol> jsou známé tagy. Opravdu je ale používáte správně? Rozdíl mezi nimi je ten, že <ul> je zkratka pro unordered list, takže neseřazený seznam a <ol> je zkratka pro ordered list a oba tagy musí mít jako své child elementy <li>. Nyní přichází to uvědomění si. Kdy je seznam seřazen a kdy ne? Proč máme na e-shopech použité při výpisu produktů <ul>, přitom je náš seznam produktů seřazen od nejnovějšího nebo nejlevnějšího? Správně by tam tedy mělo být <ol>. Stejně je to i například při výpisu kategorií, které jsou řazeny abecedně, znovu by tam mělo být <ol>. Nebo u článků, které se řadí od nejnovějšího. Zkrátka vždy, když použijeme jakýkoli algoritmus pro seřazování našeho obsahu, tak bychom <ul> neměli použít, naopak, <ol> ano.

<header>, <footer>

Podobný případ jako u <ol> tagu. Header a footer lze rovněž využít i v rámci sekcí, nemusí se využívat pouze na hlavičku a patičku celé stránky. Máte seznam článků? Určitě tento článek má nějakou pomyslnou hlavičku a patičku, tak proč nevužít tagy jako <header> a <footer>?

<article>

Article element by měl být samozřejmostí u článků, ale v dokumentaci MDN o něm píší, že představuje samostatnou kompozici v dokumentu, která má být nezávisle distrubuovatelná nebo opakovaně použitelná ve stránce nebo aplikací. Podle poučky z MDN můžeme tedy říci, že <article> lze použít nejen u článků ale i při diskusních příspěvcích na fóru, produktové kartě, uživatelském komentáři nebo při interaktivním widgetu, zkrátka téměř u každé nezávislé komponenty, která obsahuje obsah.

<input type="phone, email, search…">

Input element asi nikomu není třeba představovat, slouží k interaktivnímu ovládání formulářů, ale věděli jste, že máme až 22 různých typů u inputů? Mnoho vývojářů používá pouze základní typy jako jsou například text, password, number, radio či checkbox… Dokonce často i checkboxy a radio jsou nahrazovány různými “klikacími” <div>mi, hlavně v reaktivních frameworkech. Důvod je v mnoha případech jediný, těžko se jednotně stylují skrze všechny browsery. Pokud ale potřebujete design inputů upravit jen lehce nebo vám na designu nezáleží, pak naopak nabízí obrovskou moc v podobě hotové validace. Potřebujete zvalidovat e-mail? Není nic jednoduššího než použít <input type="email">, potřebujete do inputu zadat čas? tak použijte <input type="time">. Pojďme se ale podívat jaké všechny inputy existují, o některých jste určitě ani nevěděli:

Seznam dostupných inputů:

<input type="color">

<input type="datetime-local">

<input type="range" min="1" max="10">

<input type="time" min="09:00" max="18:00">

Ostatní inputy:

<input type="button">
<input type="checkbox">
<input type="date">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="url">
<input type="week">

Podrobný popis a celý seznam dostupných inputů naleznete na MDN.

<sub> a <sup>

<sub> je zkratkou pro subscript, neboli dolní index. Hodí se například při psaní chemických vzorců.

Opakem <sub> je tag <sup>, který znamená superscript, horní index. Ten bude mít na rozdíl od svého předchůdce využití asi větší, např. v matematice nebo jako reference na text.

H₂O

H<sub>2</sub>O

a² + b² = c²

a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>

<datalist>

Díky datalistu můžete uživateli zobrazit seznam povolených/ doporučených možností. Pro tento účel často vývojáři používají složité a velké JavaScriptové knihovny a přitom o této možnosti, která by jim pravděpodobně stačila ani nevědí. Za výhodu <datalistu> považuji, že nabízí možnost si klikem vybrat ze seznamu nebo filtrovat na základě zadaného textu.

Vyberte značku:

<label for="car-choice">Vyberte značku:</label>
<input list="cars" id="car-choice" name="car-choice">
<datalist id="cars">
   <option value="Škoda">
   <option value="BMW">
   <option value="Audi">
   <option value="Mercedes">
   <option value="Hundai">
</datalist>

Závěr

Tento článek měl být demonstrací jaké všechny užitečné HTML tagy HTML nabízí. Nebuďte pouze při divech a spanech, ale podívejte se i po dalších možnostech. Kromě toho, že dokážete ušetřit několik stovek kB, za JavaScriptové knihovny, tak zlepšíte SEO a váš kód bude daleko přehlednější.