#1 K čemu slouží
Atributy id a class slouží k odlišení či naopak seskupování HTML prvků pro jejich stylizaci, ale také pro propojení s JavaScriptem.
Rozdíl mezi id a class je, že id, nebo-li identifikátor, slouží výhradně pro jeden prvek a má být jedinečný. Na druhou stranu class, nebo-li třída, je určena pro používání na vícero prvcích – stejné odstavce textu, které se avšak odlišují od klasických například větším odsazením a podobně.
#2 Atribut id
Atribut id slouží k deklaraci jedinečné identifikace prvku. Z popisu již vypovídá, že správně by se mělo aplikovat id pouze na jeden prvek. Použít se dá k jedinečné stylizaci pomocí CSS, k identifikaci prvku v skriptech, ale také k odkazování vně dokumentu.
I když je id atribut, je spojen se znakem #. Pomocí znaku # je prvek identifikován v CSS a slouží jako součást odkazu na sekce.
Vnitřní odkazy
Vně stránky lze odkazovat na jednotlivé sekce tím, že se sekci přiřadí unikátní id a od atributu href se napíše href="#nazevSekce". Například takto:
<a href="#uvod">Odkaz na sekci Úvod</a>
<a href="#onas">Odkaz na sekci O nás</a>
<section id="uvod">
<h2>Úvod</h2>
<p>Odstavec textu na úvod.</p>
</section>
<section id="onas">
<h2>O nás</h2>
<p>Odstavec textu o nás, o naší práci</p>
</section>
CSS
V CSS se pro stylování id používá již zmíněný znak #. V CSS se následně napíše #jmeno, kde jmeno je název atributu id v HTML. Například takto:
<h2>Napis druhé úrovně</h2>
<p>Odstavec textu</p>
<h2 id="barevny">Barevný nadpis</h2>
<p>Odstavec textu</p>
#barevny {
color: green;
}
JavaScript
Pro manipulaci s prvkem či jeho modifikaci je potřeba prvek nejprve získat z HTML dokumentu. To se provádí často pomocí funkce getElementById(). Více v JavaScript tutoriálu.
const barevny = document.getElementById('barevny');
#3 Atribut class
Atribut třídy class může (mělo by) sdílet vícero prvků na stránce. Nejčastěji je atribut používán pro stylování, avšak podobně jako u id, jej lze použít pro výběr daných prvků v JavaScriptu. Značka pro class je . (tečka).
Na rozdíl od atributu id nelze pomocí class odkazovat vně dokumentu, ale mají jinou vlastnost – každý prvek může mít několik tříd v atributu class.
CSS
V následujícím kódu se nacházejí dva prvky <div>, které mají totožnou třídu, a jeden má třídu navíc. Na oba prvky bude aplikována třída clanek a na první i třída velke, obě specifikované v CSS souboru.
<div class="clanek velke">
<h2>Nadpis v článku</h2>
<p>Odstavec textu</p>
</div>
<div class="clanek">
<p>Odstavec textu</p>
<p>Další odstavec textu</p>
</div>
.clanek {
background-color: blue;
color: white;
}
.velke {
font-size: 120%;
}
O atributu class a id v CSS se dočtete také v našem CSS tutoriálu.
JavaScript
Podobně jako u id, lze také pomocí atributu class vybírat prvky pro manipulaci v skriptu.
const clanky = document.getElementsByClassName('clanek');