05 – Attributi HTML

Gli attributi HTML forniscono informazioni aggiuntive sugli elementi HTML.

Attributi HTML

  • Tutti gli elementi HTML possono avere attributi
  • Gli attributi forniscono informazioni aggiuntive sugli elementi
  • Gli attributi sono sempre specificati nel tag di inizio
  • Gli attributi di solito sono disponibili in coppie nome/valore come: name=”value”

L’attributo href

Il <a> tag definisce un collegamento ipertestuale.
L’ href attributo specifica l’URL della pagina a cui va il link:
Imparerai di più sui link nel capito dedicato ai Link HTML.


L’attributo src

Il tag viene utilizzato per incorporare un’immagine in una pagina HTML.
L’attributo src specifica il percorso dell’immagine da visualizzare:
Esistono due modi per specificare l’URL nell’attributo src:

  1. URL assoluto: collega a un’immagine esterna ospitata su un altro sito web.
    Esempio: src=”https://www.google.com/images/img.jpg”.

Note: le immagini esterne potrebbero essere protette da copyright. Se non ottieni il permesso di usarlo, potresti violare le leggi sul copyright. Inoltre, non è possibile controllare le immagini esterne; può essere improvvisamente rimosso o modificato.

  1. URL relativo: collega a un’immagine ospitata all’interno del sito web.
    Qui, l’URL non include il nome di dominio. Se l’URL inizia senza una barra, sarà relativo alla pagina corrente.
    Esempio: src=”img.jpg”. Se l’URL inizia con una barra, sarà relativo al dominio.
    Esempio: src=”/images/img.jpg”.

Suggerimento: è quasi sempre meglio utilizzare URL relativi.
Non si romperanno se cambi dominio.


Gli attributi width e height

Il tag dovrebbe contenere anche gli attributi width e height, che specificano la larghezza e l’altezza dell’immagine (in pixel):


L’attributo alt

L’attributo alt richiesto per il tag specifica un testo alternativo per un’immagine, se l’immagine per qualche motivo non può essere visualizzata.
Ciò può essere dovuto a una connessione lenta, a un errore nell’attributo src o se l’utente utilizza uno screen reader.

Esempio

Guarda cosa succede se proviamo a visualizzare un’immagine che non esiste:

<img src="imgage.jpg" alt="Bambino con palla">

L’attributo di stile

L’attributo style viene utilizzato per aggiungere stili a un elemento, come colore, carattere, dimensione e altro.
Imparerai di più sugli stili nel capitolo dedicato.


L’attributo lang

Dovresti sempre includere l’attributo lang all’interno del tag , per dichiarare la lingua della pagina web.
Questo ha lo scopo di aiutare i motori di ricerca e i browser.
L’esempio seguente specifica l’italiano come lingua:

<!DOCTYPE html>
<html lang="it">
<body>
...
</body>
</html>

I codici paese possono anche essere aggiunti al codice della lingua nell’attributo lang.
Quindi, i primi due caratteri definiscono la lingua della pagina HTML e gli ultimi due caratteri definiscono il paese.
L’esempio seguente specifica italiano come lingua e Italia come paese:

<!DOCTYPE html>
<html lang="it-IT">
<body>
...
</body>
</html>

Puoi vedere tutti i codici lingua nella sezione codici lingua.


Il titolo Attributo

L’attributo title definisce alcune informazioni extra su un elemento.

Il valore dell’attributo title verrà visualizzato come tooltip quando passi il mouse sopra l’elemento:


Suggerimento: scrivi sempre gli attributi in minuscolo

Lo standard HTML non richiede nomi di attributi in minuscolo.

L’attributo title (e tutti gli altri attributi) può essere scritto con lettere maiuscole o minuscole come title o TITLE.

Tuttavia, il W3C raccomanda attributi minuscoli in HTML e richiede attributi minuscoli per tipi di documenti più rigidi come XHTML.

Consiglio di usare sempre i nomi degli attributi in minuscolo.


Suggeriamo: citare sempre i valori degli attributi

Lo standard HTML non richiede virgolette attorno ai valori degli attributi.
Tuttavia, il W3C consiglia le virgolette in HTML e le richiede per tipi di documenti più rigidi come XHTML.

EsempioBuon Uso

<a href="https://www.nomesito.it/html/">Visita HTML tutorial</a> 

EsempioCattivo Uso

<a href=https://www.nomesito.it/html/>Visita HTML tutorial</a> 

A volte devi usare le virgolette.
Questo esempio non visualizzerà correttamente l’attributo title, perché contiene uno spazio:
Consiglio di usare sempre le virgolette attorno ai valori degli attributi.


Quotazioni singole o doppie?

Le virgolette doppie attorno ai valori degli attributi sono le più comuni in HTML, ma possono essere utilizzate anche virgolette singole.
In alcune situazioni, quando il valore dell’attributo stesso contiene virgolette doppie, è necessario utilizzare virgolette singole:

<p title='Luca "Roscio" Rossi'>

Riassunto capitolo

  • Tutti gli elementi HTML possono avere attributi
  • L’attributo href di <a> specifica l’URL della pagina a cui va il link
  • L’attributo src di <img> specifica il percorso dell’immagine da visualizzare
  • Gli attributi width e height di <img> forniscono informazioni sulle dimensioni delle immagini
  • L’attributo alt di <img> fornisce un testo alternativo per un’immagine
  • L’attributo style viene utilizzato per aggiungere stili a un elemento, come colore, carattere, dimensione e altro
  • L’attributo lang del tag <html> dichiara la lingua della pagina Web
  • L’attributo title definisce alcune informazioni extra su un elemento

Pubblicato da Luca Bocaletto

Sviluppatore, Creatore, Musicista, Artista, Radiantista, Scacchista.