Atrybut „class” w HTML to uniwersalne narzędzie umożliwiające grupowanie elementów na stronie internetowej i przypisywanie im określonych właściwości. Służy do nadawania wybranym elementom unikalnych lub powtarzalnych nazw klas, które można następnie wykorzystywać w CSS oraz JavaScript do stylizacji i obsługi zachowań interaktywnych.
Podstawy działania atrybutu „class”
- Definicja – atrybut „class” pozwala przypisać elementowi (np.
<div>,<p>,<h1>, itd.) jedną lub kilka nazw klas; nazwy te są ustalane przez autora strony i mogą być dowolnymi ciągami znaków (jednak powinny zaczynać się od litery); - Możliwość wielokrotnego użycia – tę samą nazwę klasy można przypisać dowolnej liczbie elementów, co pozwala na stosowanie tych samych reguł CSS do wielu fragmentów strony jednocześnie;
- Wielokrotne klasy – można przypisać jednemu elementowi kilka klas, wpisując je rozdzielone spacjami, np.
class="czerwony pogrubiony".
Przykład składni –
<p class="ważny">To jest ważny akapit.</p>
<div class="pudlo czerwony">Przykładowy kontener.</div>
Zastosowanie atrybutu „class”
Stylowanie z wykorzystaniem CSS
Najczęstszym zastosowaniem klasy jest odwoływanie się do niej w arkuszu stylów za pomocą selektora z kropką przed nazwą:
.wazny { color: red; font-weight: bold; }
.pudlo { border: 2px solid black; padding: 10px; }
.czerwony { background-color: #ffdddd; }
Stosując powyższe reguły do wcześniejszego przykładu HTML, każdy element z klasą wazny będzie czerwony i pogrubiony, a element z pudlo i czerwony zyska ramkę, padding oraz czerwone tło.
Selekcja i manipulacja elementami w JavaScript
Atrybut „class” pozwala łatwo odszukiwać i manipulować grupami elementów za pomocą JavaScript:
// Zaznacz wszystkie elementy z klasą 'wazny' i zmień tekst
const wazneAkapity = document.getElementsByClassName('wazny');
for (let i = 0; i < wazneAkapity.length; i++) {
wazneAkapity[i].innerText = "Zmieniono tekst!";
}
Tworzenie układów i komponentów
Klas używa się szczególnie w nowoczesnych frameworkach frontendowych (np. Bootstrap), gdzie klasy odpowiadają za wygląd poszczególnych komponentów: przycisków, kart, siatek układu, modalnych okienek itp.
Przykład – przyciski stylizowane różnymi klasami –
<button class="btn btn-primary">Przycisk główny</button>
<button class="btn btn-secondary disabled">Przycisk nieaktywny</button>
Każda klasa (btn, btn-primary, btn-secondary, disabled) narzuca odmienne style.
Kombinacje klas dla złożonych efektów
Możliwy jest podział złożonych styli na osobne klasy i ich dowolna kombinacja:
<p class="tekst-wyrozniony pogrubiony kursywa">Wyróżniony tekst</p>
W CSS:
.tekst-wyrozniony { color: #0056b3; }
.pogrubiony { font-weight: bold; }
.kursywa { font-style: italic; }
Ta metoda zwiększa elastyczność i pozwala stosować DRY (Don’t Repeat Yourself) w projektach.
Dobre praktyki przy używaniu klas w HTML
- Stosuj czytelne i opisowe nazwy – ułatwia to utrzymanie i rozwój kodu;
- Unikaj nadmiarowej liczby klas – każda klasa powinna mieć praktyczne uzasadnienie;
- Nie duplikuj funkcji klasy i identyfikatora (id) – identyfikator jest unikalny dla jednego elementu na stronie, a klasa może być przypisana wielu;
- Wielokrotność klas pozwala na modularność styli oraz łatwe ich łączenie.
Podsumowanie
Atrybut „class” jest jednym z najczęściej używanych atrybutów w HTML. Umożliwia grupowanie elementów, stylizację i kontrolę zachowania wielu fragmentów strony naraz za pomocą CSS i JavaScript. To podstawowy mechanizm organizacji kodu w nowoczesnych stronach internetowych oraz podstawa dobrych praktyk front-endowych.
