# Attributi HTML: un riepilogo degli attributi più importanti

Gli attributi HTML memorizzano **informazioni aggiuntive in un tag HTML**. Per farlo, basta aggiungerli nel codice. Oltre agli attributi universali, per la gestione di eventi e data, esistono numerosi attributi individuali.

## Per cosa vengono utilizzati gli attributi HTML?

Gli attributi HTML vengono utilizzati per memorizzare informazioni aggiuntive sugli elementi di un [tag HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/tag-html/). **Sono costituiti da un nome e da un valore**. Gli attributi HTML si trovano nel tag di apertura e sono *case insensitive*, ossia non fanno distinzione tra maiuscole e minuscole. Sebbene i loro valori non debbano necessariamente essere scritti tra virgolette, si consiglia comunque di scriverli in questo modo, onde evitare errori. Gli attributi HTML si inseriscono nel codice in questo modo:

```none
<elemento nome="" dell’attributo="Valore dell’attributo"></elemento>
```

Se, ad esempio, si vuole inserire un link in un sito web, questo avviene tramite il tag e l’attributo href. Uniti, appaiono così:

```none

<html>
<head>
<title>Titolo d’esempio</title>
</head>
<body>
<a href="https://www.esempio.it">Fate clic qui per la pagina di esempio.</a>
</body>
</html>
```

Consiglio Per saperne di più sui collegamenti interni ed esterni attraverso l’HTML e gli attributi corrispondenti, potete consultare il nostro articolo dettagliato su [a href](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/a-href-html/ "a href HTML").

## Quali attributi HTML esistono?

Esistono molti attributi HTML diversi, anche se dall’introduzione di [HTML5](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/cose-lhtml5/) alcune opzioni non sono più utilizzabili. Gli attributi HTML possono essere suddivisi approssimativamente in cinque gruppi diversi:

- **Classici attributi universali** che possono essere utilizzati in quasi tutti gli elementi e mantengono un ruolo costante. Tuttavia, con alcuni elementi non hanno alcun effetto.
- **Attributi specifici** che influenzano i singoli elementi e ne definiscono i parametri.
- **Attributi che valgono dall’introduzione di HTML5**: questi creano in parte nuove possibilità o sostituiscono vecchi attributi HTML.
- **Attributi di gestione degli eventi** che attivano un evento definito per un elemento non appena gli utenti eseguono una determinata azione.
- **Attributi data** che possono contenere informazioni, ma non sono visibili per le/gli utenti.

## Classici attributi universali

I classici attributi universali sono consentiti nella maggior parte dei tag HTML. Di seguito trovate i più noti:

<table>
  <tbody>
    <tr>
      <td><strong>Attributo HTML</strong></td>
      <td><strong>Descrizione</strong></td>
      <td><strong>Esempio</strong></td>
    </tr>
    <tr>
      <td>id</td>
      <td>Serve a identificare in modo univoco un elemento HTML.</td>
      <td>id="esempio"</td>
    </tr>
    <tr>
      <td>class</td>
      <td>Si usa per assegnare un elemento a una o più classi.</td>
      <td>class="automobili"</td>
    </tr>
    <tr>
      <td>style</td>
      <td>Definisce lo stile di un elemento HTML e può quindi impostare, ad esempio, il colore, il font o la dimensione del carattere.</td>
      <td>style="color: blue; font-size: 2em"</td>
    </tr>
    <tr>
      <td>title</td>
      <td>Contiene informazioni aggiuntive sul contenuto di un elemento; queste vengono visualizzate, ad esempio, in una finestra separata quando si passa il mouse sull’elemento.</td>
      <td>title="testo d’esempio"</td>
    </tr>
    <tr>
      <td>lang</td>
      <td>Determina la lingua di base di un documento.</td>
      <td>&lt;html lang="it"&gt;</td>
    </tr>
    <tr>
      <td>dir</td>
      <td>Definisce la direzione di scorrimento di un testo da sinistra a destra o viceversa.</td>
      <td>&lt;html dir="ltr"&gt;esempio&lt;/html&gt;</td>
    </tr>
  </tbody>
</table>

## Attributi HTML specifici

Esistono numerosi attributi HTML specifici per definire i singoli elementi. Di seguito i più comuni:

