Atrybuty HTML

Co to są atrybuty? ⚡

Atrybuty to dodatkowe informacje, które możesz dodać do znacznika HTML.

Określają właściwości elementu (np. źródło obrazka, link, identyfikator, styl)
Zawsze zapisujemy je w otwierającym tagu
Mają postać: nazwa="wartość"

Przykład:

Przykład

<img src="pies.jpg" alt="Piesek" width="200" height="150" title="Obrazek psa">

src – skąd pobrać obrazek
alt – tekst alternatywny (dla osób niewidomych i gdy obrazek się nie załaduje)
width – szerokość obrazka
height – wysokość obrazka
title – podpowiedź po najechaniu myszką

Praktyczne przykłady

Przykład

<a href="mailto:ola@example.com" title="Napisz do mnie">Wyślij maila</a>
<input type="text" placeholder="Wpisz imię" required>
<img src="kot.jpg" alt="Kot" width="120" height="80">

FAQ

Czy muszę zawsze podawać atrybut alt w <img>? Tak, to ważne dla dostępności i SEO.

Czy mogę dodać własny atrybut? Tak, użyj data-* (np. data-id=“123”).

Czy atrybuty muszą być w cudzysłowie? Tak, to najlepsza praktyka.

Czy mogę mieć kilka klas w class? Tak, oddziel je spacją: class=“btn primary”.

Najczęstsze atrybuty

id – unikalny identyfikator
class – klasa CSS
href – adres linku
src – źródło obrazka/skryptu
alt – tekst alternatywny
title – podpowiedź po najechaniu myszką
style – stylowanie elementu bezpośrednio w HTML
data-* – własne atrybuty do przechowywania danych

Przykład z atrybutami:

Przykład

<a href="https://example.com" target="_blank" rel="noopener noreferrer" title="Otwórz w nowej karcie">Kliknij mnie!</a>

target="_blank" – otwiera link w nowej karcie
rel="noopener noreferrer" – bezpieczeństwo

Atrybuty globalne

Atrybuty globalne mogą być użyte w prawie każdym znaczniku HTML:

id, class, style, title, tabindex, hidden, data-*

Przykład:

Przykład

<p id="opis" class="lead" style="color: purple;">To jest ważny tekst.</p>

Atrybuty niestandardowe (data-*)

Atrybuty zaczynające się od data- pozwalają przechowywać własne dane w HTML, np.:

Przykład

<div data-user-id="123" data-role="admin">Użytkownik</div>

Dobre praktyki

Używaj opisowych wartości (np. alt)
Nie powtarzaj tych samych id na stronie
Stosuj atrybuty tylko tam, gdzie są potrzebne
Sprawdzaj poprawność atrybutów w walidatorze HTML
Unikaj nadmiaru atrybutów w jednym znaczniku