Według W3C, atrybut ID w HTML to unikalny identyfikator elementu. Umożliwia identyfikację obszaru strony internetowej dla stylów CSS, linków kotwiczących i celów dla skryptów.
Do czego służy atrybut ID?
Atrybut ID wykonuje kilka akcji dla stron internetowych:
- Selektor arkuszy stylów: Jest to funkcja, do której większość ludzi używa atrybutu ID. Ponieważ są one unikalne, stylizujesz tylko jeden element na swojej stronie internetowej, używając właściwości ID. Minusem używania identyfikatora do stylizacji jest to, że ma bardzo wysoki poziom szczegółowości, co może sprawić, że będzie to bardzo trudne, jeśli z jakiegoś powodu będziesz musiał zmienić styl później w a arkusz stylów. Z tego powodu obecne praktyki internetowe skłaniają się ku używaniu klas i selektorów klas zamiast identyfikatorów i selektorów identyfikatorów do ogólnych celów związanych ze stylizacją.
- Nazwane kotwice do łączenia z: Przeglądarki internetowe kierować na dokładne lokalizacje w dokumentach internetowych, wskazując identyfikator na końcu adresu URL. Dodaj identyfikator na końcu adresu URL strony, poprzedzony znakiem hash. Link do tych kotwic z samą stroną, dodając tag hash i nazwę identyfikatora w href atrybut elementu. Na przykład dla dywizji o ID kontakt, link do niego na tej stronie z #kontakt.
- Odniesienie do skryptów: Jeśli piszesz jakiekolwiek funkcje JavaScript, użyj atrybutu ID, aby móc wprowadzać zmiany w konkretnym elemencie na stronie za pomocą swoich skryptów.
- Inne przetwarzanie: Identyfikator obsługuje przetwarzanie w dokumentach internetowych w dowolny sposób. Na przykład możesz wyodrębnić kod HTML do bazy danych i użyć atrybutu ID do identyfikacji pól.
Zasady używania atrybutu ID
Upewnij się, że atrybuty identyfikatora są zgodne z tymi trzema standardami:
- Identyfikator musi zaczynać się od litery (a-z lub A-Z).
- Wszystkie kolejne znaki mogą być literami, cyframi (0-9), myślnikami (-), podkreśleniami (_), dwukropkami (:) i kropkami (.).
- Każdy identyfikator musi być unikalny w dokumencie.
Korzystanie z atrybutu ID
Po zidentyfikowaniu unikalnego elementu swojej witryny użyj arkusze stylów stylizować tylko ten jeden element.
Na przykład, aby zidentyfikować identyfikator zatytułowany kontakt, użyj jednej z tych form:
div#kontakt { tło: #0cf;}
#kontakt { tło: #0cf;}
Pierwsza próbka dotyczy oddziału z atrybutem ID równym kontakt. Drugi nadal jest skierowany do elementu o identyfikatorze kontakt, to po prostu nie określałoby, że jest to dywizja. Efekt końcowy stylizacji byłby dokładnie taki sam.
Możesz także połączyć się z tym konkretnym elementem bez dodawania żadnych tagów.
Odwołaj się do tego akapitu w swoich skryptach za pomocą getElementById Metoda JavaScript:
document.getElementById("sekcja-kontaktu")
Atrybuty ID są nadal bardzo przydatne w HTML, chociaż selektory klas zastąpiły je w większości ogólnych celów stylizacyjnych. Używanie atrybutu ID jako zaczepu na style, a także jako kotwicy dla linków lub celów dla skryptów, oznacza, że nadal zajmują one ważne miejsce w dzisiejszym projektowaniu stron internetowych.