Ce face <b> și <i>
În HTML5, <b> și <i> nu mai sunt doar taguri de stil. Au primit un sens propriu, diferit de <strong> și <em>.
<b> marchează un text spre care vrei să atragi privirea, dar care nu este mai important decât restul: cuvinte-cheie dintr-un rezumat, numele unui produs într-o recenzie, prima frază dintr-un articol. Browserul îl afișează îngroșat.
<i> marchează un text spus cu altă voce sau în alt registru: un cuvânt dintr-o limbă străină, un termen tehnic, numele unei nave, un gând al personajului. Browserul îl afișează cursiv. Pentru cuvintele străine adaugă atributul lang, ca cititoarele de ecran să le pronunțe corect.
Atribute
| Atribut | Descriere |
|---|---|
lang |
Pe <i>: limba textului străin (de exemplu en, la, fr). |
class |
Clasă CSS, utilă când același tip de text (de exemplu termenii tehnici) are un stil comun. |
Exemple
Exemplul 1: Nume de produse cu <b> într-o recenzie
Numele produselor ies în evidență, dar nu sunt mai importante decât restul frazei, deci nu folosim <strong>.
<p>Ana a comparat <b>Laptop Nova 14</b> și <b>Laptop Orion 15</b>.
Primul costă 3.499 lei, al doilea 3.899 lei.</p>Ce afișează browserul
Ana a comparat Laptop Nova 14 (îngroșat) și Laptop Orion 15 (îngroșat).
Primul costă 3.499 lei, al doilea 3.899 lei.Exemplul 2: Cuvinte străine și termeni tehnici cu <i>
Atributul lang spune cititorului de ecran în ce limbă să pronunțe expresia.
<p>Profesorul din Iași a încheiat ora cu <i lang="la">carpe diem</i>.</p>
<p>Fișierul se salvează în format <i>UTF-8</i>, altfel diacriticele se strică.</p>Ce afișează browserul
Profesorul din Iași a încheiat ora cu carpe diem (cursiv).
Fișierul se salvează în format UTF-8 (cursiv), altfel diacriticele se strică.Greșeli frecvente
- Folosirea
<b>pentru avertismente sau informații critice: acolo textul chiar este important, deci tagul corect este<strong>. - Folosirea
<i>pentru iconițe (de exemplu<i class="icon-cos">): este o convenție veche a unor biblioteci, fără sens semantic; un<span aria-hidden="true">descrie mai corect o iconiță decorativă. - Folosirea lor doar pentru aspect, pe paragrafe întregi; pentru simplu text îngroșat sau cursiv folosește CSS (
font-weight,font-style).
Comenzi înrudite
<strong> și <em>: Evidențiază textul: strong conferă importanță majoră (îngroșat), iar em conferă accent sau intonație (cursiv/italic).<mark> și <small>: mark evidențiază textul ca și cum ar fi subliniat cu marker galben; small este folosit pentru detalii legale și note de subsol.<span>: Container generic de tip inline, utilizat pentru a grupa o porțiune de text și a-i aplica stiluri CSS sau acțiuni JS.<u> și <s>: Elementul u marchează o adnotare nearticulată (de exemplu o greșeală de scriere), iar s marchează un text care nu mai este corect sau relevant.