Dokumentacja HTML z przykładami: Atrybuty HTML

Q: Czym różni się class od id w HTML?

id musi być unikalne na stronie i identyfikuje jeden element, na potrzeby linków #fragment, i getElementById. class może mieć wiele elementów, a jeden element może mieć kilka klas oddzielonych spacjami. Do stylowania używaj klas.

Q: Jak dodać kilka klas do elementu HTML?

Wpisz je w jeden atrybut class, oddzielone spacjami: . Dwukrotne wpisanie class nie działa: przeglądarka zachowuje tylko pierwszy.

Q: Dlaczego mój przycisk nadal jest wyłączony z disabled="false"?

disabled to atrybut logiczny: sama jego obecność oznacza prawdę, niezależnie od wartości. Aby włączyć element, usuń atrybut albo ustaw w JavaScripcie button.disabled = false, co go usuwa.

Q: Czy mogę tworzyć własne atrybuty HTML?

Użyj przedrostka data-: data-price="12" czy data-user-id="7" są poprawne w każdym elemencie i można je odczytać w JavaScripcie przez element.dataset. Wymyślone nazwy bez przedrostka to niepoprawny HTML.

Czym są atrybuty HTML

Atrybut dodaje informację do elementu. Umieszcza się go w znaczniku otwierającym jako nazwę, znak równości i wartość w cudzysłowie: name="value". Element może mieć dowolnie wiele atrybutów, oddzielonych spacjami.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href mówi linkowi, dokąd prowadzi, src i alt opisują obrazek, a type, placeholder i required konfigurują pole. Każdy element ma własny zestaw atrybutów, a kilka z nich (atrybuty globalne opisane niżej) działa w każdym elemencie.

Zasady składni

<input type="text" name="city" value="Paris" disabled>

Nazwa, znak równości, wartość w cudzysłowie. Przyjęło się używać podwójnych cudzysłowów; pojedyncze też działają (title='Say "hi"' to sposób na umieszczenie podwójnego cudzysłowu w wartości).
Wielkość liter w nazwach nie ma znaczenia. CLASS i class to ten sam atrybut. W wartościach ma: class="Box" i class="box" to różne klasy.
Bez spacji cudzysłowy są opcjonalne, ale i tak ich używaj. class=big box daje elementowi klasę big i drugi, bezsensowny atrybut o nazwie box.
Kolejność nie ma znaczenia. <img alt="" src="a.png"> to to samo co <img src="a.png" alt="">.
Każda nazwa raz na element. Jeśli atrybut pojawi się dwa razy, przeglądarka zachowa pierwszy, a drugi po cichu odrzuci.

Atrybuty logiczne

Niektóre atrybuty są po prostu włączone albo wyłączone. W ich przypadku obecność oznacza prawdę, a wartość jest ignorowana. Tak działają disabled, checked, required, readonly, hidden, multiple, autofocus i open.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Trzeci przycisk jest wyłączony, choć wartość to false, bo przeglądarka sprawdza tylko, czy atrybut istnieje. Aby wyłączyć atrybut logiczny, usuń go. W JavaScripcie robi to dokładnie button.disabled = false.

Atrybut class

class nadaje elementowi jedną lub więcej nazw, po których CSS i JavaScript go znajdują. Kilka elementów może mieć tę samą klasę, a jeden element może mieć kilka klas, oddzielonych spacjami:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Każda kolejna klasa dokłada swoje reguły. W CSS klasę wybiera się kropką (.card); w JavaScripcie zmieniają je element.classList.add('featured') i classList.remove. Klasy to standardowy sposób stylowania: większość twojego CSS będzie celować w klasy.

Atrybut id

id nadaje elementowi nazwę, która musi być unikalna na stronie. Używaj go, gdy potrzebujesz dokładnie jednego elementu: celu linku, <label for> albo document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Kliknięcie etykiety przenosi fokus do pola, bo for="email" wskazuje na id="email". Link przewija stronę do #pricing, bo fragment w href pasuje do id.

	`class`	`id`
Ile elementów może go mieć	Dowolnie wiele	Jeden (unikalny)
Wartości na element	Kilka, oddzielonych spacjami	Jedna
Selektor CSS	`.name`	`#name`
Typowe użycie	Stylowanie grup elementów	Cele linków, etykiety, jeden konkretny element w JavaScripcie

