Vastavalt W3C, ID atribuut HTML on elemendi kordumatu tunnus. See annab võimaluse tuvastada CSS-i stiilide, ankru linkide ja skriptide veebilehtede ala.
Milleks kasutatakse ID-atribuuti?
Atribuut ID teeb veebilehtede jaoks mitu toimingut:
- Stiililehe valija: See on funktsioon, mille jaoks enamik inimesi kasutab atribuuti ID. Kuna need on ainulaadsed, saate ID-atribuudi kasutamisel stiilides kujundada oma veebisaidil ainult ühe üksuse. ID-stiili kujundamisel on negatiivne külg see, et sellel on väga kõrge spetsiifilisus, mis võib muuta selle väga väljakutsuvaks, kui peate stiili mingil põhjusel hiljem a stiilileht. Seetõttu kalduvad praegused veebipraktikad kasutama klasside ja klasside valijaid ID-de ja ID-valijate asemel üldiseks stiiliks.
- Nimega ankrud ühendamiseks: Veebibrauserid sihtige oma veebidokumentides täpseid asukohti, osutades URL-i lõpus olevale ID-le. Lisage ID lehe URL-i lõppu, millele eelneb räsimärk. Linkige need ankrud lehe enda külge, lisades räsimärgendi ja ID-nime href elemendi atribuut. Näiteks jaotusega ID-ga kontakt, linkige see sellel lehel teenusega #kontakt.
- Viide skriptidele: Kui kirjutate mõnda Javascripti funktsiooni, kasutage atribuuti ID, et saaksite lehe täpset elementi skriptidega muuta.
- Muu töötlemine: ID toetab teie veebidokumentide töötlemist igal vajalikul viisil. Näiteks võite HTML-i andmebaasi tõmmata ja kasutada väljade tuvastamiseks atribuuti ID.
ID-atribuudi kasutamise reeglid
Veenduge, et teie ID atribuudid vastavad nendele kolmele standardile:
- ID peab algama tähega (a-z või A-Z).
- Kõik järgnevad tähemärgid võivad olla tähed, numbrid (0–9), sidekriipsud (-), alakriipsud (_), koolonid (:) ja punktid (.).
- Iga ID peab dokumendis olema kordumatu.
ID-atribuudi kasutamine
Kui olete oma veebisaidi ainulaadse elemendi tuvastanud, kasutage stiililehed kujundada just see üks element.
Näiteks identifitseerida ID pealkirjaga kontakt, kasutage ühte järgmistest vormidest:
div # kontakt {taust: # 0cf;}
#contact {background: # 0cf;}
Esimene valim sihib jaotust, mille ID atribuut on kontakt. Teine sihib ikkagi ID-ga elementi kontakt, see lihtsalt ei näeks ette, et see on jaotus. Stiili lõpptulemus oleks täpselt sama.
Selle konkreetse elemendiga saate linkida ka silte lisamata.
Viidake sellele skriptile lõikele käsuga getElementById JavaScripti meetod:
document.getElementById ("kontakt-jaotis")
ID-atribuudid on HTML-is siiski väga kasulikud, kuigi klassi valijad on need enamikul stiilieesmärkidel asendanud. Atribuudi ID kasutamine stiilide konksuna, samal ajal kui kasutatakse neid ka skriptide linkide või sihtmärkidena, tähendab see, et neil on veebikujunduses endiselt oluline koht.