Kā un kad HTML kodā lietot uzsvara tagu

click fraud protection

Viens no tagiem, kuru iemācīsities agri web dizains izglītība ir pāris tagu, kas pazīstami kā "uzsvaru tagi". Apskatīsim, kas ir šie tagi un kā tos mūsdienās izmanto tīmekļa dizainā.

Atpakaļ uz XHTML

Ja HTML valodu iemācījāties pirms gadiem, krietni pirms HTML5, jūs, iespējams, izmantojāt gan treknraksta, gan kursīva tagus. Kā jūs varētu sagaidīt, šie tagi pārveidoja elementus attiecīgi treknrakstā vai kursīvā. Problēma ar šiem tagiem un to, kāpēc tie tika izstumti par labu jauniem elementiem (kurus mēs drīz aplūkosim), ir tas, ka tie nav semantiski elementi. Tas ir tāpēc, ka viņi nosaka, kā tekstam vajadzētu izskatīties, nevis informāciju par tekstu. Atcerieties, ka HTML (kur šie tagi tiks rakstīti) ir saistīts tikai ar struktūru, nevis vizuālo stilu! Ar vizuālajiem materiāliem nodarbojas CSS Web dizaina paraugprakse jau sen ir uzskatījusi, ka jūsu tīmekļa lapās ir skaidri jānodala stils un struktūra. Tas nozīmē neizmantot elementus, kas nav semantiski un kuri izskatās sīkāk, nevis strukturēti. Tāpēc treknrakstā un

instagram viewer
kursīvs tagi parasti ir aizstāti ar spēcīgu (treknrakstā) un uzsvaru (kursīvam).

un

Spēcīgie un uzsvarojošie elementi papildina jūsu tekstu ar informāciju, detalizēti aprakstot saturu, ar kuru būtu jārīkojas citādi un jāuzsver, runājot par šo saturu. Šos elementus jūs izmantojat gandrīz tāpat kā agrāk treknrakstā un kursīvā. Vienkārši ieskauj tekstu ar sākuma un aizvēršanas tagiem ( un par uzsvaru un un par lielu uzsvaru) un tiks uzsvērts pievienotais teksts.

Jūs varat ligzdot šos tagus, un nav svarīgi, kurš ir ārējais tags. Šeit ir daži piemēri.

Šis teksts ir uzsvērts un lielākā daļa pārlūkprogrammu to parādīs kursīvā. 
Šis teksts ir ļoti uzsvērts un lielākā daļa pārlūkprogrammu to parādīs kā treknrakstā. 

Abos šajos piemēros mēs nediktējam vizuālo izskatu ar HTML. Jā, noklusējuma izskats tags būtu kursīvs un būtu treknrakstā, taču šos izskatu CSS varētu viegli mainīt. Tas ir labākais no abām pasaulēm. Jūs varat izmantot noklusējuma pārlūka stilus, lai dokumentā iegūtu kursīvu vai treknu tekstu, faktiski nepārsniedzot līniju un nejaucot struktūru un stilu. Sakiet, ka jūs to gribējāt Lai teksts būtu ne tikai treknrakstā, bet arī sarkanā krāsā, jūs to varat pievienot SCS.

spēcīgs {
krāsa: sarkana;
}

Šajā piemērā treknrakstā font-weight nav jāpievieno rekvizīts, jo tas ir noklusējums. Tomēr, ja nevēlaties to atstāt nejaušības ziņā, vienmēr varat to pievienot:

spēcīgs {
fonta svars: treknrakstā;
krāsa: sarkana;
}

Tagad jums būtu viss, bet garantēts, ka jums būs lapa ar treknu (un sarkanu) tekstu visur tiek izmantota atzīme.

Divkāršojiet uzsvaru

Viena lieta, ko mēs esam pamanījuši gada laikā, ir tas, kas notiek, ja jūs mēģināt dubultot uzsvaru. Piemēram:

Šim tekstam jābūt abiem treknrakstā un kursīvā teksts tā iekšpusē.

Jūs domājat, ka šī rinda radīs apgabalu, kurā teksts ir treknrakstā UN kursīvā. Dažreiz tas patiešām notiek, taču mēs esam redzējuši, ka dažas pārlūkprogrammas godā tikai otro no diviem uzsvēršanas stiliem, to, kas ir vistuvāk faktiskajam attiecīgajam tekstam, un to parāda tikai kā kursīvu. Tas ir viens no iemesliem, kāpēc mēs nedublējamies ar uzsvaru tagiem.

Vēl viens iemesls, lai izvairītos no šīs "dubultošanās", ir stilistiski. Lai nodotu toni, kuru vēlaties iestatīt, parasti pietiek ar vienu uzsvaru. Lai izceltu tekstu, nav nepieciešams treknrakstā, kursīvā, krāsot, palielināt un pasvītrot tekstu. Šis teksts, ja visi šie dažādie uzsvaru veidi kļūs grezns. Tāpēc esiet piesardzīgs, lietojot uzsvaru tagus vai CSS stilus, lai nodrošinātu uzsvaru, un nepārlieciet to.

Piezīme par treknrakstu un kursīvu

Viena pēdējā doma - kamēr treknrakstā () un kursīvs () tagus vairs nav ieteicams izmantot kā uzsvara elementus, ir daži tīmekļa dizaineri, kuri izmanto šos tagus, lai veidotu teksta iekšējās zonas. Būtībā viņi to izmanto kā a elements. Tas ir jauki, jo tagi ir ļoti īsi, taču šo elementu izmantošana šādā veidā parasti nav ieteicama. Mēs to pieminam, ja jūs to redzat tur dažās vietnēs, kas tiek izmantoti nevis treknrakstā vai kursīvā teksta, bet CSS āķa izveidošanai cita veida vizuālajam stilam.

instagram story viewer