Autor: Codenga 05.01.2024

Atrybuty HTML pozwalają nam dodać do elementów strony dodatkowe właściwości. W tym artykule opowiemy o ważnej koncepcji atrybutów globalnych - czyli takich, które są uniwersalne i mogą być dodawane do niemal każdego elementu HTML. Zakładamy, że masz podstawową wiedzę na temat języka HTML bo jest ona niezbędna do zrozumienia artykułu.

Dwie główne grupy atrybutów

W języku HTML mamy dwie ogólne grupy atrybutów

• Atrybuty specyficzne dla elementu np. alt dla obrazów.
• Atrybuty globalne np. id albo class.

Zdarzają się wyjątki: na przykład atrybut src, który spotykamy w obrazach, wideo czy audio. Na razie jednak skupimy się na atrybutach globalnych, które można dodać do każdego elementu HTML.

Zdobądź umiejętności niezbędne do pracy jako Web Developer.

Dowiedz się więcej

Przykłady atrybutów globalnych

Takich atrybutów globalnych jest sporo. Popatrz na kilka przykładów.

  <div class="box"></div>

Atrybut class określa klasę elementu. W praktyce użyjemy takiej klasy po to, aby ostylować element za pomocą stylów CSS albo żeby odwołać się do elementu za pomocą skryptu JavaScript.

<div id="my-box"></div>

Atrybut id określa unikalny identyfikator elementu. Używamy go na przykład po to, aby do elementu można było się odwołać za pomocą skryptu JavaScript. Czasami też id używane są przez style CSS.

<p lang="pl">To jest akapit w języku polskim</p>

Atrybut lang określa język elementu. Przydaje się jeśli mamy zawartość w różnych językach.

<div title="tytuł elementu">Zawartość elementu</div>

Atrybut title określa tytuł elementu. W praktyce, w niektórych przeglądarkach ten tytuł wyświetli się po najechaniu kursorem na element.

Podsumowanie

To są tylko wybrane przykłady atrybutów globalnych. W HTML jest ich więcej jednak na początek trzeba poznać przynajmniej kilka. Najważniejsze jest zrozumienie samej koncepcji atrybutu globalnego - czyli takiego, który nie jest specyficzny dla konkretnego elementu HTML.