Atrybuty w HTML to specjalne właściwości, które pozwalają dodawać dodatkowe informacje do elementów HTML, kontrolować ich zachowanie, wygląd oraz interakcję z użytkownikiem. Są one integralną częścią składni HTML i umożliwiają rozwinięcie funkcjonalności podstawowych znaczników.
Czym są atrybuty html?
Każdy atrybut w HTML umieszczany jest wewnątrz znacznika otwierającego elementu w formie pary: nazwa=”wartość”. Atrybuty mogą wpływać na różne aspekty danego elementu: od wyglądu, przez sposób działania, aż po powiązania ze stylami CSS czy funkcjami JavaScript.
Schemat użycia atrybutu
<tagname atrybut="wartość">Treść elementu</tagname> Przykład:
<img src="logo.png" alt="Logo firmy"> Najczęściej stosowane atrybuty html
1. id
- Przypisuje unikalny identyfikator do danego elementu na stronie.
- Służy do jednoznacznego odwoływania się do elementu w stylach CSS lub w skryptach JavaScript.
<p id="wprowadzenie">To jest akapit z unikalnym id.</p> 2. class
- Pozwala przypisywać elementom jedną lub wiele klas, co umożliwia grupowanie oraz stylizowanie ich za pomocą CSS.
<p class="alert">To jest ważna informacja.</p> <p class="info tekst">Dodatkowe szczegóły.</p> 3. style
- Służy do bezpośredniego nadania stylu CSS danemu elementowi.
<h1 style="color: blue; font-size: 36px;">Witamy na stronie!</h1> 4. title
- Wyświetla dodatkowy tekst (dymek podpowiedzi) po najechaniu kursorem myszy na element.
<button title="Kliknij, aby wybrać opcję">Wybierz</button> 5. src
- Określa źródło pliku, na przykład obrazka, filmiku lub skryptu.
<img src="zdjecie.jpg" alt="Widok jeziora"> 6. alt
- Dostarcza alternatywny tekst wyświetlany, gdy nie można załadować obrazka (ważne dla dostępności stron).
<img src="avatar.png" alt="Zdjęcie profilowe użytkownika"> 7. href
- Służy do podania adresu, do którego ma prowadzić link.
<a href="https://twojadomena.pl">Odwiedź naszą stronę!</a> 8. value
- Ustala początkową lub obecną wartość dla elementów formularza (input, button, option) oraz niektórych innych.
<input type="text" value="Podaj swoje imię"> <button value="zapisz">Zapisz dane</button> 9. type
- Definiuje typ elementu, najczęściej używany w formularzach, np. .
<input type="email" placeholder="Adres e-mail"> 10. placeholder
- Wyświetla tekst jako podpowiedź wewnątrz pola formularza, gdy użytkownik nie wpisał jeszcze żadnych danych.
<input type="search" placeholder="Szukaj w serwisie"> Wybrane specjalne atrybuty i ich zastosowania
- lang – określa język zawartości elementu (np. dla lepszej interpretacji przez czytniki ekranu);
- disabled – blokuje możliwość edycji lub interakcji z elementem (bez wartości!);
- readonly – umożliwia tylko odczyt z elementu formularza;
- maxlength – ogranicza maksymalną ilość znaków w polu tekstowym;
- required – pole formularza staje się obowiązkowe do wypełnienia.
<html lang="pl"> <button disabled>Nieaktywny guzik</button> <input type="text" value="Nie można edytować" readonly> <input type="text" maxlength="12"> <input type="email" required> Kategorie atrybutów w html
- Atrybuty globalne – mogą być stosowane niemal do każdego elementu HTML (np. id, class, style, title);
- Atrybuty specjalistyczne – są dostępne tylko dla określonych znaczników (np. src dla
, href dla );
- Atrybuty logiczne – same pojawienie się atrybutu oznacza aktywowanie danej funkcji (np. disabled, checked).
Ważne uwagi praktyczne
- Nazwy atrybutów i wartości zazwyczaj zapisuje się małymi literami i w cudzysłowie,
- większość nowoczesnych przeglądarek wybacza niektóre nieścisłości, jednak dla zgodności ze standardami warto zawsze stosować poprawną składnię,
- dobór właściwych atrybutów pozwala uczynić stronę bardziej interaktywną, dostępną i lepiej sformatowaną.
Podsumowanie i przykładowy fragment kodu html wykorzystujący różne atrybuty
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Przykład zastosowania atrybutów w HTML</title> </head> <body> <h1 id="tytul-glowny" class="naglowek" style="color: navy;">Strona powitalna</h1> <img src="logo.png" alt="Logo firmy" title="Logo naszej firmy" width="150"> <p class="opis" lang="pl">Witaj na naszej nowej stronie internetowej!</p> <form> <label for="email">Adres e-mail:</label> <input type="email" id="email" name="email" placeholder="Wpisz swój e-mail" required maxlength="30"> <button type="submit" value="wyslij">Wyślij</button> </form> </body> </html> Ten kod demonstruje praktyczne wykorzystanie wielu atrybutów w różnych elementach HTML – od identyfikacji i stylizacji, przez dostępność, po kontrolę nad danymi użytkownika w formularzu. Dzięki świadomemu stosowaniu atrybutów można tworzyć nowoczesne, interaktywne i dostępne strony www.
