Atrybuty HTML — co to jest i do czego je stosować?

front end

minuta czytania

Tomasz Kozon

4 maj 2022

html5

Atrybuty HTML są to dodatkowe informacje, które określają właściwości elementów strony internetowej. Służą one do określenia zachowania, czy działania elementów na stronie

Spis treści

Znaczniki i atrybuty HTML

Najczęściej wykorzystywane atrybuty HTML

HTML

HTML to podstawowy język kodowania, który buduję każdą witrynę i aplikację webową. Nie jest on typowym językiem programowania, ponieważ nie obsługuje zdarzeń, nie manipuluje danymi, nie wykonuje instrukcji warunkowych czy nie można w nim pisać funkcji. Jego główną i niezwykle ważną rolą jest opisywanie struktury strony – wykorzystując odpowiednie znaczniki i atrybuty HTML nadaje poszczególnym elementom kodu znaczenie semantyczne.

 

Znaczniki i atrybuty HTML

HTML (HyperText Markup Language) to hipertekstowy język znaczników (tagów), który umożliwia zbudowanie struktury strony i jej zawartości oraz przełączanie się między poszczególnymi podstronami witryny. To za jego pomocą oznacza się sekcję <head> odpowiedzialną za najważniejsze informacje istotne dla przeglądarki internatowej oraz sekcję <body>, która zawiera wszystko to, co widzi użytkownik. Za sprawą HTML można zdecydować jaki element na stronie będzie nagłówkiem (h1-h6), paragrafem (p), linkiem (a), zdjęciem (img), listą (li) czy tabelą (table), a każdy z tych elementów może posiadać atrybuty HTML, które przechowają o nich dodatkowe informacje i najczęściej posiadają swoją nazwę i wartość np.:  <p nazwa="wartość">Atrybuty HTML</p>. Warto przy tym pamiętać, że HTML nie odpowiada za wygląd strony, za który odpowiedzialny jest CSS (ang. Cascading Style Sheets), czyli kaskadowe arkusze stylów. 

Kodowanie strony

Najczęściej wykorzystywane atrybuty HTML

  • alt – alternatywny tekst dla obrazka;
  • href – adres WWW dla hiperłącza;
  • id – unikalny identyfikator elementu;
  • class – klasa elementu;
  • src – adres obrazu lub innego pliku;
  • style – wbudowany CSS dla elementu;
  • title – dodatkowa informacja o elemencie;
  • autofocus – określa aktywacją wybranego elementu po załadowaniu strony;
  • autoplay – pozwala na automatyczny start audio/wideo po załadowaniu strony;
  • download – wskazuje, że po kliknięciu w link element zostanie pobrany;
  • form – łączy wskazany formularz z elementem;
  • height – określa wysokość elementu;
  • multiple – określa, czy użytkownik może wprowadzić więcej niż jedną wartość;
  • rel – określa relację pomiędzy dwoma dokumentami HTML;
  • required – określa, czy pole formularza jest wymagane;
  • target – określa cel otwierania linku lub przesyłania formularza;
  • width – określa szerokość elementu.

Powiązane artykuły

Customowe template tags w Django

13 lip 2023

Template tags to świetne narzędzie pozwalające na manipulację danymi z poziomu template'ów w aplikacjach opartych o framework Django. Dużo z nich jest już wbudowanych we framework i gotowych do użytku, jednak czasem potrzebna jest customowa funkcjonalność.

Dawid Kruk

#fullstack

related-article-image-null

Poznaj Preact: Lekka i efektywna alternatywa dla ReactJS

25 wrz 2023

Technologia frontendu stale ewoluuje, wprowadzając różne biblioteki i ramki do tworzenia zaawansowanych aplikacji webowych. Jednym z najpopularniejszych narzędzi jest ReactJS, ale co jeśli istnieje alternatywa, która jest lżejsza i bardziej wydajna? Pozwólcie, że przedstawię wam Preact - lekką, szybką i efektywną alternatywę dla ReactJS.

Tomasz Kozon

#front-end

Jak efektywnie używać Props w React JS?

23 wrz 2023

W świecie front-endu, ReactJS zdecydowanie dominuje. Więc jak używać jednej z jego kluczowych funkcji jak prawdziwy ekspert? W tym artykule, skupimy się na 'Props' – elementach fundamentalnych dla płynnej komunikacji między komponentami w React.js. Pozwolą Ci one pisać czysty, efektywny kod, zwiększając produktywność. Zgłębiajmy tajniki 'Props'!

Tomasz Kozon

#front-end

Czysty kod z Shadow DOM: Jak to zrobić?

22 wrz 2023

Shadow DOM jest potężnym narzędziem dla deweloperów, pozwalającym na tworzenie modularnych i czystych struktur kodu. W świecie, gdzie rośnie złożoność aplikacji internetowych, znalezienie efektywnych metod zarządzania kodem jest kluczowe. Czy Shadow DOM może być odpowiedzią na te wyzwania? W tym artykule przyjrzymy się bliżej tej technologii.

Tomasz Kozon

Rollup.js - Przegląd funkcji i możliwości

22 wrz 2023

Czy zastanawiałeś się kiedyś, jak zoptymalizować i uprościć proces budowania swojego projektu JavaScript? Właśnie dokonujesz wstępu do świata Rollup.js - potężnego narzędzia bundlera. Ten artykuł prześledzi szerokie możliwości i funkcje Rollup.js, podkreślając jego kluczowe aspekty i sposoby użycia.

Tomasz Kozon

#front-end

Przegląd Vite.js: Nowa generacja narzędzi do budowania aplikacji front-end

19 wrz 2023

Większość developerów front-end jest zaznajomiona z narzędziami takimi jak webpack czy parcel. Jednak świeży powiew przynosi Vite.js; nowoczesne, szybkie i efektywne środowisko do budowania aplikacji. W tym artykule przyjrzymy się bliżej możliwościom i zaletom tej najnowszej technologii.

Michał Pączko

#front-end

HTML5 Canvas: Nowa generacja tworzenia grafiki w sieci

18 wrz 2023

W erze cyfrowej, tworzenie interaktywnej grafiki internetowej staje się coraz bardziej zaawansowane. HTML5 Canvas, nowe narzędzie w arsenale programistów, zwiastuje nową generację realizacji grafiki sieciowej. W artykule podchodzimy do tego tematu szczegółowo.

Tomasz Kozon

#web-design

Zobacz wszystkie artykuły powiązane z #front end