Primi passi con HTML - Lezione 8 - Attributi universali dei tag

Abbiamo già parlato del fatto che diversi tag hanno i propri attributi. Ora è il momento di parlare del fatto che esistono anche attributi comuni a tutti i tag. Vediamo i più popolari.

Attributo id

L’attributo id assegna un nome univoco a un tag. Questi nomi non devono ripetersi, poiché potrebbero causare problemi con jQuery o JavaScript. Ecco alcuni esempi di utilizzo dell’attributo id:

...
<ul id="menu1">
  <li id="item1">lorem</li>
  <li id="item2">ipsum</li>
  <li id="item3">ciao</li>
  <li id="item4">mondo</li>
</ul>
...
<div id="header"></div>

L’attributo id può essere usato per applicare stili CSS specifici a un determinato blocco, menu, voce di menu o altri elementi. Inoltre, l’attributo id è ampiamente utilizzato anche in JavaScript (e in jQuery).

Attributo class

L’attributo class indica l’appartenenza di un tag a una determinata classe. Proprio come id, può essere usato per applicare stili CSS, ma la differenza è che una classe può essere assegnata a più tag contemporaneamente. Se l’attributo id è unico, l’attributo class può essere condiviso da molti elementi:

<ul id="menu1">
  <li class="item">lorem</li>
  <li class="item">ipsum</li>
  <li class="item">ciao</li>
  <li class="item">mondo</li>
</ul>

Attributo style

L’attributo style serve per scrivere stili CSS direttamente all’interno del tag. Per ora non è necessario approfondirlo: lo analizzeremo dettagliatamente nel corso di CSS. Ecco alcuni esempi semplici:

...
<div style="width: 200px; height: 100px; background: #dddddd">
Blocco
</div>
...
<p style="font-size: 14px; color: #333333">
Testo
</p>

Il primo esempio visualizza un blocco largo 200 pixel, alto 100 pixel, con sfondo di colore #dddddd (un grigio chiaro). Il secondo esempio mostra un paragrafo con testo di dimensione 14 pixel e colore #333333 (quasi nero).

Attributo title

L’attributo title serve per mostrare un suggerimento tooltip quando si passa il mouse sopra un elemento della pagina:

...
<img src="./images/image.jpg" alt="foto" title="sono io" />
...
<a href="html2.html" title="la mia pagina">Link</a>
...
<h2 title="titolo">Ciao, mondo!</h2>

Naturalmente esistono anche altri attributi universali, come accesskey, contenteditable, contextmenu, dir, hidden, lang, spellcheck e tabindex. Ti capiterà di incontrarli più avanti, soprattutto lavorando con siti multilingua. Per ora, è sufficiente conoscere i principali attributi universali.