HTML -id-kenmerk
Het HTML- id
attribuut wordt gebruikt om een unieke id voor een HTML-element op te geven.
U kunt niet meer dan één element met dezelfde id in een HTML-document hebben.
Het id-kenmerk gebruiken
Het id
attribuut specificeert een unieke id voor een HTML-element. De waarde van het id
attribuut moet uniek zijn binnen het HTML-document.
Het id
attribuut wordt gebruikt om naar een specifieke stijlverklaring in een stijlblad te verwijzen. Het wordt ook door JavaScript gebruikt om het element met de specifieke id te openen en te manipuleren.
De syntaxis voor id is: schrijf een hekje (#), gevolgd door een id-naam. Definieer vervolgens de CSS-eigenschappen binnen accolades {}.
In het volgende voorbeeld hebben we een <h1>
element dat verwijst naar de id-naam "myHeader". Dit <h1>
element wordt gestyled volgens de #myHeader
stijldefinitie in de head-sectie:
Voorbeeld
<!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>
Opmerking: de id-naam is hoofdlettergevoelig!
Opmerking: de id-naam moet ten minste één teken bevatten, mag niet beginnen met een cijfer en mag geen spaties (spaties, tabs, enz.) bevatten.
Verschil tussen klasse en ID
Een klassenaam kan door meerdere HTML-elementen worden gebruikt, terwijl een id-naam slechts door één HTML-element binnen de pagina mag worden gebruikt:
Voorbeeld
<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>
Tip: je kunt veel meer leren over CSS in onze CSS-zelfstudie .
HTML-bladwijzers met ID en links
HTML-bladwijzers worden gebruikt om lezers in staat te stellen naar specifieke delen van een webpagina te springen.
Bladwijzers kunnen handig zijn als uw pagina erg lang is.
Als u een bladwijzer wilt gebruiken, moet u deze eerst maken en er vervolgens een koppeling aan toevoegen.
Wanneer vervolgens op de link wordt geklikt, zal de pagina naar de locatie met de bladwijzer scrollen.
Voorbeeld
Maak eerst een bladwijzer met het id
kenmerk:
<h2 id="C4">Chapter 4</h2>
Voeg vervolgens een link naar de bladwijzer toe ('Ga naar hoofdstuk 4'), vanaf dezelfde pagina:
Voorbeeld
<a href="#C4">Jump to Chapter 4</a>
Of voeg een link naar de bladwijzer toe ('Ga naar hoofdstuk 4'), vanaf een andere pagina:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
Het id-kenmerk gebruiken in JavaScript
Het id
attribuut kan ook door JavaScript worden gebruikt om bepaalde taken voor dat specifieke element uit te voeren.
JavaScript heeft toegang tot een element met een specifieke id met de getElementById()
methode:
Voorbeeld
Gebruik het id
attribuut om tekst te manipuleren met JavaScript:
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Tip: bestudeer JavaScript in het HTML JavaScript- hoofdstuk of in onze JavaScript-tutorial .
Hoofdstuk samenvatting
- Het
id
attribuut wordt gebruikt om een unieke id voor een HTML-element op te geven - De waarde van het
id
attribuut moet uniek zijn binnen het HTML-document - Het
id
attribuut wordt gebruikt door CSS en JavaScript om een specifiek element te stylen/selecteren - De waarde van het
id
attribuut is hoofdlettergevoelig - Het
id
attribuut wordt ook gebruikt om HTML-bladwijzers te maken - JavaScript heeft toegang tot een element met een specifieke id met de
getElementById()
methode