Atrybut class w HTML to kluczowe narzędzie pozwalające przypisywać elementom strony unikalne lub wspólne nazwy klas, dzięki czemu możliwe jest ich stylowanie, odnajdywanie oraz manipulacja zarówno przez CSS, jak i JavaScript.
Czym jest atrybut class?
Atrybut class umożliwia nadanie jednemu lub wielu elementom HTML wspólnego identyfikatora klasy. Pozwala to przypisać im wspólne cechy wizualne za pomocą arkuszy styli (CSS), a także odwoływać się do nich w skryptach (np. JavaScript) w celu dynamicznej zmiany zawartości lub wyglądu.
- Atrybut ten można zastosować do każdego znacznika HTML – tekstu, nagłówków, obrazków, sekcji itd.;
- Jeden element może mieć więcej niż jedną klasę; nazwy klas oddzielamy wtedy spacją;
- Klasy służą zarówno do prezentacji (np. kolorowanie, rozmiar, marginesy), jak i do strukturalnego grupowania elementów na stronie.
Podstawowa składnia
<tag class="nazwa-klasy">Treść elementu</tag>
Przykład pojedynczej klasy
<p class="cytat">To jest wyróżniony cytat.</p>
Przykład wielu klas
<p class="cytat duzy-tekst wyjustuj">Kombinacja kilku klas dla jednego paragrafu.</p>
Typowe zastosowania atrybutu class
- Stylowanie elementów przez CSS – dzięki klasom możesz w prosty sposób ustawić wygląd dla wielu elementów jednocześnie, zamiast konfigurować każdy z osobna;
- Manipulacja przez JavaScript – klasy są wykorzystywane do odnajdywania i zmiany określonych elementów w kodzie JS;
- Kategoryzowanie i strukturyzacja kodu – klasy pozwalają logicznie grupować i wyróżniać sekcje strony.
Praktyczne przykłady
Stylowanie nagłówków i akapitów
<html>
<head>
<style>
h1.intro { color: blue; }
p.wazne { color: green; font-weight: bold; }
</style>
</head>
<body>
<h1 class="intro">Wprowadzenie</h1>
<p>Akapit zwykły.</p>
<p class="wazne">To jest ważny akapit.</p>
</body>
</html>
W powyższym przykładzie nagłówek z klasą intro będzie niebieski, a akapit z klasą wazne zielony i pogrubiony.
Przypisywanie wielu klas
<div class="box promowany szary"> Ten DIV ma trzy klasy, co umożliwia łączenie różnych styli. </div>
.promowany { border: 2px solid gold; }
.szary { background-color: #eee; }
.box { padding: 1em; }
Możesz dowolnie łączyć klasy na elemencie, co pozwala tworzyć elastyczne i skalowalne style.
Selekcja elementów przez JavaScript
<button class="przycisk-przeslij">Wyślij</button>
<script>
document.querySelector('.przycisk-przeslij').addEventListener('click', function() {
alert('Dane zostały wysłane!');
});
</script>
Skrypt łatwo odnajduje i przypisuje funkcję do przycisku, korzystając z klasy.
Responsywność i modyfikacje w zależności od stanu
<nav>
<ul>
<li class="menu-btn aktywny">Strona główna</li>
<li class="menu-btn">O nas</li>
</ul>
</nav>
Klasa aktywny pozwala wyróżniać aktualnie wybraną pozycję menu.
Dobre praktyki (najważniejsze wskazówki)
- Nazwy klas powinny być opisowe i czytelne (np.
wazne,podkreslony-tekst,panel-boczny); - Nie należy zaczynać nazw klas od cyfr;
- Jeden element może mieć dowolną liczbę klas, oddzielonych spacjami;
- Unikaj dublowania nazw klas z identyfikatorami (
id) – klasy służą do powtarzalnych stylów,iddo jednorazowych identyfikatorów.
Podsumowanie kluczowych zalet
- Łatwa kontrola wyglądu grupy elementów bez potrzeby powielania kodu;
- Szybka modyfikacja – zmiana wyglądu klasy natychmiast aktualizuje wszystkie powiązane elementy;
- Prosta współpraca z JavaScript – dynamiczna zmiana klas w reakcji na interakcje użytkownika.
Zastosowanie atrybutu class czyni kod HTML bardziej przejrzystym, uniwersalnym i elastycznym, ułatwiając zarówno projektowanie stylów, jak i dynamiczne zmiany zawartości oraz wyglądu strony.
