Jednotlivá slova nebo celé pasáže lze velmi snadno zdůraznit kurzívou nebo tučně. Nejprve se zaměříme na tučně zvýrazněnou variantu. Pro tento účel jsou v zásadě k dispozici dva HTML elementy: b a strong.
Vítejte na <b>PSD-Tutorials.de</b>! <br /> Vítejte na <strong>PSD-Tutorials.de</strong>!
Pohled na výsledek v prohlížeči poskytuje následující obraz:
Je zřejmé, že oba elementy zajišťují identické zobrazení. Proč ale existují dvě různé elementy? Ve skutečnosti existují i jiné způsoby zobrazení webových stránek než ten známý standartní prohlížeč. Myslete například na čtečky pro nevidomé osoby nebo také na mobilní zařízení. S HTML elementy nabízenými organizací W3C má být podporována sémantika. Takže prvek b nyní již neznamená, že se něco má zobrazit tučně. Spíše znamená, že text je vizuálně zdůrazněný a nemá zvýšený význam. Může se jednat například o názvy produktů nebo klíčová slova v dokumentech.
Prvek strong doposud znamenal zdůraznění. em bylo naopak používáno pro zvýrazněný, důležitý text (emfatický). V dřívějších verzích HTML byl strong stupněm zdůraznění em. Oba první elementy jsou v HTML5 přiděleny jiné významy.
Nejprve text s běžným zvýrazněním.
<p> Kočky jsou roztomilá zvířata. </p>
Nyní stejný text, tentokrát však s důrazem na první slovo.
<p> <em>Kočky</em> jsou roztomilá zvířata. </p>
Použitím em je důraz položen na slovo Kočky. Může to být v diskusi tázáno na to, zda jsou psi nebo kočky roztomilejší.
Nyní by v daném příkladu mohl být prvek em použit i na slovo jsou.
<p> Kočky <em> jsou </em> roztomilá zvířata. </p>
To by mohla být odpověď v diskusi, kde někdo tvrdí, že kočky vůbec nejsou roztomilé.
Skutečně jsou pasáže označené pomocí em v prohlížeči zobrazeny kurzívou. Stejný optický efekt lze dosáhnout pomocí prvku i.
V pracovním návrhu HTML5 již prvek i nereprezentuje kurzívu.
<p> Srdečně vítáme na <i>PSD-Tutorials.de</i> </p>
To znamená, že tento prvek nyní znamená, že s ním chceme sdělit jinou náladu. Prvek i je například zajímavý pro označení technických výrazů nebo taxonomických označení.
To je vše strašně teoretické, vím. Zásadně byste měli dodržovat pokyny v HTML5. Na druhou stranu, nikdo vám samozřejmě nepřeje, abyste místo b použili strong.
<p> <em>Řádek se zvýrazněním em</em><br /> <i>Řádek se zvýrazněním i</i><br /> <strong>Řádek se zvýrazněním strong</strong><br /> <b>Řádek se zvýrazněním b</b> </p>
Nakonec musí jednat prohlížeče.
Koneckonců, skutečné formátování textů vybavených uvedenými prvky je zodpovědné CSS.
Zkratky s abbr
Pro zvýraznění zkratky se používá stejný prvek, který byl doposud používán pro zkratky, totiž abbr.
Německo-rakouská kancelář <abbr title="World Wide Web Consortium">W3C</abbr> má sídlo od dubna 2009 na Vysoké škole v Potsdamu.
Prohlížeče, které správně interpretují prvek abbr, zobrazují text vložený do prvku abbr podtrženě.
Dále by měl být prvku abbr přiřazen atribut title. Zde se obvykle zapisuje plný výraz pro zkratku. Pokud návštěvník najede myší na zkratku, zobrazí se vysvětlující text v poznámkovém okně.
Adresace s address
Pomocí prvku address můžete označit adresní informace.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Prohlížeče obvykle zobrazují obsah prvku address kurzívou.
Označení programového kódu pomocí prvku code
Prvek code se používá k označení programového kódu. V tomto smyslu se ve srovnání s předchozími verzemi HTML nic nezměnilo. code je stále využíván pro tento účel.
<pre>
Das ist ein HTML-Kopfbereich:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
Obyčejně se prvek code kombinuje s prvkem pre, aby se zachovalo odsazení použité v programovém kódu.
Specifikace HTML5 doporučuje použití atributu class v souvislosti s prvkem code. Tento atribut může určit jazyk použitý uvnitř prvku code. Zde je několik typických příkladů, jak taková označení mohou vypadat:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
To, zda a jak prohlížeče tyto pokyny implementují, není stanoveno W3C.
<pre>
Das ist ein HTML-Kopfbereich:
<code class="language-html">
<html>
<head>
<title&gt;</title&gt;
</head>
</code>
</pre>
Prozatím nemá atribut class ve webovém prohlížeči žádný viditelný efekt. Avšak lidský pozorovatel může pomocí tohoto atributu poznat, v jakém jazyce je napsán programový kód, pokud se podívá do zdrojového kódu stránky.
Změna na malá písmena pomocí prvku small
Prvek small původně sloužil k zobrazení textu ve zmenšené velikosti. V HTML5 je prvek small explicitně určen pro drobné nebo důležité informace. Tyto informace by mohly například zahrnovat následující:
• Informace o autorských právech
• Omezení odpovědnosti
• Licenční podmínky
• Obchodní podmínky
W3C výslovně upozorňuje, že prvek small by neměl být používán pro dlouhé textové pasáže.
<small> Copyright by PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Podtržení textu pomocí prvku u
Slova můžete pomocí prvku u zobrazit podtrženě. Zde je příklad:
<p>Willkommen bei <u>PSD-Tutorials.de</u></p>
Výsledek se v prohlížeči zobrazí následovně:
Po zobrazení výsledku je patrný požadovaný efekt. Důvodem k obavám je však to, že na internetu podtržené texty obvykle znamenají hypertextové odkazy. Pokud tedy zobrazíte text nebo slovo podtržené, návštěvníci by mohli chybně předpokládat, že se jedná o odkaz. Pokus o jeho kliknutí samozřejmě selže. Proto byste měli na podtržení textu raději upustit.
