Značky zdôraznenia HTML

Jednou z značiek, ktoré sa naučíte v ranom štádiu vášho dizajnu webového dizajnu, je pár značiek známych ako "tagy s dôrazom". Poďme sa pozrieť na to, čo tieto značky sú a ako sa používajú v dizajne webu dnes.

Späť na XHTML

Ak ste sa pred niekoľkými rokmi naučili pred značkou HTML5, pravdepodobne ste používali tučné a kurzíva. Ako ste očakávali, tieto značky zmenili prvky na tučný text alebo na kurzívu. Problém s týmito značkami a prečo boli odložené v prospech nových prvkov (na ktoré sa pozrieme krátko) je, že nie sú sémantické prvky. Je to preto, lebo určujú, ako by text mal vyzerať skôr ako informácie o texte. Pamätajte, že HTML (čo je miesto, kde by boli tieto značky napísané) je všetko o štruktúre, nie o vizuálnom štýle! Vizuálne stránky sa zaoberajú CSS a osvedčené postupy webového dizajnu dlho konštatovali, že by ste mali mať na webových stránkach jasné oddelenie štýlu a štruktúry. To znamená, že nepoužívame prvky, ktoré nie sú sémantické a ktoré detaily vyzerajú a nie štruktúru. To je dôvod, prečo tučné a kurzívne značky boli všeobecne nahradené silnými (pre tučné) a dôrazom (pre kurzívu).

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

Silné a dôrazné prvky pridávajú do vášho textu informácie, v ktorých sa podrobne uvádza obsah, s ktorým by sa malo zaobchádzať odlišne a zdôrazňovať, kedy sa hovorí. Tieto prvky používate takmer rovnako, ako by ste v minulosti používali tučné a kurzíva. Jednoducho obklopujte text s otváracími a zatváracími značkami ( a pre dôraz a a pre silný dôraz) a priložený text bude zdôraznený.

Môžete vložiť tieto značky a nezáleží na tom, ktorá externá značka. Tu sú niektoré príklady.

Tento text je zvýraznený a väčšina prehliadačov by ju zobrazila ako kurzíva. Tento text je silne zdôraznený a väčšina prehliadačov by ju zobrazila ako tučný.

V obidvoch týchto príkladoch nemôžeme diktovať vizuálny vzhľad s HTML. Áno, predvolený vzhľad značky by bol kurzíva a by bol tučný, ale tieto vyzerá sa dá ľahko zmeniť v CSS. Toto je to najlepšie z oboch svetov. Môžete využiť predvolené štýly prehliadača, aby ste v dokumente získali kurzívu alebo tučný text bez skutočného prekročenia línií a miešania štruktúry a štýlu. Povedzte, že chcete, aby text bol nielen tučný, ale aj červený, môžete ho pridať do CSS

silný {
farba: červená;
}

V tomto príklade nemusíte pridávať vlastnosť pre tučné písmo, pretože to je predvolené. Ak nechcete nechať to na náhodu, môžete ho vždy pridať:

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

Teraz by ste boli všetci, ale zaručene mať stránku s tučným (a červeným) textom, kde sa používa značka .

Zdvojnásobte na dôraz

Jedna vec, ktorú som zaznamenala počas roka, je to, čo sa stane, ak sa pokúsite zdvojnásobiť dôraz. Napríklad:

Tento text by mal mať vo vnútri text tučné a začiarknuté .

Myslíte si, že tento riadok vytvorí oblasť, ktorá má text, ktorý je tučný a kurzíva. Niekedy sa to skutočne deje, ale videl som, že niektoré prehliadače ctili iba druhý z dvoch dôrazných štýlov, ten najbližší aktuálnemu aktuálnemu textu a zobrazuje to len ako kurzívu. To je jeden z dôvodov, prečo sa zdvojnásobím na značkách dôrazu.

Ďalším dôvodom, ako zabrániť tomuto "zdvojeniu", je pre štýlové účely. Jedna forma dôrazu, ak je zvyčajne dosť na to, aby vyjadril tón, ktorý chcete nastaviť. Nemusíte tučne, kurzívou, farebne, zväčšovať a podčiarkovať text, aby ste vynikli. Tento text, ktorý bude mať všetky tieto rôzne druhy dôrazu, by sa stal skromným. Takže buďte opatrní, keď používate značky s dôrazom alebo štýly CSS, aby ste zdôraznili a nepreháňali.

Poznámka k tučným a kurzívnym písmom

Jedna posledná myšlienka - zatiaľ čo tučné () a kurzívy () značky sa už neodporúčajú používať ako prvky dôrazu, niektorí weboví návrhári používajú tieto značky na štýl inline oblasti textu. V zásade ich používajú ako prvok . To je pekné, pretože značky sú veľmi krátke, ale použitie týchto prvkov týmto spôsobom nie je všeobecne odporúčané. Zmieňam sa v prípade, že to vidíte tam, kde sa niektoré stránky používajú na to, aby nevytvárali odvážny alebo kurzívny text, ale aby vytvorili CSS hák pre iný druh vizuálneho štýlu.

Originálny článok od Jennifer Krynin. Upravený Jeremy Girard dňa 12.2.16.