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

Ostatnie oferty pracy

Brak ofert pracy

Pokaż wszystkie oferty

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

Czy szukasz wykonawcy projektów IT ?
logo
Sprawdź case studies

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.

Nasza oferta

Web development

Dowiedz się więcej

Mobile development

Dowiedz się więcej

E-commerce

Dowiedz się więcej

Projektowanie UX/UI

Dowiedz się więcej

Outsourcing

Dowiedz się więcej

SEO

Dowiedz się więcej

Powiązane artykuły

React Window: Efektywne zarządzanie listami i tabelami

24 kwi 2024

React Window to potężne narzędzie umożliwiające efektywne zarządzanie dużymi listami i tabelami, które mogą przytłoczyć tradycyjne rozwiązania JavaScript. W naszym artykule zagłębimy się w jego funkcje, skupiając się na optymalizacji wydajności oraz użytkowniku.

Tomasz Kozon

#front-end

related-article-image-React Window

React LazyLoad: Zrozumienie i skuteczne wykorzystanie w praktyce

20 kwi 2024

LazyLoad w React to mechanizm poprawiający wydajność aplikacji poprzez odroczenie ładowania komponentów do momentu ich wymagania. Czy jesteś gotowy zagłębić się w jego tajniki? W tym artykule zrozumiesz, jak działa LazyLoad, jak go implementować oraz jak skutecznie wykorzystywać w swoich projektach.

Tomasz Kozon

#front-end

Rozwiazuj problemy projektowania formularzy z Webform

20 kwi 2024

W dzisiejszych czasach, dla każdej strony internetowej projekt formularza jest kluczowym elementem. Bez względu na to, czy jest to formularz kontaktowy czy rejestracyjny, dobrze zaprojektowany formularz wpływa na efektywność interakcji międz- użytkownikiem a stroną. W tym artykule, skupimy się na narzędziu Webform, które ułatwia to zadanie.

Tomasz Kozon

#front-end

Solid.js: Wydajność i reaktywność w świecie bibliotek JavaScript

18 kwi 2024

W dynamicznie zmieniającym się świecie technologii frontendowej, starcie o palmę pierwszeństwa trwa nieustannie. Jednym z nowych graczy na tym polu jest Solid.js - biblioteka JavaScript, która zdecydowanie zyskuje na popularności. Czy przez swoją wydajność i reaktywność ma szansę zapisać się na kartach historii web developmentu? Sprawdzamy!

Mateusz Szklarczyk

#front-end

Zastosowanie NextAuth.js do uwierzytelniania w aplikacjach Next.js

18 kwi 2024

Autoryzacja użytkowników to kluczowe zagadnienie w każdej aplikacji webowej. W artykule tym przedstawię, jak skutecznie wykorzystać NextAuth.js - bibliotekę do obsługi autoryzacji w aplikacjach Next.js, która znaną jest z elastyczności, bezpieczeństwa, a także łatwości implementacji.

Kamil Nahotko

#front-end

Wzorzec Compound Components w React - na czym polega i kiedy jest stosowany?

18 kwi 2024

Jednym z popularnych wzorców w React.js jest wzorzec Compound Components. Jest to koncept, który pozwala na tworzenie skomplikowanych, wielopoziomowych komponentów, zachowujących porządek oraz elastyczność. W dalszej części artykułu poruszona zostanie jego charakterystyka, zalety oraz praktyczne zastosowanie.

Anna Wołoszyn

#front-end

Clip-path w CSS: Definicja i podstawowe zastosowania

17 kwi 2024

Clip-path: Prosta, lecz rewelacyjna własność CSS, która pozwala na 'obcinanie' elementów strony i daje nam możliwość tworzenia nietypowych kształtów bez użycia obrazów. Ta technika pozwala na większą kontrolę nad layoutem strony, a jej podstawowe zastosowania są nieograniczone. Co więcej, clip-path jest dobrze obsługiwane przez większość przeglądarek internetowych.

Tomasz Kozon

#front-end

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