Gli elementi i-b, em, strong

Diamo un’occhiata a <i> e <b> e confrontiamoli ...

Diamo un’occhiata a <i> e <b> e confrontiamoli con i “concorrenti” semantici <em> e <strong>. In sintesi:

<i> – si utilizzava per il corsivo, mentre ora per il testo in una “voce alternativa”, come parole straniere , termini tecnici e testo tipizzato in corsivo
<b> – si utilizzava per il grassetto, mentre ora per il testo “stilisticamente sfalsato”, come le parole chiave e il testo tipograficamente in grassetto
<em> – si utilizzava per l’enfasi, mentre ora si usa per l’enfasi sullo stress, cioè qualcosa che si dovrebbe pronunciare in modo diverso
<strong> – si utilizzava per una enfasi più forte, mentre ora sottolineare un’importanza forte, fondamentalmente la stessa cosa

Analizziamo più in profondità <i> e <b> (  la prossima lezione vedremo gli altri ).

<i> e <b> ( i-b) erano elementi di stile di carattere HTML4 e sono ancora utilizzati  per seguire convenzioni tipografiche. Ora però hanno un significato semantico e il loro stile può essere modificato tramite CSS, il che significa che non sono solo di presentazione .

L’elemento i rappresenta un intervallo di testo in una voce alternativa o diversamente sfalsata rispetto alla testo normale, in un modo che indica una diversa qualità del testo come:  una designazione tassonomica, un termine tecnico o una frase idiomatica in un’altra lingua. Si dovrebbe utilizzare  <i> solo quando non è disponibile nulla di più adatto per es. <Em> per il testo con enfasi sullo stress, <strong> per testo con importanza semantica, <cite> per titoli in una citazione o bibliografia. Quindi si utilizza <i> per i blocchi di testo in corsivo. Si ricorda inoltre di utilizzare l’attributo class per identificare il motivo dell’utilizzo dell’elemento, rendendo più facile il restyling in un uso particolare.  Le frasi complete di testo straniero dovrebbero essere generalmente riportate tra virgolette nel loro paragrafo (o blockquote) e non dovrebbero usare <i> .

L’elemento b rappresenta un intervallo di testo a cui viene attirata l’attenzione  senza trasmettere alcuna importanza aggiuntiva e senza alcuna implicazione come le parole chiave in un estratto di un documento, i nomi di un prodotto in una recensione.

Da usare  <b>  solo quando non ci sono altri elementi più adatti per es. <Strong> per il testo con importanza semantica, <em> per il testo enfatizzato (testo con “enfasi sullo stress”), <h1> – <h6> per i titoli, e <mark> per testo evidenziato o segnato. Per ricreare gli effetti tipografici tradizionali, usa i selettori di pseudo-elementi CSS come: first-line e: first-letter dove appropriato. Ancora una volta, ricordarsi di utilizzare l’attributo class per identificare il motivo dell’uso dell’elemento, rendendo più facile il restyling .

Kenji Agency : creazione siti web a Treviso