HTML hangsúlyos címkék

Az egyik címkék, amelyekről a webes oktatási képzés korai szakaszában megtudhatja, egy pár címkék, amelyeket "hangsúlyozott címkéknek" neveznek. Vessünk egy pillantást arra, hogy ezek a címkék, és hogyan használják a webes tervezésben ma.

Vissza az XHTML-re

Ha HTML évvel ezelőtt megtudtad, jóval a HTML5 megjelenése előtt, akkor valószínűleg mind a félkövér, mind a dőlt betűket használta. Amint azt elvárnánk, ezek a címkék az elemeket félkövér vagy dőlt betűkké alakították. Az ezekkel a címkékkel kapcsolatos probléma, és miért félretették őket az új elemek javára (röviden megnézzük), hogy nem szemantikai elemek. Ez azért van, mert meghatározzák, hogy a szöveg hogyan nézzen ki, nem pedig a szöveggel kapcsolatos információkat. Ne felejtsd el, hogy a HTML (amelyikben ezeket a címkéket írnák) a szerkezetről szól, nem vizuális stílusról! A képeket a CSS kezeli, és a webes tervezési gyakorlatok már régóta azt tartják, hogy a stílus és a struktúra világos szétválasztása a weboldalakon. Ez azt jelenti, hogy nem olyan elemeket használunk, amelyek nem szemantikai jellegűek, és melyik részlet a struktúra helyett néz. Ezért a félkövér és a dőlt betűket általában helyettesíti az erős (félkövér) és a hangsúly (dőlt betűkkel).

& Lt; strong & gt; és & lt; em & gt;

Az erős és hangsúlyos elemek információkat adnak a szövegéhez, részletesen leírva azokat a tartalmakat, amelyeket különbözőképpen kell kezelni és hangsúlyozni, amikor ezt a tartalmat beszélik. Ezeket az elemeket nagyjából ugyanúgy használja, mint a múltban vastag és dőlt betűt. Egyszerűen körülveszi a szöveget a nyitó és a záró címkékkel ( és a hangsúly, a és a pedig erőteljes hangsúlyozáshoz), és a mellékelt szöveg kiemelésre kerül.

Ezeket a címkéket beágyazhatja, és nem számít, hogy melyik a külső címke. Íme néhány példa.

Ezt a szöveget hangsúlyozza , és a legtöbb böngésző dőlt betűkként jeleníti meg. Erősen hangsúlyozza ezt a szöveget , és a legtöbb böngésző félkövérként jeleníti meg.

Mindkét példában nem vizuális megjelenést kértünk a HTML-vel. Igen, az címke alapértelmezett megjelenése dőlt betűkkel, a pedig merész lenne, de ezek a kinézetek könnyen megváltoztathatók a CSS-ben. Ez mindkét világ legjobbja. Az alapértelmezett böngészőstílust kihasználva dőlt vagy félkövér szövegeket kaphat a dokumentumban anélkül, hogy ténylegesen átlépné a vonalat, és keveredne a struktúra és a stílus. Mondja azt, hogy a szöveget nemcsak merésznek, hanem pirosnak is meg kellene adnia, ezt a CSS-hez is hozzáadhatja

erős {
piros szín;
}

Ebben a példában nem kell a vastag betűmérethez hozzáadni egy tulajdonságot, mivel ez az alapértelmezett. Ha nem akarja ezt a véletlenre hagyni, akkor mindig felveheti azt:

erős {
font-weight: bold;
piros szín;
}

Most minden bizonnyal garantáltan van egy félkövér (és piros) szöveges oldal, ahol a címkét használják.

Dupla fel a hangsúlyt

Az egyik dolog, amit észrevettem az év során, mi történik, ha megpróbálsz duplázni a hangsúlyt. Például:

Ennek a szövegnek tartalmaznia kell félkövér és dőlt betűs szöveget.

Azt gondolja, hogy ez a vonal olyan területet eredményezne, amelynek szövege merész és dőlt. Néha ez valóban megtörténik, de láttam, hogy néhány böngésző csak tiszteletben tartja a két, a szóban forgó szöveghez legközelebb eső hangsúlyt, és csak dőlt betűket jelenít meg. Ez az egyik oka annak, hogy nem duplázom meg a hangsúlyos címkéket.

Egy másik ok arra, hogy elkerüljék ezt a "megduplázást" a stilisztikai célokra. A hangsúly egyik formája, ha általában elég ahhoz, hogy közvetítse a beállítani kívánt hangot. Nem kell merész, dőlt betűvel, színt, nagyítást és aláhúzást alkalmazni annak érdekében, hogy kiemelkedjen. Ez a szöveg, mindazok a különféle hangsúlyok, amelyek lelkesednek. Ezért legyen óvatos, ha hangsúlyozott címkéket vagy CSS-stílusokat használsz, hogy hangsúlyt kapj, és ne tégy túlzásba.

Megjegyzés a félkövér és a dőlt betűvel kapcsolatban

Egy utolsó gondolat - míg a félkövér () és a dőlt betűs () címkéket már nem ajánlott kiemelt elemként használni, vannak olyan webes tervezők, akik ezeket a címkéket használják a szöveg inline szövegrészeinek. Alapvetően, mint egy elemet használják. Ez azért jó, mert a címkék nagyon rövidek, de az ilyen elemek ilyen módon történő használata nem általános. Megemlítem abban az esetben, ha azt látja, hogy ott vannak olyan webhelyek, amelyek nem merész vagy dőlt szövegeket hoznak létre, hanem CSS-hookot hoznak létre valamilyen más vizuális stílushoz.

Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard 12/2/16.