📢 Nuovo Corso Bootstrap Completo disponibile!

Attributi in HTML

Gli attributi HTML forniscono informazioni aggiuntive sugli elementi HTML.

Tutti gli elementi HTML possono avere attributi Gli attributi forniscono informazioni aggiuntive sugli elementi Gli attributi vengono sempre specificati nel tag di apertura Gli attributi vengono di solito forniti in coppia nome/valore, come: nome=“valore”

L’attributo href

Il tag <a> definisce un collegamento ipertestuale. L’attributo href specifica l’URL della pagina a cui il collegamento punta:

<a href="https://www.codegrind.it">Visita Codegrind</a>

Imparerai di piĂą sui collegamenti nel nostro capitolo HTML Links.

L’attributo src

Il tag <img> viene utilizzato per incorporare un’immagine in una pagina HTML. L’attributo src specifica il percorso dell’immagine da visualizzare:

<img src="immagine_copertina.jpg" />

Ci sono due modi per specificare l’URL nell’attributo src: ULR assoluto e URL relativo. Ne parliamo nel dettaglio nella sezione dei percorsi.

Gli attributi width e height

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

<img src="immagine_copertina.jpg" width="500" height="600" />

L’attributo alt

L’attributo obbligatorio alt per il tag <img> specifica un testo alternativo per un’immagine, se l’immagine non può essere visualizzata per qualche motivo. Questo può accadere a causa di una connessione lenta, di un errore nell’attributo src o se l’utente utilizza uno screen reader.

<img src="immagine_copertina.jpg" alt="Ragazza con una giacca" />

Guarda cosa accade quando proviamo a visualizzare un’immagine che non esiste:

<img src="immagine_miao.jpg" alt="Ragazza con una giacca" />

L’attributo style

L’attributo style viene utilizzato per aggiungere stili a un elemento, come il colore, il font, la dimensione e altro ancora.

<p style="color:red;">Questo è un paragrafo rosso.</p>

L’attributo lang

Dovresti sempre includere l’attributo lang all’interno del tag <html>, per dichiarare la lingua della pagina Web. Questo serve ad aiutare i motori di ricerca e i browser.

Nell’ seguente, si specifica l’inglese come lingua:

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

I codici di paese possono anche essere aggiunti al codice della lingua nell’attributo lang. Pertanto, i primi due caratteri definiscono la lingua della pagina HTML, mentre gli ultimi due caratteri definiscono il paese.

Nell’ seguente, si specifica l’inglese come lingua e gli Stati Uniti come paese:

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

Puoi vedere tutti i codici di lingua nella nostra HTML Language Code Reference.

L’attributo title

L’attributo title definisce ulteriori informazioni su un elemento.

Il valore dell’attributo title verrà visualizzato come suggerimento quando si posiziona il mouse sull’elemento:

<p title="Sono un suggerimento">Questo è un paragrafo.</p>

Usa sempre attributi in minuscolo

Lo standard HTML non richiede nomi di attributi in minuscolo.

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

Tuttavia, raccomandiamo nomi di attributi in minuscolo in HTML e richiede attributi in minuscolo per tipi di documento piĂą rigorosi come XHTML.

Usa sempre valori degli attributi tra virgolette

Lo standard HTML non richiede virgolette intorno ai valori degli attributi.

Tuttavia, raccomandiamo le virgolette in HTML e richiede virgolette per tipi di documento piĂą rigorosi come XHTML.

Buono:

<a href="https://www.codegrind.it/corsi">Guarda i nostri corsi</a>

Male:

<a href=https://www.codegrind.it/corsi/>Guarda i nostri corsi</a>