Az id attribútum használata HTML-ben

Az id attribútum lehetővé teszi, hogy egyedi azonosítót adjunk egy HTML elemnek. Ez kulcsfontosságú a CSS-ben való stílusozáshoz, JavaScript manipulációhoz, vagy az oldalon belüli navigációhoz.

Mi az az id attribútum?

Az id egyedi azonosító, amelyet egy elemhez rendelünk. Egy oldalon belül egy id csak egyszer szerepelhet. Ez az attribútum általában rövid, beszédes név.

<h2 id="section1">Introduction</h2>

Az egyediség fontossága

Az id attribútum csak egyszer szerepelhet egy dokumentumban. Ez különbözteti meg a class attribútumtól, amely többször is használható. Ha két elemnek ugyanaz az id-je, az hibákhoz vezethet CSS-ben vagy JavaScriptben.

id használata CSS-ben

CSS-ben az id attribútumot a # jellel jelöljük. Segítségével egy adott elemhez rendelhetünk stílusokat, például színeket, méreteket vagy elrendezéseket.

#main-title {
  color: blue;
  font-size: 24px;
}

<h1 id="main-title">Welcome to the site</h1>

id használata JavaScriptben

JavaScript segítségével egyszerűen elérhetünk egy elemet az id-jén keresztül a getElementById metódussal. Ez lehetővé teszi a tartalom vagy a stílus dinamikus módosítását.

document.getElementById("main-title").innerText = "Hello!";

id az oldalon belüli navigációban

Ha egy hivatkozásban egy id-re mutató linket adunk meg, a böngésző automatikusan a megfelelő elemhez ugrik. Ez nagyon hasznos hosszabb oldalak esetén, például GYIK vagy tartalomjegyzék esetén.

<a href="#contact">Go to contact section</a>

...

<h2 id="contact">Contact Us</h2>

Id elnevezési szabályok

Id elnevezésekor kerüljük a szóközöket és különleges karaktereket. Használjunk kisbetűket, kötőjeleket vagy camelCase formátumot, pl. main-title vagy contactSection.