Cuvinte individuale sau pasaje întregi pot fi scrise cu ușurință în cursiv sau în bold. Mai întâi, varianta care evidențiază textul în bold. Pentru aceasta, sunt disponibile, în principiu, două elemente HTML: b și strong.
Bine ați venit la <b>PSD-Tutorials.de</b>! <br /> Bine ați venit la <strong>PSD-Tutorials.de</strong>!
O privire asupra rezultatului în browser va arăta următoarea imagine:
Este evident faptul că ambele elemente oferă o afișare identică. De ce există, însă, două elemente diferite? De fapt, pentru paginile web există alte forme de afișare decât cele din browserele standard cunoscute. Gândiți-vă, de exemplu, la cititoarele pentru persoanele nevăzătoare sau la dispozitivele mobile. Elementele HTML oferite de W3C sunt menite să susțină semantica. Astfel, elementul b nu mai înseamnă de fapt că ceva trebuie afișat îngroșat. Mai degrabă, b reprezintă un text vizual evidențiat, fără a avea o importanță crescută. Aceasta ar putea include, de exemplu, numele produselor sau cuvintele cheie din documente.
Elementul strong a fost folosit până acum pentru o evidențiere mai puternică. În schimb, em a fost folosit pentru text important sau evidențiat (emfatic). În versiunile anterioare de HTML, strong a reprezentat o intensificare a em. În HTML5, ambele elemente primesc o altă semnificație.
Mai întâi, un text cu o evidențiere normală.
<p> Pisicile sunt animale drăguțe. </p>
Acum, același text, dar cu accent pe primul cuvânt.
<p> <em>Pisicile</em> sunt animale drăguțe. </p>
Prin utilizarea lui em, accentul este pus pe cuvântul Pisicile. Aceasta ar fi posibil într-o discuție în care se discută despre faptul dacă câinii sau pisicile sunt mai adorabile.
În același caz, elementul em ar putea fi aplicat și cuvântului sunt.
<p> Pisicile <em>sunt</em> animale drăguțe. </p>
Aceasta ar putea fi o replică într-o discuție în care cineva afirmă că pisicile nu sunt deloc adorabile.
De fapt, pasajele marcate cu em sunt afișate în cursiv în browser. Aceeași efect optic poate fi obținut folosind elementul i.
Potrivit proiectului HTML5, elementul i nu mai reprezintă cursiv.
<p> Bine ați venit la <i>PSD-Tutorials.de</i> </p>
Mai degrabă, acest element înseamnă acum că se dorește transmiterea unei alte stări de spirit. Elementul i este interesant, de exemplu, pentru etichetarea unor termeni tehnici sau nominalizări taxonomice.
Toate acestea sunt teribil de teoretice, știu. Principial ar trebui să încercați să respectați recomandările HTML5. Pe de altă parte, evident, nimeni nu-și va smulge capul dacă foloseșți strong în loc de b.
<p> <em>Rând cu em</em><br /> <i>Rând cu i</i><br /> <strong>Rând cu strong</strong><br /> <b>Rând cu b</b> </p>
În cele din urmă, browser-ele trebuie să acționeze aici.
Acronime cu abbr
Pentru a evidenția un acronim, se recurge la același element care a fost folosit până acum pentru abrevieri, și anume la abbr.
Biroul Germano-Austriac al <abbr title="World Wide Web Consortium">W3C</abbr> și-a mutat sediul la Universitatea de Tehnologie Potsdam începând cu aprilie 2009.
Browserele care interpretează corect elementul abbr vor sublinia textul inclus în interiorul acestuia.
În plus, elementului abbr ar trebui să i se atribuie un atribut title. Acolo, de obicei, se notează expresia completă pentru acronim. Atunci când vizitatorul plasează cursorul deasupra acronimului, expresia completă este afișată într-o fereastră de informații.
Adrese cu address
Cu elementul address se pot marca informațiile de adresă.
<address> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck<br /> </address>
Browserele afișează de obicei conținutul elementului address cursiv.
Marcare cod cu elementul code
Elementul code este folosit pentru marcat codul de program. În acest sens, față de versiunile anterioare HTML, nu s-a schimbat nimic. În continuare, code este folosit în acel scop.
<pre>
Acesta este un antet HTML:
<code>
<html>
<head>
<title></title>
</head>
</code>
</pre>
De obicei, se combină elementul code cu elementul pre pentru a păstra indentările utilizate în codul de program.
Specificația HTML5 recomandă utilizarea atributului class în legătură cu elementul code. Acest atribut poate fi folosit pentru a atribui limbajul utilizat în elementul code. Iată câteva exemple tipice de cum pot arăta aceste marcaje:
• language-html
• language-css
• language-javascript
• language-php
• language-pascal
Dacă și cum browserele implementează aceste instrucțiuni nu este specificat de către W3C.
<pre>
Acesta este un antet HTML:
<code class="language-html">
<html>
<head>
<title></title>
</head>
</code>
</pre>
Momentan, atributul class nu are niciun efect vizibil în browser. Cu toate acestea, privitorii pot recunoaște în ce limbaj este scris codul de program atunci când aruncă o privire asupra codului sursă al paginii.
Marcare cu elementul small
Elementul small a fost inițial folosit pentru a afișa textul mai mic decât normalul. În HTML5, small este destinat explicit textelor mici. Acest text mic ar putea fi de exemplu:
• Informații despre drepturi de autor
• Excluderi de responsabilitate
• Termeni și condiții
• Contracte
W3C indică în mod expres că small nu ar trebui să fie folosit pentru texte lungi.
<small> Copyright de PSD-Tutorials.de<br /> 4eck Media GmbH & Co. KG<br /> Hauptstraße 20<br /> 17309 Viereck </small>
Sublinierea textelor
Puteți sublinia cuvintele folosind elementul u. Iată un exemplu:
<p>Bun venit la <u>PSD-Tutorials.de</u></p>
Rezultatul în browser arată astfel:
Când se analizează rezultatul, acesta corespunde efectului dorit. Cu toate acestea, situația are o hibă. Pe internet, textele subliniate sunt cunoscute în mod obișnuit ca hyperlink-uri. Dacă subliniați un text sau un cuvânt, vizitatorii ar putea crede că este vorba despre un hyperlink. Încercarea de a-l face clic va eșua, desigur. Ar trebui să renunțați la subliniere în acest caz.
