Attributo ID HTML
L'attributo HTML idviene utilizzato per specificare un ID univoco per un elemento HTML.
Non puoi avere più di un elemento con lo stesso ID in un documento HTML.
Utilizzo dell'attributo id
L' idattributo specifica un ID univoco per un elemento HTML. Il valore id
dell'attributo deve essere univoco all'interno del documento HTML.
L' idattributo viene utilizzato per puntare a una specifica dichiarazione di stile in un foglio di stile. Viene anche utilizzato da JavaScript per accedere e manipolare l'elemento con l'id specifico.
La sintassi per id è: scrivi un carattere hash (#), seguito da un nome id. Quindi, definisci le proprietà CSS tra parentesi graffe {}.
Nell'esempio seguente abbiamo un <h1>elemento che punta al nome id "myHeader". Questo <h1>
elemento avrà lo stile in base alla #myHeader
definizione di stile nella sezione head:
Esempio
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My
Header</h1>
</body>
</html>
Nota: il nome ID fa distinzione tra maiuscole e minuscole!
Nota: il nome dell'ID deve contenere almeno un carattere, non può iniziare con un numero e non deve contenere spazi (spazi, tabulazioni, ecc.).
Differenza tra classe e ID
Un nome di classe può essere utilizzato da più elementi HTML, mentre un nome id deve essere utilizzato solo da un elemento HTML all'interno della pagina:
Esempio
<style>
/* Style the element with the id "myHeader"
*/
#myHeader {
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;
}
/* Style all
elements with the class name "city" */
.city
{
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My
Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Suggerimento: puoi imparare molto di più sui CSS nel nostro Tutorial CSS .
Segnalibri HTML con ID e collegamenti
I segnalibri HTML vengono utilizzati per consentire ai lettori di passare a parti specifiche di una pagina Web.
I segnalibri possono essere utili se la tua pagina è molto lunga.
Per utilizzare un segnalibro, devi prima crearlo e quindi aggiungervi un collegamento.
Quindi, quando si fa clic sul collegamento, la pagina scorrerà fino alla posizione con il segnalibro.
Esempio
Innanzitutto, crea un segnalibro con l' idattributo:
<h2 id="C4">Chapter 4</h2>
Quindi, aggiungi un collegamento al segnalibro ("Vai al capitolo 4"), dalla stessa pagina:
Esempio
<a href="#C4">Jump to Chapter 4</a>
Oppure aggiungi un link al segnalibro ("Vai al capitolo 4"), da un'altra pagina:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Utilizzo dell'attributo id in JavaScript
L' idattributo può essere utilizzato anche da JavaScript per eseguire alcune attività per quell'elemento specifico.
JavaScript può accedere a un elemento con un ID specifico con il getElementById()metodo:
Esempio
Usa l' idattributo per manipolare il testo con JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Suggerimento: studia JavaScript nel capitolo JavaScript HTML o nel nostro tutorial JavaScript .
Riassunto capitolo
- L'
idattributo viene utilizzato per specificare un ID univoco per un elemento HTML - Il valore
iddell'attributo deve essere univoco all'interno del documento HTML - L'
idattributo viene utilizzato da CSS e JavaScript per definire/selezionare un elemento specifico - Il valore
iddell'attributo fa distinzione tra maiuscole e minuscole - L'
idattributo viene utilizzato anche per creare segnalibri HTML - JavaScript può accedere a un elemento con un ID specifico con il
getElementById()metodo