<table>
  <tbody>
    <tr>
      <td><strong>Attributo HTML</strong></td>
      <td><strong>Descrizione</strong></td>
      <td><strong>Esempio</strong></td>
    </tr>
    <tr>
      <td>alt</td>
      <td>Visualizza un testo alternativo se non è possibile caricare o visualizzare un’immagine.</td>
      <td>&lt;img src="https://www.ionos.it/digitalguide/auto rossa.jpg" alt="auto sportiva rossa al semaforo."&gt;</td>
    </tr>
    <tr>
      <td>height</td>
      <td>Imposta l’altezza di un elemento in pixel.</td>
      <td>&lt;img alt="l’auto rossa" height="220"&gt;</td>
    </tr>
    <tr>
      <td>width</td>
      <td>Imposta la larghezza di un elemento in pixel.</td>
      <td>&lt;img alt="l’auto rossa" width="220"&gt;</td>
    </tr>
    <tr>
      <td>href</td>
      <td>Definisce l’URL di un link.</td>
      <td>&lt;a href="https://www.sitowebesempio.it" title="Per saperne di più"&gt;</td>
    </tr>
    <tr>
      <td>[hreflang](https://www.ionos.it/digitalguide/online-marketing/marketing-sui-motori-di-ricerca/hreflang-rudimenti-esempi-ed-errori-piu-comuni/)</td>
      <td>Imposta la lingua del documento collegato.</td>
      <td>&lt;a href="https://www.sitowebesempio.it" lang="it" hreflang="en"&gt;Informazioni in inglese&lt;/a&gt;</td>
    </tr>
    <tr>
      <td>[target](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/html-target/)</td>
      <td>Determina dove deve essere aperto un link.</td>
      <td>&lt;a href="https://www.sitowebesempio.it" target="\_blank"&gt;</td>
    </tr>
    <tr>
      <td>rel</td>
      <td>Definisce la relazione tra il documento di destinazione e quello collegato.</td>
      <td>&lt;a rel="nofollow" href="https://www.sitowebesempio.it/"&gt;pagina d’esempio&lt;/a&gt;</td>
    </tr>
    <tr>
      <td>src</td>
      <td>Definisce l’origine di un elemento.</td>
      <td>&lt;img src="https://www.ionos.it/digitalguide/auto rossa.jpg" alt="l’auto rossa&gt;</td>
    </tr>
    <tr>
      <td>autoplay</td>
      <td>Assicura che un determinato contenuto multimediale venga riprodotto automaticamente; tuttavia, la maggior parte dei browser può ignorare questa impostazione.</td>
      <td>&lt;video autoplay&gt;</td>
    </tr>
    <tr>
      <td>poster</td>
      <td>Imposta un’immagine di anteprima quando si [inserisce un video in HTML](https://www.ionos.it/digitalguide/siti-web/creare-siti/come-inserire-video-in-un-sito-tramite-html/).</td>
      <td>&lt;video controls poster="anteprima.png"&gt;</td>
    </tr>
  </tbody>
</table>

## Nuovi attributi da HTML5

Dall’introduzione di HTML5 e HTML 5.1 sono stati aggiunti alcuni attributi HTML. Tra questi, rientrano i seguenti:

<table>
  <tbody>
    <tr>
      <td><strong>Attributo HTML</strong></td>
      <td><strong>Descrizione</strong></td>
      <td><strong>Esempio</strong></td>
    </tr>
    <tr>
      <td>contenteditable</td>
      <td>Definisce se il contenuto di un elemento può essere modificato; i valori possibili sono true e false.</td>
      <td>&lt;p contenteditable="false"&gt;</td>
    </tr>
    <tr>
      <td>hidden</td>
      <td>Attributo universale che può nascondere un elemento.</td>
      <td>&lt;p hidden&gt;   
  
Questo testo viene nascosto   
  
&lt;/p&gt;</td>
    </tr>
    <tr>
      <td>dropzone</td>
      <td>Definisce se un elemento viene copiato (copy), collegato (link) o spostato (move) durante il trascinamento con drag&amp;drop.</td>
      <td>&lt;p dropzone="move"&gt;</td>
    </tr>
    <tr>
      <td>draggable</td>
      <td>Attributo universale che definisce se il contenuto di un elemento può essere trascinato tramite drag&amp;drop.</td>
      <td>&lt;p draggable="false"&gt;</td>
    </tr>
    <tr>
      <td>loading</td>
      <td>Determina la modalità di caricamento dei file multimediali esterni; i valori ammessi sono auto, eager e lazy.</td>
      <td>&lt;img src="https://www.ionos.it/digitalguide/autorossa.jpg" alt="l’auto rossa" loading="lazy"</td>
    </tr>
    <tr>
      <td>spellcheck</td>
      <td>Determina se deve essere attivato il controllo ortografico; i valori ammessi sono true e false.</td>
      <td>&lt;p contenteditable="true" spellcheck="false"&gt;</td>
    </tr>
  </tbody>
</table>

## Attributi per la gestione di eventi

Esistono diversi attributi HTML che attivano eventi nel browser. I seguenti attributi HTML sono quindi una piccola selezione dei diversi eventi che vengono integrati nell’HTML tramite JavaScript.

<table>
  <tbody>
    <tr>
      <td><strong>Attributo HTML</strong></td>
      <td><strong>Descrizione</strong></td>
      <td><strong>Esempio</strong></td>
    </tr>
    <tr>
      <td>onclick</td>
      <td>Attivazione di un evento in JavaScript con un clic del mouse.</td>
      <td>&lt;button onclick="Funzione d’esempio ( ) "&gt;Cliccate qui&lt;/button&gt;</td>
    </tr>
    <tr>
      <td>onscroll</td>
      <td>Viene attivato quando l’elemento viene fatto scorrere.</td>
      <td>&lt;div onscroll="Funzione d’esempio ( ) "&gt;</td>
    </tr>
    <tr>
      <td>onkeydown</td>
      <td>Viene attivato quando viene premuto un pulsante.</td>
      <td>&lt;input type="text" onkeydown=Funzione d’esempio ( ) "&gt;</td>
    </tr>
    <tr>
      <td>onsearch</td>
      <td>Attiva JavaScript non appena viene inserita una ricerca nella maschera di ricerca.</td>
      <td>&lt;input type="search" onsearch="Funzione d’esempio ( ) "&gt;</td>
    </tr>
    <tr>
      <td>onerror</td>
      <td>Può eseguire JavaScript in caso di errore.</td>
      <td>&lt;img src="https://www.ionos.it/digitalguide/autorossa.jpg" onerror="Funzione d’esempio ( ) "&gt;</td>
    </tr>
    <tr>
      <td>oncopy</td>
      <td>Viene attivato quando un testo viene copiato.</td>
      <td>&lt;input type="text" oncopy="Funzione d’esempio ( ) " value="Copiate questo testo"&gt;</td>
    </tr>
    <tr>
      <td>onselect</td>
      <td>Attiva JavaScript non appena viene selezionato un testo nell’elemento di input.</td>
      <td>&lt;input type="text onselect="Funzione d’esempio ( ) " value="Testo d’esempio"&gt;</td>
    </tr>
  </tbody>
</table>

## Attributi data

Oltre agli attributi HTML elencati sopra, esistono attributi separati che possono essere **valutati solo tramite uno script o utilizzati con i CSS**. In questo modo, è possibile fornire informazioni che non devono essere presentate visivamente. Questi attributi HTML iniziano sempre con *data-*. È possibile impostarli con *setAttribute* e leggerli con *getAttribute*. Anche i motori di ricerca non valutano questi attributi HTML. Per gli attributi data sono ammesse solo lettere minuscole, numeri, trattini, punti e virgole.

```none
<article
id="elementi d’esempio"
data-columns="5"
data-index-number="1385"
data-parent="html5">
</article>
```

## Conclusione: gli attributi HTML sono importanti per quasi tutti i siti web

Quando [imparerete l’HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/imparare-lhtml-lampio-tutorial-per-principianti/), vi accorgerete subito che gli attributi HTML sono **un elemento importante per la costruzione di un sito web ottimale e pienamente funzionale**. Soprattutto se avete bisogno di funzioni che si discostano dalla gestione quotidiana, gli attributi HTML sono il modo migliore e più sicuro per farlo. Le informazioni memorizzate assicurano che tutti gli aspetti del vostro nuovo sito web lavorino di pari passo. Inoltre, l’utilizzo è semplicissimo grazie a uno dei tanti [editor HTML](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/gli-editor-html/).

Consiglio Un sito web perfetto, proprio come piace a voi: con [**MyWebsite Now**](https://www.ionos.it/sito-web/lanciare-sito-web "Soluzioni web di IONOS") di IONOS avrete a disposizione tutti gli strumenti necessari per costruire la vostra pagina web in totale autonomia. In alternativa, il nostro team di esperte ed esperti creerà il vostro sito web interamente secondo i vostri desideri. Scegliete il modello giusto per i vostri scopi!


This is a markdown version of: [https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/](https://www.ionos.it/digitalguide/siti-web/programmazione-del-sito-web/attributi-html/) for AI/LLM consumption.