Id nie może zawierać spacji. Zaczynaj je od litery, żeby łatwo było go używać w CSS: #2col bez escapowania nie jest poprawnym selektorem CSS.

Atrybuty globalne

Te atrybuty działają w każdym elemencie:

Atrybut	Do czego służy
`id`	Unikalna nazwa elementu
`class`	Lista nazw klas oddzielonych spacjami
`style`	CSS w linii, np. `style="color: red"`
`title`	Podpowiedź widoczna po najechaniu kursorem
`lang`	Język treści, np. `lang="fr"`
`dir`	Kierunek tekstu: `ltr`, `rtl` lub `auto`
`hidden`	Ukrywa element (logiczny)
`tabindex`	Pozwala ustawić fokus na elemencie klawiszem Tab albo ustala kolejność
`contenteditable`	Pozwala użytkownikowi edytować tekst elementu
`data-*`	Twoje własne dane, odczytywane w JavaScripcie

Atrybut lang ma własną stronę, bo wpływa na czytniki ekranu, tłumaczenie i wyszukiwarki.

Atrybuty data-*

Gdy chcesz zapisać w elemencie własną wartość, poprzedź nazwę przedrostkiem data-. Po przedrostku może stać dowolna nazwa, a JavaScript odczytuje wartości przez element.dataset, zamieniając myślniki na camelCase:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id staje się dataset.productId. Wartości zawsze wracają jako tekst, więc przed obliczeniami zamień je funkcją Number(). CSS też może je wybierać: [data-price="4.50"].

Częste błędy

Dwukrotne wpisanie class. <div class="a" class="b"> zachowuje tylko a. Umieść obie w jednym atrybucie: class="a b".
Powtórzone id. Dwa elementy z tym samym id psują linki typu #links, etykiety i getElementById, które zwraca tylko pierwszy. Do wszystkiego, co się powtarza, używaj klasy.
disabled="false" albo checked="false". Atrybut nadal istnieje, więc nadal jest włączony. Zamiast tego go usuń.
Wartości ze spacjami bez cudzysłowów. alt=My photo ustawia alt na My. Każdą wartość bierz w cudzysłów.
Wymyślanie atrybutów bez data-. <div price="4"> to niepoprawny HTML i może kolidować z przyszłym standardowym atrybutem. Użyj data-price.

Najczęściej zadawane pytania

Co to jest atrybut HTML?

Atrybut to dodatkowa informacja zapisana w znaczniku otwierającym jako name="value". Konfiguruje element: href określa, dokąd prowadzi link, src i alt opisują obrazek, a class i id pozwalają CSS i JavaScriptowi znaleźć element.

Czym różni się class od id w HTML?

id musi być unikalne na stronie i identyfikuje jeden element, na potrzeby linków #fragment, <label for> i getElementById. class może mieć wiele elementów, a jeden element może mieć kilka klas oddzielonych spacjami. Do stylowania używaj klas.

Jak dodać kilka klas do elementu HTML?

Wpisz je w jeden atrybut class, oddzielone spacjami: <div class="card featured dark">. Dwukrotne wpisanie class nie działa: przeglądarka zachowuje tylko pierwszy.

Czy atrybuty HTML wymagają cudzysłowów?

Cudzysłowy są opcjonalne, gdy wartość nie ma spacji ani znaków specjalnych, ale bezpieczniej jest zawsze ich używać. class=big box daje elementowi klasę big oraz osobny atrybut o nazwie box.

Dlaczego mój przycisk nadal jest wyłączony z disabled="false"?

disabled to atrybut logiczny: sama jego obecność oznacza prawdę, niezależnie od wartości. Aby włączyć element, usuń atrybut albo ustaw w JavaScripcie button.disabled = false, co go usuwa.

Czy mogę tworzyć własne atrybuty HTML?

Użyj przedrostka data-: data-price="12" czy data-user-id="7" są poprawne w każdym elemencie i można je odczytać w JavaScripcie przez element.dataset. Wymyślone nazwy bez przedrostka to niepoprawny HTML.

Powiązane zagadnienia