Oznake HTML naglašavanja

Jedna od oznaka koje ćete naučiti rano u obrazovanju web dizajna je par oznaka poznatih kao "oznake naglašavanja". Pogledajmo što su te oznake i kako se danas koriste u web dizajnu.

Natrag na XHTML

Ako ste naučili prije HTML godina, i prije podizanja HTML5, vjerojatno ste koristili i podebljane i kurzivne oznake. Kao što biste očekivali, te oznake pretvorile su elemente u podebljane tekstove ili u kurzivu. Problem s tim oznakama i zašto su bili gurnuti u stranu u korist novih elemenata (što ćemo uskoro pogledati) jest da oni nisu semantički elementi. To je zato što oni određuju kako tekst treba izgledati, a ne informacije o tekstu. Zapamtite, HTML (gdje bi se ove oznake napisali) odnosi se samo na strukturu, a ne na vizualni stil! Vizualnosti se rješava pomoću CSS-a i najbolje prakse izrade web stranica odavno su pokazale da biste trebali imati jasno razdvajanje stila i strukture na svojim web stranicama. To znači da ne upotrebljavate elemente koji nisu semantički i koji detalj izgleda, a ne struktura. Zato su podebljane i kurzivne oznake općenito zamijenjene jakim (za podebljano) i naglašeno (za kurziv).

& Lt; strong & gt; i & lt; em & gt;

Snažni i elementi naglaska dodaju informacije vašem tekstu, s pojedinostima o sadržaju koji bi se trebao drugačije tretirati i naglasiti kada se taj sadržaj izgovori. Koristite te elemente prilično slično onome što biste u prošlosti koristili podebljano i kurzivano. Jednostavno okružite svoj tekst s oznakama otvaranja i zatvaranja ( i za naglasak i i za jaki naglasak), a priloženi tekst bit će naglašen.

Možete zalijepiti ove oznake i nije važno koja je vanjska oznaka. Evo nekoliko primjera.

Ovaj je tekst istaknut i većina preglednika to bi prikazala kao kurziv. Ovaj tekst je snažno istaknut , a većina će ga preglednika prikazati kao podebljano.

U oba ova primjera nismo diktirali vizualni izgled s HTML-om. Da, zadana pojavljivanja oznake bila bi kurziv, a bit će podebljano, ali se ti izgledovi mogu lako promijeniti u CSS-u. Ovo je najbolje od oba svijeta. Možete upotrijebiti zadane stilove preglednika da biste dobili dokument u obliku kurzivog ili podebljanog teksta bez da ste zapravo prešli liniju i miješali strukturu i stil. Recimo da ste htjeli da tekst ne samo da je podebljano, već da je također crven, možete ga dodati u CSS

jaka {
boja: crvena;
}

U ovom primjeru, ne morate dodati entitet za bold font-weight jer je to zadana. Ako ne želite to ostaviti slučajno, uvijek ga možete dodati u:

jaka {
font-weight: bold;
boja: crvena;
}

Sada biste bili sigurni da imate stranicu s podebljanim (i crvenim) tekstom gdje god se koristi oznaka .

Dvaput na naglasak

Jedna stvar koju sam primijetio tijekom godine je što se događa ako pokušate udvostručiti naglasak. Na primjer:

Tekst bi trebao sadržavati tekst podebljano i kurziveno .

Mislili biste da će ova linija proizvesti područje koje ima podebljan tekst I kurziv. Ponekad se to doista dogodi, ali vidio sam da neki preglednici časno poštuju drugi od dva stilova naglašavanja, onaj najbliži stvarnom tekstu koji je u pitanju, i to samo kao kurziv. Ovo je jedan od razloga zašto ne dopuštam ključne oznake.

Drugi razlog za izbjegavanje ovog "udvostručenja" je za stilske svrhe. Jedan oblik naglaska ako je obično dovoljan da prenese ton koji želite postaviti. Ne morate podebljati, izrezivati, bojati, povećavati i naglašavati tekst kako biste se isticati. Taj tekst, sve one različite vrste naglaska, postat će sjajan. Stoga budite oprezni kada koristite oznake naglaska ili CSS stilove kako biste pružili naglasak i ne pretjerajte.

Napomena o podebljano i kurzivom

Jedna konačna misao - dok se podebljane oznake () i kurziv () više ne preporučuju za korištenje kao elemente naglašavanja, postoje neki web dizajneri koji koriste ove oznake za stil inline područja teksta. Uglavnom, oni ga koriste kao element . Ovo je lijepo jer su oznake vrlo kratke, no upotrebljavajući te elemente na ovaj način se općenito ne preporučuje. Spominjem se u slučaju da je vidite na nekim web mjestima koja nisu korištena za izradu podebljanog ili kurzivog teksta, već za stvaranje CSS kuke za neku drugu vrstu vizualnog stila.

Izvorni članak Jennifer Krynin. Uredio Jeremy Girard na 12/2/16.