Značky zdůraznění HTML

Jednou z značek, které se naučíte brzy ve vašem web designovém vzdělávání, je pár značek známých jako "tagy s důrazem". Podívejme se na to, co jsou tyto značky a jak se dnes používají v designu webu.

Zpět na XHTML

Pokud jste se dozvěděli HTML před lety, ještě před nástupem HTML5, pravděpodobně jste používali tučné i kurzíva. Jak byste čekali, tato značka změnila prvky do tučného textu nebo kurzívního textu. Problém s těmito značkami a důvody, proč byly odloženy stranou ve prospěch nových prvků (na které se brzy podíváme), spočívají v tom, že nejsou sémantické prvky. Je to proto, že definují, jak by text měl vypadat spíše než informace o textu. Nezapomeňte, že HTML (kde jsou tyto značky napsány) je vše o struktuře, nikoliv o vizuálním stylu! Vizualizace jsou zpracovávány společností CSS a osvědčené postupy webového designu již dlouho předpokládaly, že byste měli mít na webových stránkách jasné oddělení stylu a struktury. To znamená, že nepoužíváme prvky, které nejsou sémantické a které detail vypadají spíše než struktura. To je důvod, proč tučné a kurzívy byly obecně nahrazeny silnými (pro tučné) a důrazem (kurzívou).

& lt; strong & gt; a & lt; em & gt;

Silné a důrazné prvky přidávají do textu informace, které popisují obsah, s nímž by se mělo zacházet odlišně a zdůrazňovat, kdy je tento obsah vyslovován. Používáte tyto prvky téměř stejně, jako byste v minulosti používali tučnou a kurzívou. Jednoduše obklopujte svůj text značkami pro otevírání a zavírání ( a pro důraz a a pro silný důraz) a přiložený text bude zdůrazněn.

Tyto značky můžete vnořit a nezáleží na tom, který externí tag je. Zde jsou nějaké příklady.

Tento text je zdůrazněn a většina prohlížečů by zobrazovala kurzívu. Tento text je silně zdůrazněn a většina prohlížečů by to zobrazovala jako tučný typ.

V obou těchto příkladech nejsme diktovat vizuální vzhled s HTML. Ano, výchozí vzhled značky by byl kurzívou a by byl tučný, ale tyto vzhledy by mohly být snadno změněny v CSS. To je nejlepší z obou světů. Pomocí výchozích stylů prohlížeče můžete ve svém dokumentu zvýraznit kurzívu nebo tučný text, aniž byste skutečně překročili hranici a míchali strukturu a styl. Řekněme, že chcete, aby text nebyl jen tučný, ale také červený, můžete jej přidat do CSS

silný {
červená barva;
}}

V tomto příkladu nemusíte přidávat vlastnost pro tučnou velikost písma, protože je výchozí. Pokud nechcete nechat to na náhodu, můžete jej vždy přidat:

silný {
font-weight: tučné;
červená barva;
}}

Nyní byste měli zaručeně, že budete mít stránku s tučným (a červeným) textem, kde se použije značka .

Zdvojnásobte zdůraznění

Jedna věc, kterou jsem za celý rok zaznamenala, je to, co se stane, pokud se pokusíte zdvojnásobit důraz. Například:

Tento text by měl mít uvnitř text tučné a italické .

Myslíte si, že tato řada vytvoří oblast, která má text, který je tučný a kurzívou. Někdy se to skutečně děje, ale viděla jsem, že některé prohlížeče ctí pouze druhý ze dvou stylů zdůraznění, který je nejblíže dotyčnému aktuálnímu textu, a to pouze jako kurzívu. To je jeden z důvodů, proč se zdvojnásobuji na značkách zdůraznění.

Dalším důvodem, proč se toto "zdvojnásobení" vyhnout, je pro stylistické účely. Jednou z forem důrazu, je-li dostačující na to, abyste předali tón, který chcete nastavit. Nemusíte tučné, kurzívit, barevně, zvětšovat a podtrhnout text, aby se vyniklo. Tento text, všechny tyto různé druhy důrazu, by se stal zběsile. Takže buďte opatrní, když použijete značky zdůraznění nebo stylů CSS, abyste získali důraz a nepřehánějte je.

Poznámka k tučným písmem a kurzívou

Jedna poslední myšlenka - zatímco tučné () a italické () značky již nejsou doporučovány k použití jako prvky důrazu, někteří weboví návrháři používají tyto značky ke stylování inline oblastí textu. V zásadě je používají jako prvek . To je hezké, protože značky jsou velmi krátké, ale použití těchto prvků tímto způsobem není obecně doporučeno. Zmínil jsem se o tom, že tam vidíte, že na některých stránkách se nepoužívá vytvářet odvážný nebo kurzívní text, ale vytvořit CSS hák pro nějaký jiný druh vizuálního stylingu.

Původní článek Jennifer Krynin. Upraveno Jeremy Girardovou dne 12/2/16.