Secondo il W3C, l'attributo ID in HTML è un identificatore univoco per l'elemento. Fornisce un modo per identificare un'area di una pagina Web per stili CSS, collegamenti di ancoraggio e destinazioni per gli script.
A cosa serve l'attributo ID?
L'attributo ID esegue diverse azioni per le pagine web:
- Un selettore di fogli di stile: questa è la funzione per la quale la maggior parte delle persone usa l'attributo ID. Poiché sono unici, applicherai uno stile solo a un elemento sulla tua pagina web quando applichi uno stile utilizzando una proprietà ID. Lo svantaggio dell'utilizzo di un ID per scopi di stile è che ha un livello di specificità molto elevato, che può renderlo molto impegnativo se hai bisogno di sovrascrivere uno stile per qualche motivo più avanti in a foglio di stile. Per questo motivo, le pratiche Web attuali tendono all'utilizzo di classi e selettori di classe al posto di ID e selettori di ID per scopi generali di stile.
- Ancore con nome per il collegamento a: Browser web target posizioni precise nei tuoi documenti web puntando all'ID alla fine dell'URL. Aggiungi l'id alla fine dell'URL della pagina, preceduto da un cancelletto. Collega a queste ancore con la pagina stessa aggiungendo il tag hash e il nome ID nel in href attributo per l'elemento. Ad esempio, per una divisione con un ID di contatto, collegalo in quella pagina con #contatto.
- Un riferimento per gli script: Se scrivi funzioni Javascript, usa l'attributo ID in modo da poter apportare modifiche all'elemento preciso nella pagina con i tuoi script.
- Altre lavorazioni: L'id supporta l'elaborazione all'interno dei tuoi documenti web in qualsiasi modo tu abbia bisogno. Ad esempio, potresti estrarre l'HTML in un database e utilizzare l'attributo ID per identificare i campi.
Regole per l'utilizzo dell'attributo ID
Assicurati che i tuoi attributi ID siano conformi a questi tre standard:
- L'ID deve iniziare con una lettera (a-z o A-Z).
- Tutti i caratteri successivi possono essere lettere, numeri (0-9), trattini (-), trattini bassi (_), due punti (:) e punti (.).
- Ogni ID deve essere univoco all'interno del documento.
Utilizzo dell'attributo ID
Dopo aver identificato un elemento univoco del tuo sito web, usa fogli di stile per modellare solo quell'elemento.
Ad esempio, per identificare un ID intitolato contatto, usa una di queste forme:
div#contatto { sfondo: #0cf;}
#contatto { sfondo: #0cf;}
Il primo campione prende di mira una divisione con un attributo ID di contatto. Il secondo punta ancora all'elemento con un ID di contatto, semplicemente non stabilirebbe che si tratta di una divisione. Il risultato finale dello styling sarebbe esattamente lo stesso.
Puoi anche collegarti a quell'elemento specifico senza aggiungere alcun tag.
Fai riferimento a quel paragrafo nei tuoi script con il getElementById Metodo JavaScript:
document.getElementById("sezione-contatto")
Gli attributi ID sono ancora molto utili in HTML, anche se selettori di classe li hanno sostituiti per scopi di stile più generali. L'utilizzo dell'attributo ID come gancio per gli stili, utilizzandoli anche come ancoraggi per collegamenti o destinazioni per script, significa che hanno ancora un posto importante nel web design oggi.