Atrybuty HTML to specjalne właściwości, które przypisujemy do elementów HTML w celu nadania im dodatkowych informacji, zmiany ich zachowania lub wyglądu. Dzięki atrybutom możliwe jest m.in. unikalne identyfikowanie elementów, stosowanie styli, kontrolowanie zachowania linków, obrazów czy interakcji użytkownika.
Czym są atrybuty HTML?
Atrybuty HTML są umieszczane zawsze w znaczniku otwierającym elementu, przyjmując postać pary: nazwa=”wartość”. Przykładowo:
<p id="opis" class="tekst-duzy">Przykładowy akapit z atrybutami.</p>
W powyższym przykładzie:
id="opis"– atrybutididentyfikuje element,class="tekst-duzy"– atrybutclassprzypisuje klasę, którą możemy wykorzystać w CSS.
Główne zasady stosowania atrybutów
- Każdy element HTML – może posiadać dowolną liczbę atrybutów;
- Wartość atrybutu – umieszczamy w cudzysłowie (podwójnym lub pojedynczym);
- Atrybuty są opcjonalne – dodajemy je tylko, gdy potrzebujemy określonych funkcji;
- Niektóre atrybuty są logiczne (boolean), np.
checkedw polach wyboru – ich sama obecność wystarczy do aktywowania.
Podstawowe przykłady praktycznego użycia atrybutów
Identyfikacja i grupowanie elementów
- id – unikalny identyfikator na stronie:
<div id="naglowek">Nagłówek</div>
- class – określa jedną lub kilka klas CSS:
<span class="podkreslenie wyroznienie">Ważny tekst</span>
Stylowanie elementów
- style – pozwala dodać style CSS bezpośrednio w znaczniku:
<p style="color: blue; font-weight: bold;">Tekst niebieski i pogrubiony</p>
Linki i obrazy
- href – stosowany w linkach (
<a>) określa adres docelowy:
<a href="https://przyklad.pl">Kliknij tutaj</a>
- src i alt – wykorzystywane do osadzania obrazów:
<img src="logo.png" alt="Logo firmy" width="120" height="60">
src– źródło pliku graficznego,alt– tekst alternatywny, wyświetlany w razie problemu z obrazkiem oraz czytany przez czytniki ekranu.
Formularze i interakcje
- type, placeholder, required – popularne atrybuty na polach formularzy:
<input type="email" placeholder="Twój email" required>
Atrybuty dostępne globalnie
Niektóre atrybuty mogą być używane w większości elementów HTML:
- title – wyświetla podpowiedź po najechaniu:
<button title="Kliknij, aby zapisać">Zapisz</button>
- data-* – pozwala na przechowywanie własnych danych w elemencie (do obsługi np. przez JavaScript):
<div data-user-id="42"></div>
Obsługa zdarzeń
Atrybuty obsługujące zdarzenia przyjmują kod JavaScript jako wartość:
<button onclick="alert('Cześć!')">Pokaż komunikat</button>
Typy atrybutów HTML
- Atrybuty treści – podstawowe atrybuty dostępne w HTML (np.
id,class,title), - Atrybuty zdarzeń – uruchamiają skrypt przy określonej akcji użytkownika (
onclick,onchange), - Atrybuty logiczne – tzw. boolean (np.
checked,disabled), ich obecność wystarczy, aby zadziałały.
Najczęściej stosowane atrybuty HTML wraz z funkcjami
| Atrybut | Przeznaczenie | Przykład użycia |
|---|---|---|
| id | Unikalna identyfikacja | <section id="start"></section> |
| class | Grupowanie; stylowanie | <div class="box czerwony"></div> |
| style | Bezpośrednie style CSS | <h1 style="color:red"></h1> |
| href | Adres linku | <a href="adres.html">Przejdź</a> |
| src | Źródło obrazu lub multimediów | <img src="foto.jpg"> |
| alt | Tekst alternatywny obrazu | <img src="grafika.png" alt="Opis grafiki"> |
| title | Opis po najechaniu | <input title="Wprowadź dane"> |
| value | Wartość pola formularza | <input value="Domyślna Wartość"> |
| disabled | Wyłączenie elementu | <button disabled>Nieaktywny</button> |
| required | Pole wymagane w formularzu | <input required> |
| placeholder | Tekst pomocniczy w polu formularza | <input placeholder="Wpisz login"> |
| data-* | Własne dane do wykorzystania | <li data-id="5"></li> |
Podsumowanie
Atrybuty HTML to fundamentalna część języka HTML umożliwiająca dostosowanie, identyfikację i kontrolowanie działania niemal każdego elementu na stronie. Pozwalają nie tylko na personalizację wyglądu, ale też tworzenie interaktywnych, dostępnych i nowoczesnych aplikacji internetowych. Implementując atrybuty zgodnie ze specyfikacją, twoje strony będą bardziej funkcjonalne i przyjazne użytkownikom oraz programistom.
