HTML -zelfstudie

HTML HOME HTML-introductie HTML-editors HTML basis HTML-elementen HTML-kenmerken HTML-koppen HTML-alinea's HTML-stijlen HTML-opmaak HTML-citaten HTML-opmerkingen HTML-kleuren HTML-CSS HTML-links HTML-afbeeldingen HTML-favicon HTML-tabellen HTML-lijsten HTML-blok en inline HTML-klassen HTML-ID HTML-iframes HTML-JavaScript Paden voor HTML-bestanden HTML-kop HTML-indeling HTML-responsief HTML-computercode HTML-semantiek HTML-stijlgids HTML-entiteiten HTML-symbolen HTML-emoji's HTML-tekenset HTML-URL-codering HTML versus XHTML

HTML -formulieren

HTML-formulieren HTML-formulierkenmerken HTML-formulierelementen HTML-invoertypen HTML-invoerkenmerken Kenmerken HTML-invoerformulier

HTML -afbeeldingen

HTML-canvas HTML-SVG

HTML- media

HTML-media HTML-video HTML-audio HTML-plug-ins HTML-YouTube

HTML API's

HTML-geolocatie HTML slepen/neerzetten HTML-webopslag HTML-webwerkers HTML-SSE

HTML- voorbeelden

HTML-voorbeelden HTML-quiz HTML-oefeningen HTML-certificaat HTML-samenvatting HTML-toegankelijkheid

HTML- verwijzingen

HTML-taglijst HTML-kenmerken Algemene HTML-kenmerken Ondersteuning voor HTML-browser HTML-gebeurtenissen HTML-kleuren HTML-canvas HTML-audio/video HTML-documenttypen HTML-tekensets HTML-URL-codering HTML-taalcodes HTTP-berichten HTTP-methoden PX naar EM-omzetter Toetsenbord sneltoetsen

HTML -id-kenmerk


Het HTML- idattribuut 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 idattribuut specificeert een unieke id voor een HTML-element. De waarde van het id attribuut moet uniek zijn binnen het HTML-document.

Het idattribuut 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 idkenmerk:

<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 idattribuut 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 idattribuut 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 idattribuut 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

HTML-oefeningen

Test jezelf met oefeningen

Oefening:

Voeg het juiste HTML-kenmerk toe om het H1-element rood te maken.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1>Mijn startpagina</h1>

</body>
</html>