class w HTML to atrybut, który pozwala nadawać elementom strony nazwy (tzw. klasy) służące do ich grupowania, stylizowania za pomocą CSS oraz manipulowania ich zachowaniem poprzez JavaScript. Atrybut ten jest jednym z fundamentów nowoczesnego tworzenia stron internetowych.
Czym dokładnie jest atrybut class?
- Atrybut
class– umożliwia przypisanie jednemu lub wielu elementom dowolnej nazwy klasy; za pomocą tej nazwy elementy mogą zostać pogrupowane, co pozwala na łatwiejsze zarządzanie ich wyglądem i zachowaniem; - Ta sama klasa może być użyta na wielu różnych elementach – można więc w prosty sposób przypisać wspólne cechy wielu tagom w różnych miejscach strony;
- Jeden element może mieć przypisane kilka klas jednocześnie – wystarczy oddzielić nazwy klas pojedynczymi spacjami;
- Wartość atrybutu
classnie może zawierać spacji na początku ani końcu (spacje służą oddzielaniu wielu klas).
Typowe zastosowania atrybutu class
Stylizacja elementów za pomocą CSS
Pozwala przypisywać stylowanie wybranej grupie elementów. Przykład:
<head>
<style>
.important { color: green; font-weight: bold; }
.note { background-color: #fffae3; border-left: 4px solid orange; padding: 10px; }
</style>
</head>
<body>
<p class="important">To jest ważny akapit.</p>
<div class="note">To jest notatka na stronie.</div>
</body>
Grupowanie elementów do operacji JavaScript
Dzięki klasom można w prosty sposób wskazać, które elementy mają być zmieniane lub obsługiwane przez skrypt.
<ul>
<li class="item">Jabłko</li>
<li class="item">Gruszka</li>
<li class="item">Śliwka</li>
</ul>
<script>
// Zmiana koloru wszystkich elementów z klasą "item"
const items = document.querySelectorAll('.item');
items.forEach(el => el.style.color = 'red');
</script>
Tworzenie komponentów wielokrotnego użytku
Dzięki klasom można przygotować uniwersalne bloki, które bardzo łatwo ponownie wykorzystywać:
<div class="card">
<h2 class="card-title">Tytuł karty</h2>
<p class="card-content">Treść karty.</p>
</div>
W CSS można zdefiniować styl .card, .card-title, .card-content i używać takiej struktury wielokrotnie.
Selekcja elementów w testach automatycznych i narzędziach deweloperskich
Atrybut class pozwala selektywnie wybierać elementy podczas testowania działania strony czy nawigacji w konsoli deweloperskiej przeglądarki.
Definiowanie wielu klas jednocześnie
Można przypisać kilka klas jednemu elementowi, co pozwala na elastyczne łączenie stylów i zachowań:
<p class="important note">To jest ważna notatka.</p>
Tutaj element <p> zostanie objęty zarówno stylami .important, jak i .note.
Dobre praktyki nazewnictwa klas
- Używaj nazw opisujących przeznaczenie/rolę, np.
btn-primary,menu-item, a nie np.red-text(zamiast koloru, nazwij cel), - nie używaj polskich znaków, spacji, znaków specjalnych (oprócz
-i_jeśli to konieczne), - unikaj zbyt ogólnych lub zbyt szczegółowych nazw.
Przykład – kompletny fragment HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład użycia class</title>
<style>
.intro { color: blue; font-size: 20px; }
.highlight { background: yellow; }
</style>
</head>
<body>
<h1 class="intro">Witaj na stronie!</h1>
<p>To jest zwykły akapit.</p>
<p class="highlight">Ten akapit jest wyróżniony żółtym tłem.</p>
<p class="intro highlight">Ten akapit łączy styl nagłówka i wyróżnienia!</p>
</body>
</html>
Podsumowanie
Atrybut class w HTML jest niezbędny do efektywnego stylowania, organizowania i manipulowania zawartością strony. Odpowiednie korzystanie z klas to jeden z kluczowych elementów tworzenia czytelnych, estetycznych i łatwych w utrzymaniu stron internetowych.
