Atrybuty w HTML
Atrybuty w HTML to dodatkowe informacje przekazywane w znacznikach, które pozwalają modyfikować zachowanie, wygląd oraz funkcje elementów na stronie. Mają postać pary nazwa=”wartość” i zawsze umieszczane są w otwierającym znaczniku elementu, na przykład: <element atrybut="wartość">.
Czym są atrybuty HTML?
Atrybuty umożliwiają:
- przypisywanie unikalnych identyfikatorów i klas do elementów,
- stylizowanie bezpośrednio w znaczniku,
- określanie wartości domyślnych i ograniczeń w formularzach,
- dostarczanie dodatkowych informacji dla przeglądarek i użytkowników,
- sterowanie zachowaniem multimediów, linków, obrazów i innych elementów.
Podstawowe atrybuty HTML i ich zastosowania
- id
- przypisuje elementowi unikalny identyfikator,
- pomaga w selekcji elementu za pomocą CSS czy JavaScript.
<p id="moj-akapit">To jest akapit z identyfikatorem.</p>- class
- pozwala przypisać element do jednej lub wielu klas używanych w CSS oraz JavaScript.
<div class="ramka">Przykładowy div z klasą.</div>
<span class="ramka wyroznienie">Inny element z dwiema klasami.</span>
- style
- umożliwia bezpośrednie nadanie stylów CSS elementowi.
<h1 style="color: blue; font-size: 32px;">Niebieski nagłówek</h1>- title
- dostarcza podpowiedzi (dymku) wyświetlanej po najechaniu kursorem.
<abbr title="World Wide Web">WWW</abbr>- href
- wskazuje adres docelowy linku.
<a href="https://twojastrona.pl">Przejdź na stronę</a>- src
- określa lokalizację (adres) grafiki, multimediów, skryptów itp.
<img src="logo.png" alt="Logo firmy">- alt
- dostarcza tekst alternatywny dla obrazka, ważny dla dostępności.
<img src="baner.jpg" alt="Opis baneru">- lang
- określa język zawartości elementu.
<html lang="pl">- disabled (atrybut logiczny)
- wyłącza możliwość interakcji z danym elementem formularza.
<button disabled>Nieaktywny przycisk</button>- placeholder
- wyświetla podpowiedź w polu formularza, zanim użytkownik zacznie wpisywać dane.
<input type="text" placeholder="Wpisz imię">- required
- wymusza wypełnienie pola formularza przed wysłaniem.
<input type="email" required>- maxlength, min, max
- określają ograniczenia długości tekstu lub zakresy liczb.
<input type="text" maxlength="20">
<input type="number" min="1" max="10">
- meta – name, content
- osadzane w
<meta>w sekcji<head>, dostarczają informacji o stronie, np. opis, słowa kluczowe.
<meta name="description" content="Opis strony internetowej">
<meta name="keywords" content="html, poradnik, atrybuty">- data-* (tzw. atrybuty niestandardowe)
- pozwalają przechowywać własne, niestandardowe dane powiązane z elementem, używane np. przez JavaScript.
Wybrane atrybuty multimedialne i specjalistyczne
- autoplay, controls, loop – obsługują odtwarzanie multimediów, np. automatyczne odtwarzanie, pokazanie kontrolek, zapętlanie;
<video src="film.mp4" controls autoplay loop></video>- loading – pozwala opóźnić wczytywanie obrazów (
lazy);
<img src="fotografia.jpg" alt="Zdjęcie" loading="lazy">- method, action (w formularzach) – określają metodę przesyłania danych oraz adres, na który dane będą wysłane.
<form method="post" action="/zapisz"> ... </form>Najważniejsze zasady używania atrybutów
- Atrybuty zawsze zapisuj jako para nazwa=”wartość” (z wyjątkiem atrybutów logicznych jak disabled, checked, required – gdzie podanie samej nazwy wystarczy);
- Unikaj powtarzania identycznych wartości
idna jednej stronie; - Korzystaj ze znaczących klas i atrybutów niestandardowych tylko wtedy, gdy to konieczne.
Podsumowanie
Atrybuty HTML są jednym z najważniejszych narzędzi webdevelopera – pozwalają precyzyjnie kontrolować wygląd, zachowanie i funkcjonalność elementów HTML. Dzięki znajomości szerokiej gamy atrybutów, możliwe staje się tworzenie zarówno prostych, jak i zaawansowanych, dynamicznych stron internetowych.
