Jak udělat kurzívu v HTML?

Jak udělat kurzívu v HTML: Tagy i, em a CSS styly

Naučte se jak udělat kurzívu v HTML pomocí správných tagů nebo kaskádových stylů pro dokonalý vzhled vašeho webového obsahu. Správné formátování textu zvýší přehlednost stránek a podpoří lepší sémantickou strukturu.

Jak udělat kurzívu v HTML a neudělat při tom ostudu

Jak udělat kurzívu v HTML? Nejrychlejší cesta je použít párový tag i nebo tag em přímo v textu. Pro čistší oddělení designu od obsahu je pak ideální sáhnout po css font style italic html.

Je to vcelku snadné. Kód se naučíte za minutu. Ale je tu jedna záludná chyba, kterou podle mých zkušeností dělá 90 % začátečníků - a ukážu vám ji podrobně v sekci o sémantice níže.

Když se učíte základy tvorby webů, kurzíva v html tag provedení patří k těm prvním věcem, na které narazíte. Vizuálně text nakloní a přitáhne pozornost. Jenže webový vývoj se za poslední roky hodně posunul. Dnes už nejde jen o to, jak text vypadá na monitoru.

Základní metody: HTML kurzíva i em

V HTML máme pro vytvoření kurzívy dva základní tagy. Oba jsou párové, což znamená, že text musíte obalit otevírací a zavírací značkou.

Tradiční tag i (Idiomatic Text)

Tag i historicky znamenal prostě italic. Dnes reprezentuje text, který se odlišuje od běžného okolí, ale nemá nutně větší důležitost. Typickým příkladem jsou odborné termíny, názvy děl nebo myšlenky.

Příklad použití v kódu: Byl to de facto konec projektu.

Abych byl upřímný, dlouhé roky jsem používal tag i úplně na všechno. Byla to chyba. Tag i - navzdory populárnímu přesvědčení - nepřináší žádnou sémantickou hodnotu pro hlasové čtečky.

Sémantický tag em (Emphasis)

Tag em slouží ke zdůraznění textu. Prohlížeče ho standardně vykreslují kurzívou, ale jeho hlavní síla leží jinde. Dává textu sémantický význam.

A to je naprosto klíčové. Výzkumy ukazují, že správné použití sémantických tagů zlepšuje orientaci na stránce pro nevidomé uživatele internetu, kteří spoléhají na čtečky obrazovek.^[1] Tyto programy při narazení na tag em změní intonaci hlasu.

Kritická chyba: Sémantika vs. Vizuál

Zde je ten slíbený problém, o kterém jsem mluvil v úvodu: používání tagu em jen proto, že chcete text vizuálně naklonit. Mnohé tutoriály bohužel dodnes radí, že tag i je zastaralý a máte všude používat em. To je nesmysl.

Pokud obalíte název knihy do tagu em, čtečka obrazovky ho na uživatele nepřirozeně vykřikne s důrazem. Pro názvy děl nebo cizí slova použijte tag i (nebo cite), pro skutečný důraz v řeči tag em. Vyhledávače jako Google navíc využívají sémantické značky k lepšímu pochopení struktury a kontextu stránky. ^[2]

Dává to smysl? Snad ano.

Moderní přístup: css font style italic html

Když analyzuji kód u klientských projektů - a že jsem těch auditů za posledních pět let udělal přes stovku pro různé e-shopy a magazíny - často narážím na to, že vývojáři vkládají vizuální formátování přímo do HTML struktury, což je při dnešních možnostech kaskádových stylů nejen zbytečné, ale hlavně to strašně komplikuje jakýkoliv budoucí redesign.

Tudy cesta nevede. HTML má řešit strukturu.

Pokud potřebujete jen vizuální změnu bez úpravy významu, jak napsat kurzívu html kódem bez tagů? Odpovědí je CSS. Pomocí vlastnosti font-style: italic můžete vytvořit kurzívu u libovolného prvku.

Tento přístup odděluje vzhled od obsahu. Oddělení těchto dvou vrstev může u rozsáhlých webů zlepšit údržbu kódu a za určitých okolností přispět k efektivnějšímu načítání. ^[3]

Srovnání: Kterou metodu kurzívy vybrat?

Tag (Doporučeno pro důraz)

• Tohle musíte udělat hned.

• Vysoká - nese význam pro čtečky obrazovek a vyhledávače.

• Zdůraznění důležitosti části textu uvnitř věty.

Tag

• Názvy lodí, latinské názvy zvířat, myšlenky.

• Nízká, ale platná (označuje odlišný text, nemění intonaci).

• Odlišení textu z jiného důvodu než je důraz (idiomatický text).

CSS font-style: italic (Nejlepší pro design)

• Styling popisků pod obrázky, dekorativní text v menu.

• Žádná - pouze mění vzhled prvku.

• Čistě vizuální stylování bez ovlivnění sémantického významu.

Příběh z praxe: Přístupnost módního e-shopu

David, junior frontend vývojář z pražské agentury, dostal za úkol oživit design kategorií u velkého e-shopu. Rozhodl se, že názvy všech podkategorií (cca 400 položek) budou elegantní kurzívou.

Nechtěl se zdržovat s CSS, takže do šablony jednoduše obalil všechny proměnné do tagů em. Prohlížeč to vykreslil hezky. Ale hned po nasazení začaly chodit stížnosti od uživatelů se zrakovým postižením - čtečky na ně názvy produktů doslova křičely s extrémním důrazem.

Trvalo mu celý den, než pochopil rozdíl mezi sémantikou a vizuálem. Uvědomil si, že udělal přesně to, co manuály přístupnosti zakazují. Tag em dává důraz, ne jen nakloněné písmo.

Následující ráno vše přepsal. Tagy em odstranil a do CSS přidal jednoduché pravidlo font-style: italic. Stížnosti ustaly a skóre přístupnosti v automatických testech se okamžitě zlepšilo. Naučil se, že rychlé HTML zkratky se v produkci nevyplácí.