Jednotlivé slová alebo celé pasáže môžete veľmi jednoducho označiť kurzívou a tučným písmom. Najprv k tučnemu označeniu. Na to existujú v podstate dva dostupné prvky HTML s názvami b
a strong
.
Vitajte na <b>PSD-Tutorials.de</b>! <br /> Vitajte na <strong>PSD-Tutorials.de</strong>!
Pohľad na výsledok v prehliadači nám poskytuje nasledujúci obrázok:
Zrejme oba elementy zabezpečujú identické zobrazenie. Prečo potom existujú dva rôzne prvky? Skutočne existujú na webových stránkach aj iné formy zobrazenia než tie známe z bežných prehliadačov. Myslite napríklad na čítačky pre nevidiacich alebo na mobilné zariadenia. HTML prvky poskytované W3C majú podporovať sémantiku. Takže prvok b
už neznamená, že text má byť tučne zobrazený. Skôr znamená b
text, ktorý je vizuálne zvýraznený a nemá vyššiu dôležitosť. Môže ísť napríklad o názvy produktov alebo kľúčové slová v dokumentoch.
Prvek strong
doteraz slúžil na silnejšie zdôraznenie. Naopak, prvok em
bol používaný na dôležitý text (emfaticky) ktorý je zdôraznený. Strong v predchádzajúcich verziách HTML bol posilnením em. Obe prvky majú v HTML5 pridelený iný význam.
Najprv text s obyčajným zdôraznením.
<p> Mačky sú roztomilé zvieratá. </p>
Teraz rovnaký text, tentoraz však s dôrazom na prvom slove.
<p> <em>Mačky</em> sú roztomilé zvieratá. </p>
Zvýraznenie sa týmto spôsobom kládne na slovo Mačky. Môže to byť v diskusii, kde sa rozhoduje, či sú sladšie psy alebo mačky.
Teraz môžete v tomto príklade aplikovať prvok em
aj na slovo sú.
<p> Mačky <em> sú </em> roztomilé zvieratá. </p>
To by mohla byť odpoveď v diskusii s niekým, kto tvrdí, že mačky vôbec nie sú roztomilé.
V skutočnosti sú úseky označené prvkom em v prehliadači zobrazené kurzívou. Ten istý optický efekt je možné dosiahnuť pomocou prvku i
.
<p> Srdečne vítajte na <i>PSD-Tutorials.de</i> </p>
Tento prvok namiesto kurzívy aktuálne znamená, že sa chce preniesť iná nálada. Prvok i
je zaujímavý napríklad pre označenie technických výrazov alebo taxonomických označení.
To je všetko hrozné teoretické, viem. V zásade by ste mali dodržiavať smernice HTML5. Na druhej strane, nikto vám samozrejme nelomí chrbát, ak namiesto b
použijete strong
.
<p> <em>Riadok s em</em><br /> <i>Riadok s i</i><br /> <strong>Riadok s strong</strong><br /> <b>Riadok s b</b> </p>
V konečnom dôsledku sa musia konať výrobcovia prehliadačov.
Veľká časť úprav textov vybavených uvedenými prvkami je v konečnom dôsledku zodpovedná za CSS.
Akronymy s abbr
Na označenie akronymu sa používa ten istý prvok, ktorý sa doteraz používal na skratky, a to abbr
.
Nemecko-Rakúsky úrad pre <abbr title="World Wide Web Consortium">W3C</abbr> má sídlo na Vysoká škola v Potsdame od apríla 2009.
Prehliadače, ktoré správne interpretujú prvok abbr
, zobrazia text obklopený prvkom abbr
podčiarknutý.
Dačšie by ste mali priradiť prvku abbr
atribút title
. Tam sa zvyčajne zaznamenáva úplný výraz pre akronym. Keď navštíviť pohne nad akronymom myšou, v okne s nástrojovými tipmi uvidíte výraz.
Adresné údaje s address
Pomocou elementu address
je možné označiť informácie o adrese.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Prehliadače obvykle zobrazujú obsah elementu address
kurzívne.
Označenie programového kódu pomocou code
Element code
sa používa na označenie programového kódu. V tomto zmysle sa oproti predchádzajúcim verziám HTML nič nezmenilo. Stále sa code
používa na túto účel.
<pre> Toto je HTML hlavička: <code> <html> <head> <title></title> </head> </code> </pre>
Obvykle sa element code
kombinuje s elementom pre
s cieľom zachovať odsadenia použité v programovom kóde.
Špecifikácia HTML5 odporúča pri použití elementu code
použitie atribútu class. Tento atribút môže byť priradený kódu jazyka použitému v rámci elementu code
. Tu je niekoľko typických príkladov, ako môžu tieto označenia vyzerať:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
To, ako prehliadače tieto inštrukcie uplatňujú, nie je stanovené W3C.
<pre> Toto je HTML hlavička: <code class="language-html"> <html> <head> <title></title> </head> </code> </pre>
Aktuálne nemá atribút class
žiadne viditeľné účinky v prehliadači. Avšak ľudia si môžu všimnúť, v akej jazykovej forme je programový kód, keď sa pozru do zdrojového kódu stránky.
Malé písmená pomocou small
Element small
bol pôvodne určený na zobrazenie textu menšieho ako bežné. V HTML5 je small
explicitne určené pre drobný text. Tento drobný text by mohol byť napríklad:
• Informácie o autorských právach
• Vylúčenie zodpovednosti
• Licenčné podmienky
• Všeobecné obchodné podmienky
W3C výslovne upozorňuje, že element small
by sa nemal používať na dlhé textové pasáže.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Podčiarkovanie textu
Slovo môžete zvýrazniť podčiarknutím pomocou elementu u
. Tu je príklad:
<p>Vitajte na stránke <u>PSD-Tutorials.de</u></p>
Výsledok vyzerá vo webovom prehliadači nasledovne:
Pokiaľ sa pozriete na výsledok, je to presne očakávaný efekt. Avšak v tomto prípade existuje jeden háčik. Na internete sa podčiarknuté texty bežne používajú pre odkazy. Ak teraz zvýrazníte text alebo slovo podčiarknutím, návštevníci by mohli myslieť, že ide o odkaz. Pokus o kliknutie naň samozrejme zlyhá. Preto by ste mali na podčiarknutie textu radšej upustiť.