12. Atrybuty globalne – class, id, data-*

~12 min podstawowy

Atrybuty, które możesz dodać do prawie każdego elementu HTML.

id – unikalny identyfikator

<section id="kontakt">...</section>
<a href="#kontakt">Przejdź do kontaktu</a>

class – grupy elementów (najczęściej używany)

<div class="card bg-light p-3 mb-4">...</div>
<p class="text-primary lead">...</p>

data-* – własne atrybuty (dla JS / CSS)

<button data-product-id="123" data-price="49.99">Dodaj do koszyka</button>

<!-- Przykład JS -->
<script>
  document.querySelector('button').addEventListener('click', e => {
    console.log(e.target.dataset.productId); // "123"
  });
</script>

Najważniejsze reguły:
• id – unikalny na stronę
• class – wielokrotne użycie
• data-* – camelCase w JS (data-user-name → dataset.userName)

Zadanie

Dodaj do istniejącej strony:

id="glowny" do głównej sekcji
class="alert alert-success" do ważnego komunikatu
dwa atrybuty data-* do dowolnego przycisku
link wewnętrzny #glowny