strong, em, b, i, code, kbd, samp, mark, del, ins, abbr, time, sub, sup — sémantické formátování textu inline. Každý tag nese jiný význam.
| Tag | Vizuální efekt | Sémantika / Kdy použít |
|---|---|---|
| <strong> | tučný | Důležitý text — sémantický důraz (screen reader změní tón) |
| <em> | kurzíva | Emfáze měnící smysl věty — screen reader změní intonaci |
| <b> | tučný | Vizuálně odlišný bez sémantiky (klíčová slova, produkty) |
| <i> | kurzíva | Vizuálně odlišný bez emfáze (tituly, cizí slova, technické termíny) |
| <code> | monospace | Inline kód, příkaz, název souboru, technický termín |
| <kbd> | monospace+box | Klávesnicový vstup — Ctrl, Enter, Tab |
| <samp> | monospace | Výstup programu / počítače |
| <mark> | žlutý highlight | Zvýraznění relevantního textu (výsledky hledání) |
| <del> | přeškrtnutý | Smazaný / odstraněný text (changelog, přeškrtnutá cena) |
| <ins> | podtržený | Vložený / přidaný text (changelog, diff) |
| <abbr> | tečkované podtržení | Zkratka s rozvinutím v title — tooltip |
| <time> | — | Datum/čas — strojově čitelné přes datetime atribut |
| <sub> | H2O | Dolní index — chemické vzorce, matematika |
| <sup> | E=mc2 | Horní index — exponenty, poznámky pod čarou |
Silná důležitost, závažnost nebo naléhavost. Vizuálně tučný. Screen readery změní tón hlasu.
strong označuje text se sémanticky silnou důležitostí. Screen readery mohou změnit tón hlasu. SEO: Google může brát strong jako signál relevance klíčového slova. Vizuálně tučný — ale tučnost je vedlejší efekt, ne účel.
<!-- Důležité varování --> <p> Varování: <strong>Nikdy neotvírejte tento soubor!</strong> </p> <!-- Cena / klíčový údaj --> <p>Cena: <strong>299 Kč</strong></p> <!-- strong vs b --> <p> <strong>Důležité:</strong> toto je klíčové. Výsledky jsou <b>tučně</b> — jen vizuálně. </p>
Mění smysl věty zdůrazněním slova. Vizuálně kurzíva. Screen reader změní intonaci.
em (emphasis) mění smysl věty zdůrazněním konkrétního slova. Příklad: "Chci toto jablko" vs "Chci toto jablko" — jiný smysl! Vizuálně kurzíva. Screen reader změní intonaci mluvené řeči.
<!-- em mění smysl věty --> <p>Chci <em>toto</em> jablko.</p> <p>Chci toto <em>jablko</em>.</p> <!-- em vs i --> <p>Přečtěte <em>důkladně</em>.</p> <!-- ↑ sémantický důraz --> <p>Přečtěte <i>Harry Potter</i>.</p> <!-- ↑ název knihy = i, ne em --> <p lang="la"> Termín <i lang="la">in absentia</i>. </p> <!-- ↑ latinský výraz = i -->
code = inline kód. kbd = klávesnicový vstup. samp = výstup programu. Všechny monospace.
Tři příbuzné tagy pro technický obsah. code = kód nebo technický termín inline v textu. kbd = klávesnicový vstup (Ctrl, Enter...). samp = výstup počítače nebo programu. Všechny prohlížeč zobrazuje monospace fontem.
| <code> | Inline kód, příkaz, proměnná, soubor, funkce |
| <kbd> | Klávesnicový vstup — Ctrl, Enter, Tab, F5 |
| <samp> | Výstup z terminálu nebo programu |
| <var> | Matematická nebo programovací proměnná |
class="language-js" pro Prism.js highlightingconsole.log() pro debug.<!-- Inline kód -->
<p>
Funkce <code>console.log()</code>
vypíše hodnotu.
</p>
<!-- Klávesová zkratka -->
<p>
Uložte pomocí
<kbd>Ctrl</kbd> + <kbd>S</kbd>.
</p>
<!-- Výstup programu -->
<p>
Terminál zobrazil:
<samp>Permission denied</samp>.
</p>
<!-- CSS pro kbd jako fyzická klávesa -->
<style>
kbd {
background: #f5f5f5;
border: 1px solid #ccc;
border-bottom: 2px solid #aaa;
border-radius: 3px;
padding: 1px 6px;
font-family: monospace;
font-size: 0.85em;
color: #333;
}
</style>
Označí text relevantní v aktuálním kontextu. Výsledky vyhledávání, důležité pasáže v citaci.
mark označuje text relevantní pro uživatele v aktuálním kontextu — výsledky vyhledávání (highlight hledaného slova), důležité pasáže v citaci. Vizuálně žluté pozadí. Sémanticky odlišný od strong (důležitost) a em (emfáze).
mark { background: #fff176; }<!-- Výsledky vyhledávání -->
<p>
Hledali jste "HTML":
<mark>HTML</mark> je jazyk webu.
</p>
<!-- JS: dynamické zvýraznění -->
<script>
function highlightSearch(text, query) {
if (!query) return text;
const re = new RegExp(
query.replace(/[.*+?^${}()|]/g, '\\$&'),
'gi'
);
return text.replace(re,
match => `<mark>${match}</mark>`
);
}
// Použití:
const el = document.getElementById('content');
el.innerHTML = highlightSearch(
el.textContent, 'html'
);
</script>
del = přeškrtnutý (odstraněno), ins = podtržený (přidáno). Pro changelog, diff, přeškrtnuté ceny.
del označuje odstraněný text, ins vložený text. Typicky pro changelog, diff zobrazení, nebo přeškrtnuté staré ceny v e-shopu. Oba mají cite (URL zdroje změny) a datetime (kdy se změna stala) atributy.
| cite | URL dokumentu vysvětlujícího změnu | URL |
| datetime | Kdy byla změna provedena (ISO 8601) | 2024-03-15 |
<!-- Přeškrtnutá cena -->
<p>
Cena:
<s>499 Kč</s>
<strong>299 Kč</strong>
</p>
<!-- Changelog / diff -->
<p>
<del datetime="2024-01-15">
Stará verze textu článku.
</del>
<ins datetime="2024-03-10">
Aktualizovaná verze textu.
</ins>
</p>
<!-- CSS -->
<style>
del { color: #999; }
ins {
color: #2a7;
text-decoration: none;
background: rgba(0,200,0,0.1);
}
s { color: #999; }
</style>
Označí zkratku nebo akronym. Atribut title obsahuje plné znění — zobrazí se jako tooltip.
abbr (abbreviation) označuje zkratky a akronymy. Atribut title obsahuje plný název — prohlížeč zobrazí tooltip při najetí myší. Screen readery mohou přečíst plné znění místo zkratky.
| title | Plné znění zkratky — zobrazí se jako tooltip | string |
abbr[title] { cursor: help; }<!-- Základní zkratka -->
<p>
<abbr title="HyperText Markup Language">
HTML
</abbr>
je jazyk webu.
</p>
<!-- Při prvním výskytu rozepsat -->
<p>
<abbr title="Daň z přidané hodnoty">DPH</abbr>
(Daň z přidané hodnoty) je 21 %.
</p>
<!-- CSS -->
<style>
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
/* Vlastní tooltip (lepší UX) */
abbr[title]:hover::after {
content: " (" attr(title) ")";
font-size: 0.85em;
color: #666;
}
</style>
Sémanticky označí datum nebo čas. datetime = strojově čitelná forma pro vyhledávače a RSS.
time označuje datum nebo čas. Vizuálně se nijak neliší, ale datetime atribut obsahuje strojově čitelné datum. Google ho používá pro rich results (datum článku v výsledcích vyhledávání). RSS čtečky čtou datetime.
| datetime | ISO 8601 datum/čas pro stroje | 2024-03-15T14:30 |
el.dateTime vrátí atribut datetime<!-- Datum článku -->
<time datetime="2024-03-15">
15. března 2024
</time>
<!-- Čas -->
<time datetime="14:30">14:30</time>
<!-- Datum i čas -->
<time datetime="2024-03-15T14:30:00">
15. 3. 2024 ve 14:30
</time>
<!-- Relativní čas pomocí JS -->
<time datetime="2024-03-15"
id="pubDate">
15. 3. 2024
</time>
<script>
const el = document.getElementById('pubDate');
const date = new Date(el.dateTime);
const now = new Date();
const diffDays = Math.floor(
(now - date) / (1000 * 60 * 60 * 24)
);
if (diffDays === 0) el.textContent = 'Dnes';
else if (diffDays === 1) el.textContent = 'Včera';
else el.textContent = `Před ${diffDays} dny`;
</script>
sub = dolní index (chemie, matematika). sup = horní index (exponent, poznámka pod čarou).
sub (subscript) posune text dolů — pro chemické vzorce (H₂O), matematické indexy. sup (superscript) posune text nahoru — pro exponenty (x²), poznámky pod čarou (text¹). Oba automaticky zmenší velikost fontu.
<!-- Chemie -->
<p>Voda je H<sub>2</sub>O.</p>
<p>CO<sub>2</sub> = skleníkový efekt.</p>
<!-- Matematika -->
<p>E = mc<sup>2</sup></p>
<p>Obvod: r<sup>2</sup> × π</p>
<!-- Poznámka pod čarou -->
<p>
Toto tvrzení
<sup>
<a href="#poznamka-1">1</a>
</sup>
je ověřeno.
</p>
<!-- Samotná poznámka -->
<footer>
<p id="poznamka-1">
<sup>1</sup>
Viz studie z roku 2024, strana 42.
</p>
</footer>