Stiluri de font logice în HTML

Elementele de stil oferă o modalitate simplă de a controla fontul. Aceste elemente se împart în două categorii: stiluri fizice și stiluri logice. Elementele de stil oferă doar control brut asupra aspectului textului dvs. Pentru tehnici mai sofisticate, consultați „Controlul fonturilor”.

Un stil logic indică faptul că textul inclus are un fel de semnificație specială. Am văzut deja elementul em, care indică faptul că textul inclus trebuie subliniat (accentuat atunci când este rostit). Lista elementelor de stil logic disponibile include:

em – Subliniază textul. De obicei, redat cursiv.

• 1. Please do <em>not</em> feed the monkeys.

strong – Subliniază puternic textul. De obicei redat ca bolduit.

• 1. <strong>WARNING:</strong> Never feed the monkeys under any circumstances.

cite – Indică o citare sau o referință. De obicei, redat cursiv.

• 1. For more information, please refer to
  2. <cite>The Dangers of Monkey Feeding, Vol 2</cite>.

dfn – Indică instanța definitorie a unui termen; se aplică de obicei atunci când termenul apare pentru prima dată. De obicei, redat cursiv.

• 1. Monkeys have sharp <dfn>canines</dfn>, sharp pointy teeth to bite you with.

abbr – indică o abreviere sau un acronim, cum ar fi RADAR (RAdio Detection And Ranging); oferă, de asemenea, un atribut title care poate conține versiunea complet scrisă. Plasarea mouse-ului peste abbr face ca multe browsere să afișeze un „tooltip” cu conținutul atributului title. Redarea este inconsecventă; unele browsere afișează o subliniere punctată, în timp ce altele nu fac nimic special.

1. In particular, beware of
2. <acronym title=”Monkeys Of Unusual Size”>MOUS</acronym>es.

code – Indică fragmente de cod de computer și comenzi. De obicei, redat într-un font monospațial.

• 1. <code>10 PRINT „I LOVE MONKEY CHOW”<br>
  2. 20 GOTO 10</code>

Ei bine, nu neapărat.

• În mod implicit, majoritatea browserelor redau em cursiv. Totuși, aceasta este doar o convenție. Nimic nu impune browserelor să folosească cursive și, de fapt, unele browsere (cum ar fi un browser de sinteză text în vorbire) ar putea fi complet incapabil să folosească cursive.
• Deși implicit este italic, îl puteți înlocui folosind CSS. De exemplu, puteți specifica că pe site-ul dvs. web, toate elementele em sunt afișate ca roșii și aldine.

Bine… dar de ce em, dfn și cite toate redau la fel în mod implicit? Dacă vreau cursive, de ce nu le-aș folosi și să uit de restul?

Ei bine, sigur, s-ar putea face asta. Cu toate acestea, utilizarea unui set mai bogat de elemente oferă un control mai fin. De exemplu, puteți declara că textul accentuat este roșu și aldin, dar toate citatele sunt verzi și cursive. De asemenea, puteți utiliza elemente de stil logic pentru a extrage mai mult sens dintr-un site web. De exemplu, dacă știi că un site web folosește în mod constant elementul cite, ai putea scrie cu ușurință un program pentru a extrage o listă de citate. (Dar să nu fii obsedat de acest punct; există modalități mai bune de a stoca și de a consuma acest tip de informații.)

Punctul cheie de reținut este că un element cite este o citare, nu o bucată de text italic. Cursivele sunt doar un efect secundar util.

Elemente în linie (inline) vs. bloc

Spre deosebire de elementele paragraf și antet, elementele de stil enumerate mai sus nu marchează un „bloc” de text. Elementele de stil fizic sunt elemente inline care își desfășoară activitatea fără a adăuga rupturi de linie suplimentare:

Exemplul 2.9. Elemente inline vs. bloc

1. <p>
2. 1. This is a paragraph with a section of
3. <em>emphasized text</em> inside of it.
4. </p>
6. <em>
7. 2. This is a section of emphasized text with
8. <p>a paragraph</p> inside of it.
9. </em>

Prima propoziție are ca rezultat un „bloc” cu câteva cuvinte accentuate înăuntru. În a doua propoziție, elementul p împarte textul în mai multe blocuri.

Sursa:  “The Pocket HTML Tutorial” Copyright 2022 de Evan Goer, licența CC BY 3.0. Traducere și adaptare de © 2024 Nicolae Sfetcu