<abbr>: L'elemento abbreviazione

L'elemento HTML <abbr> rappresenta un'abbreviazione o un acronimo; l'attributo facoltativo title può fornire un'espansione o una descrizione per l'abbreviazione. Se presente, title deve contenere una descrizione completa dell'abbreviazione e nient'altro

Attributi

Questo elemento supporta solo gli attributi globali. L'attributo title ha un significato semantico specifico se utilizzato con l'elemento <abbr>deve contenere una descrizione completa leggibile dall'uomo o un'espansione dell'abbreviazione. Questo testo viene spesso presentato dai browser come suggerimento quando il cursore del mouse viene posizionato sopra l'elemento.

Ogni elemento <abbr> che usi è indipendente da tutti gli altri; fornire un title per uno non allega automaticamente lo stesso testo di espansione ad altri con lo stesso testo di contenuto.

Note sull'utilizzo

Casi d'uso tipici

Non è certamente necessario che tutte le abbreviazioni siano contrassegnate utilizzando <abbr>. Ci sono, tuttavia, alcuni casi in cui è utile farlo:

  • Quando viene utilizzata un'abbreviazione e si desidera fornire un'espansione o una definizione al di fuori del flusso del contenuto del documento, usare <abbr> con un appropriato title.
  • Per definire un'abbreviazione che potrebbe non essere familiare al lettore, presentare il termine utilizzando <abbr> e un attributo title o un testo in linea che fornisce la definizione.
  • Quando è necessario annotare semanticamente la presenza di un'abbreviazione nel testo, l'elemento <abbr> è utile. Questo può essere utilizzato, a sua volta, per scopi di stile o script.
  • È possibili utilizzare <abbr> insieme a <dfn> per stabilire definizioni per termini che sono abbreviazioni o acronimi.

Considerazioni grammaticali

Nelle lingue connumero grammaticale (cioè le lingue in cui il numero di elementi influisce sulla grammatica di una frase), usa lo stesso numero grammaticale nel tuo attributo title come all'interno del tuo elemento <abbr>. Ciò è particolarmente importante nelle lingue con più di due numeri, come l'arabo, ma è rilevante anche in inglese.

Stile predefinito

Lo scopo di questo elemento è puramente per comodità dell'autore e tutti i browser lo visualizzano inline (display: inline) per impostazione predefinita, sebbene il suo stile predefinito vari da un browser all'altro:

  • Alcuni browser, come Internet Explorer, non hanno uno stile diverso rispetto a un elemento <span>.
  • Opera, Firefox e alcuni altri aggiungono una sottolineatura tratteggiata al contenuto dell'elemento.
  • Alcuni browser non solo aggiungono una sottolineatura tratteggiata, ma la mettono anche in maiuscolo; per evitare questo stile, aggiungendo qualcosa come font-variant: none permetterà al CSS di occuparsi di questo caso.

Esempi

Contrassegnare semanticamente un'abbreviazione

Per contrassegnare un'abbreviazione senza fornire un'espansione o una descrizione, utilizzare <abbr> senza alcun attributo, come mostrato in questo esempio.

HTML

<p>Usare <abbr>HTML </abbr> è divertente!</p>

Abbreviazioni di stile

Puoi utilizzare i CSS per impostare uno stile personalizzato da utilizzare per le abbreviazioni, come mostrato in questo semplice esempio.

HTML

<p>Usando <abbr>CSS </abbr>puoi stilizzare le tue abbreviazioni </p>

CSS

abbr {
  font-variant: all-small-caps;
}

Fornire una definizione

L'aggiunta di un attributo title consente di fornire un'espansione o una definizione per l'abbreviazione o l'acronimo.

<p>Per favore non usare <abbrtitle="comunque">cmq </abbr>come abbreviazione quando messaggi <p>