Una dintre etichetele pe care le veți învăța mai devreme în educația dvs. de design web este o pereche de etichete cunoscute sub numele de "tag-uri de accentuare". Să aruncăm o privire asupra a ceea ce sunt aceste etichete și a modului în care sunt utilizate astăzi în designul web.
Înapoi la XHTML
Dacă ați învățat cu ani în urmă cu HTML, cu mult înainte de apariția HTML5, ați folosit probabil atât etichetele aldine, cât și cele italice. După cum v-ați aștepta, aceste etichete au transformat elementele în text bold sau respectiv în text italic. Problema cu aceste etichete și de ce au fost împinse în favoarea elementelor noi (pe care le vom examina în curând) este că ele nu sunt elemente semantice. Acest lucru se datorează faptului că ele definesc modul în care textul ar trebui să arate mai degrabă decât informații despre text. Amintiți-vă, HTML (unde se vor scrie aceste etichete) este vorba despre structură, nu stil vizual! Visuals sunt tratate de CSS și cele mai bune practici de design web au susținut mult timp că ar trebui să aveți o separare clară a stilului și a structurii în paginile dvs. web. Aceasta înseamnă că nu folosiți elemente care nu sunt semantice și care detaliu arata mai degrabă decât structură. Acesta este motivul pentru care etichetele cu caractere aldine și italice au fost în general înlocuite cu cuvinte puternice (pentru caractere aldine) și cu accent (pentru caractere cursive).
& Lt; strong & gt; și & lt; em & gt;
Elementele puternice și accentuate adaugă informații textului dvs., detaliind conținutul care trebuie tratat diferit și subliniat atunci când acest conținut este vorbit. Folosiți aceste elemente aproape în același mod în care ați fi folosit în trecut caractere aldine și italice. Simplu înconjurați textul cu etichetele de deschidere și de închidere ( și pentru accentuare și și pentru un accent puternic), iar textul inclus va fi subliniat.
Puteți să introduceți aceste etichete și nu contează care este eticheta externă. Aici sunt cateva exemple.
Acest text este subliniat și majoritatea browserelor îl vor afișa ca cursive. Acest text este puternic accentuat , iar cele mai multe browsere îl vor afișa sub formă de caractere aldine.În ambele exemple, nu dictăm aspectul vizual cu HTML. Da, aspectul implicit al etichetei ar fi italic, iar ar fi îndrăzneț, dar ar putea fi ușor schimbate în CSS. Acesta este cel mai bun din ambele lumi. Puteți utiliza stilurile implicite ale browserului pentru a obține text în caractere în italic sau bold, fără a traversa linia și structura și stilul de amestecare. Spuneți că doriți ca textul să nu fie doar îndrăzneț, ci să fie și roșu, puteți adăuga acest lucru în CSS
puternic {
culoarea rosie;
}
În acest exemplu, nu este necesar să adăugați o proprietate pentru greutatea fontului caractere aldine, deoarece aceasta este cea implicită. Dacă nu doriți să lăsați asta la întâmplare, cu toate acestea, puteți oricând să o adăugați:
puternic {
font-weight: bold;
culoarea rosie;
}
Acum, ați fi garantat că aveți o pagină cu text aldin (și roșu) oriunde este utilizat eticheta .
Dublați pe accent
Un lucru pe care l-am observat de-a lungul anului este ceea ce se întâmplă dacă încerci să te dublezi pe accente. De exemplu:
Acest text trebuie să conțină atât text bolded și italicizat în interiorul acestuia.V-ați gândi că această linie va produce o zonă care are un text care este bold și italic. Uneori se întâmplă acest lucru, dar am văzut că unele browsere onorează numai cel de-al doilea dintre cele două stiluri de accent, cel mai apropiat de textul în cauză și afișează acest lucru doar ca cursivitate. Acesta este unul dintre motivele pentru care nu mă dublez pe etichetele de accentuare.
Un alt motiv pentru a evita această "dublare" este în scopuri stilistice. O formă de accent dacă este de obicei suficient pentru a transmite tonul pe care doriți să îl setați. Nu aveți nevoie să vă îndreptați, să redimensionați, să colorați, să măriți și să subliniați textul pentru ca acesta să iasă în evidență. Acest text, toate aceste feluri diferite de accent, ar deveni frică. Așadar, aveți grijă atunci când folosiți etichete cu accent sau stiluri CSS pentru a oferi accent și nu exagerați.
O notă despre caractere aldine și italice
Un gând final - în timp ce etichetele îndrăznețe () și italice () nu mai sunt recomandate pentru a fi folosite ca elemente de accentuare, există unii designeri web care folosesc aceste etichete pentru a modela liniile inline ale textului. Practic, ei o folosesc ca un element . Acest lucru este frumos, deoarece etichetele sunt foarte scurte, însă utilizarea acestor elemente în acest mod nu este în general recomandată. Menționez în cazul în care o vedeți acolo pe unele site-uri fiind folosite pentru a nu crea text îndrăzneț sau italicizat, ci pentru a crea un cârlig CSS pentru un alt tip de stil vizual.
Articolul original de Jennifer Krynin. Editat de Jeremy Girard în data de 12/2/16.