Jedna ze značek, které se brzy naučíte webový design vzdělávání je pár značek známých jako „značky zvýraznění“. Pojďme se podívat na to, co tyto značky jsou a jak se dnes používají ve webovém designu.
Zpět na XHTML
Pokud jste se naučili HTML před lety, dlouho před vzestupem HTML5, pravděpodobně jste použili tučné i kurzíva tagy. Jak byste očekávali, tyto značky změnily prvky na tučný text nebo kurzívou. Problém s těmito značkami a proč byly odsunuty stranou ve prospěch nových prvků (na které se podíváme krátce) je, že nejde o sémantické prvky. Důvodem je, že definují, jak by měl text vypadat, spíše než informace o textu. Nezapomeňte, že HTML (což je místo, kde by se tyto značky psaly) je o struktuře, nikoli o vizuálním stylu! Vizuály zpracovává CSS a podle osvědčených postupů pro webový design byste měli mít na svých webových stránkách jasné oddělení stylu a struktury. To znamená nepoužívat prvky, které nejsou sémantické a které vypadají spíše než struktura. To je důvod, proč tučné a kurzíva značky byly obecně nahrazeny výrazem strong (pro tučné písmo) a důrazem (pro kurzívu).
a
Silné a zvýrazňující prvky přidávají do vašeho textu informace, podrobně popisující obsah, který by měl být zpracován odlišně a zdůrazněn, když je tento obsah vysloven. Tyto prvky používáte téměř stejně, jako byste v minulosti používali tučné a kurzíva. Jednoduše text obklopte otevíracími a zavíracími značkami ( 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á je externí značka. Zde jsou nějaké příklady.
Tento text je zdůrazněn a většina prohlížečů by to zobrazila kurzívou.
Tento text je silně zdůrazněn a většina prohlížečů by to zobrazila tučným písmem.
V obou těchto příkladech nediktujeme vizuální vzhled s HTML. Ano, výchozí vzhled souboru značka by byla kurzíva a by bylo odvážné, ale tyto vzhledy lze snadno změnit v CSS. To je to nejlepší z obou světů. Můžete použít výchozí styly prohlížeče k získání kurzivního nebo tučného textu v dokumentu, aniž byste skutečně překročili hranici a míchali strukturu a styl. Řekněme, že jste to chtěli text, který má být nejen tučný, ale také červený, můžete přidat do SCS.
silný {
červená barva;
}
V tomto příkladu nemusíte přidávat vlastnost pro tučné písmo, protože se jedná o výchozí hodnotu. Pokud to ale nechcete nechat na náhodu, můžete to vždy přidat:
silný {
váha písma: tučné;
červená barva;
}
Nyní byste měli zaručeno, že budete mít stránku s tučným (a červeným) textem kdekoli značka je použita.
Zdvojnásobte důraz
Jedna věc, kterou jsme si během roku všimli, je to, co se stane, když se pokusíte zdvojnásobit důraz. Například:
Tento text by měl obsahovat obojí tučně a kurzívou text uvnitř.
Myslíte si, že tento řádek vytvoří oblast s textem, který je tučný A kurzíva. Někdy se to skutečně stane, ale viděli jsme, že některé prohlížeče ctí pouze druhý ze dvou stylů zvýraznění, ten, který je nejblíže aktuálnímu dotyčnému textu, a zobrazuje to pouze jako kurzívu. To je jeden z důvodů, proč nezdvojnásobujeme tagy zvýraznění.
Dalším důvodem, jak se tomuto „zdvojnásobení“ vyhnout, je stylistické účely. Jedna forma důrazu je obvykle dostačující k vyjádření tónu, který chcete nastavit. Abyste vynikli, nemusíte text tučně, kurzívou, barvou, zvětšením a podtržením. Ten text, bude-li všechny ty různé druhy důrazu, by se stal křiklavým. Buďte opatrní, když používáte zvýrazňovací značky nebo styly CSS, abyste zdůraznili, a nepřehánějte to.
Poznámka k tučným písmům a kurzívě
Jedna poslední myšlenka - zatímco tučné () a kurzíva () tagy se již nedoporučují používat jako prvky zvýraznění, existují někteří weboví designéři, kteří tyto tagy používají ke stylování vložených oblastí textu. V zásadě to používají jako živel. To je hezké, protože značky jsou velmi krátké, ale použití těchto prvků tímto způsobem se obecně nedoporučuje. Zmínili jsme to v případě, že to na některých webech vidíte tam, kde se nepoužívá k vytváření tučného nebo kurzívového textu, ale k vytvoření háku CSS pro nějaký jiný druh vizuálního stylu.