Atrybuty HTML to dodatkowe informacje umieszczane wewnątrz tagów HTML. Pozwalają kontrolować zachowanie, wygląd i właściwości elementów — bez pisania choćby jednej linii CSS czy JavaScript. To między innymi dzięki atrybutom obraz wie, skąd ma pobrać plik, odnośnik zna adres docelowy, a pole formularza rozumie, jakiego rodzaju danych się spodziewać.
Poniższy słownik zbiera wszystkie atrybuty HTML w jednym miejscu. Każdy wpis wyjaśnia znaczenie atrybutu, pokazuje składnię i prezentuje praktyczne przykłady użycia.
Czym jest atrybut HTML?
Atrybut to para nazwa=”wartość” umieszczona wewnątrz tagu otwierającego. Przykładowo, w kodzie:
<a href="https://poznajprogramowanie.pl" target="_blank" rel="noopener">
Poznaj Programowanie
</a>href, target i rel to właśnie atrybuty — każdy dostarcza przeglądarce dodatkowej informacji o tym elemencie.
Atrybuty HTML dzielimy na kilka rodzajów:
- Atrybuty globalne — działają na każdym tagu HTML, np.
id,class,style,title,lang - Atrybuty specyficzne — przypisane do konkretnych tagów, np.
hrefdla<a>,srcdla<img> - Atrybuty boolowskie — sama obecność atrybutu oznacza wartość true, np.
disabled,checked,required - Atrybuty danych (
data-*) — własne atrybuty do przechowywania dowolnych danych, często używane z JavaScript - Atrybuty ARIA — poprawiają dostępność dla technologii asystujących, np.
aria-label,role
Lista atrybutów HTML
Wpisy są ułożone alfabetycznie. Kliknij dowolny atrybut, aby zobaczyć jego pełny opis z przykładami i listą tagów, z którymi może być stosowany.
- a
- abbr
- acronym
- address
- applet
- area
- article
- aside
- audio
- b
- base
- basefont
- bdi
- bdo
- big
- blockquote
- body
- br
- button
- canvas
- caption
- center
- cite
- code
- col
- colgroup
- data
- datalist
- dd
- del
- details
- dfn
- dialog
- dir
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- font
- footer
- form
- frame
- frameset
- h1-h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- label
- legend
- li
- link
- main
- map
- mark
- meta
- meter
- nav
- noframes
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strike
- strong
- style
- sub
- summary
- sup
- svg
- table
- tbody
- td
- template
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- tt
- u
- ul
- var
- video
- wbr
Atrybuty a dostępność i SEO
Prawidłowe używanie atrybutów HTML ma bezpośredni wpływ na dwa kluczowe aspekty każdej strony internetowej:
- Dostępność (accessibility) — atrybuty takie jak
alt,aria-labelczytabindexsprawiają, że strona jest użyteczna dla osób korzystających z czytników ekranu lub nawigacji klawiaturowej. - SEO — roboty wyszukiwarek analizują m.in. atrybuty
altobrazków,relodnośników czyhreflangprzy treściach wielojęzycznych. Ich poprawne ustawienie może realnie wpłynąć na widoczność strony w wynikach wyszukiwania.
Jeśli chcesz dowiedzieć się więcej o powiązaniach między atrybutami a tagami, zajrzyj do naszego słownika tagów HTML.