7. Atrybuty HTML

Atrybuty HTML przekazują dodatkowe informacje lub modyfikują zachowanie elementów. Większość, np. title, wymaga podania wartości, ale istnieje grupa tzw. atrybutów logicznych, które jej nie wymagają.

Definicja typowego atrybutu składa się z nazwy atrybutu, znaku równości i wartości. W standardzie HTML5 wartość atrybutu może być ujęta w cudzysłów pojedynczy lub podwójny albo może w ogóle nie znajdować się w cudzysłowie. Wszystkie poniższe przykłady są prawidłowe w języku HTML5:

<div lang=pl>Sekcja dokumentu w języku polskim</div>
<div lang="pl">Sekcja dokumentu w języku polskim</div>
<div lang='pl'>Sekcja dokumentu w języku polskim</div>
W standardzie HTML5 jest wymienionych wiele typów atrybutów HTML. Tutaj zajmiemy się tylko paroma najważniejszymi z naszego punktu widzenia.

Atrybuty treści

Podstawowy typ atrybutów HTML to atrybuty treści (ang. content attribute). Są to wszystkie te atrybuty, które definiuje się bezpośrednio w znacznikach HTML, np.: title, src, content itd.

Ich wartość zawsze jest łańcuchem znaków bez względu na jej rzeczywisty typ danych (może to być np. liczba całkowita), a dostęp do nich można uzyskać z poziomu JavaScriptu za pomocą funkcji getAttribute() i setAttribute(), np.:

<textarea>Obszar tekstowy</textarea>
<script>
  let textarea = document.querySelector("textarea");
  textarea.setAttribute("cols", "30");
</script>

W tym przypadku element textarea będzie miał szerokość 30 kolumn.

Atrybuty obsługi zdarzeń

Wszystkie elementy HTML obsługują tzw. atrybuty obsługi zdarzeń (ang. event handler). Nazwy tych atrybutów składają się z dwóch połączonych części: członu on i nazwy zdarzenia. Na przykład onclick.

Wartością atrybutu obsługi zdarzeń jest kod JavaScript, który ma być wykonany w reakcji na dane zdarzenie, np. kliknięcie myszą:

<button onclick="alert('Kliknięto mnie')">

Atrybuty IDL

Atrybuty IDL są „odbiciem” atrybutów treści, tzn. kiedy pobieramy lub ustawiamy atrybut IDL, to pobierany lub ustawiany jest analogiczny atrybut treści.

Ten rodzaj atrybutów jest nazywany własnościami JavaScript, ponieważ w JavaScripcie są one dostępne jako własności obiektów DOM, np.:

<textarea>Obszar tekstowy</textarea>
<script>
  let textarea = document.querySelector("textarea");
  textarea.cols = 30;
</script>

Wartości atrybutów IDL nie muszą być łańcuchami. Jeśli atrybut ma wartość liczbową, należy taką zdefiniować. Jeśli użytkownik zdefiniuje liczbę w postaci łańcucha, np. textarea.cols = "30", to i tak wartość ta zostanie przekonwertowana na liczbę.

W przypadku atrybutów logicznych odpowiedni atrybut IDL zwraca prawdę, jeśli dany atrybut treści jest ustawiony, oraz fałsz, jeśli dany atrybut treści nie jest ustawiony.

Ponadto atrybuty IDL zawsze zwracają rzeczywistą wartość atrybutu, tzn. jeśli ustawimy input.type = "cokolwiek", to atrybut IDL i tak zwróci domyślną wartość atrybutu type, czyli text.

Ręka zmieniająca położenie przełącznika

Atrybuty logiczne

Atrybuty logiczne (ang. boolean attributes) działają jak przełączniki włączające pewną właściwość elementu. Obecność danego atrybutu logicznego oznacza prawdę, a nieobecność — fałsz.

Wartością atrybutu logicznego może być pusty łańcuch lub sama nazwa tego atrybutu w cudzysłowie pojedynczym lub podwójnym albo bez cudzysłowu. Wszystkie poniższe definicje są prawidłowe:

<input type=text readonly name=telefon>
<input type=text readonly=readonly name=telefon>
<input type=text readonly="readonly" name=telefon>
<input type=text readonly="" name=telefon>

Atrybuty logiczne nie mogą mieć wartości true ani false do oznaczania stanów „włączenia” i „wyłączenia”. Stan włączenia określa sama obecność atrybutu, a stan wyłączenia — jego brak.

Atrybuty globalne

W HTML5 istnieje grupa atrybutów, które można definiować dla wszystkich elementów, choć nie w każdym przypadku ma to sens, ponieważ nie wywołuje żadnego efektu. Poniżej znajduje się lista atrybutów globalnych HTML5.

accesskey, class, contenteditable, contextmenu, dir, draggable, dropzone, hidden, id, lang, spellcheck, style, tabindex, title

W specyfikacji HTML5 napisano, że atrybuty te „mogą być definiowane dla wszystkich elementów HTML (nawet niezdefiniowanych w tej specyfikacji)”.

Wiesz już naprawdę dużo na temat elementów i atrybutów HTML, umiesz posługiwać się edytorami kodu i masz przygotowane kompletne środowisko pracy. Najwyższa pora, aby zacząć poważną naukę posługiwania się językiem HTML.

W następnym rozdziale nauczysz się definiować akapity i nagłówki oraz dowiesz się, jak tworzyć złamania wiersza w obrębie akapitów.

Podsumowanie

Sum
  • Atrybuty HTML przekazują dodatkowe informacje lub modyfikują zachowanie elementów.
  • Wartość atrybutu HTML może być ujęta w cudzysłów podwójny lub pojedynczy oraz w niektórych przypadkach może być zdefiniowana bez cudzysłowu.
  • Najbardziej ogólną kategorią są atrybuty treści.
  • Atrybuty obsługi zdarzeń jako wartość przyjmują kod JavaScript.
  • Atrybuty IDL są „odbiciem” atrybutów treści.
  • Atrybuty logiczne działają jak przełączniki włączające pewną właściwość elementu.
  • Atrybuty globalne można definiować we wszystkich elementach, choć nie zawsze ma to sens.

Podobał Ci się ten artykuł?

Oceń go!

Średnia 5 / 5. Liczba głosów: 3

Jeszcze nikt nie głosował. Wyprzedź innych i zagłosuj.

Skoro spodobał Ci się ten artykuł...

Poleć go znajomym!

Ojej :( Powiedz nam, co powinniśmy poprawić!

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.

Autor: Łukasz Piwko

Dodaj komentarz

trzynaście − dwanaście =

Atrybuty HTML

Poznanie tego, czym są atrybuty HTML stanowi kluczowy krok w nauce tworzenia stron internetowych. Dzięki nim Twoje znaczniki zyskują dodatkowe właściwości, które określają ich wygląd, zachowanie czy funkcjonalność. Atrybuty HTML to podstawowy element języka znaczników, który pozwala przekształcić prostą strukturę w interaktywny i atrakcyjny wizualnie dokument.

Atrybuty HTML - podstawy i zastosowanie

Atrybuty znaczników HTML definiują dodatkowe cechy elementów i zawsze występują w tagu otwierającym. Składają się z nazwy atrybutu oraz wartości, która jest zazwyczaj umieszczona w cudzysłowach. Dzięki nim możesz określić na przykład, gdzie kierować użytkownika po kliknięciu w link, jaki kolor ma mieć tekst czy też jak ma zachowywać się dany element na stronie. Warto zapoznać się z kompleksową listą atrybutów HTML, aby poznać pełen zakres możliwości, jakie oferują. Najpopularniejsze zastosowania atrybutów HTML obejmują:

  • definiowanie stylów wizualnych elementów,
  • określanie adresów URL dla linków i obrazów,
  • identyfikowanie elementów za pomocą id i class,
  • obsługę zdarzeń, takich jak kliknięcie czy najechanie myszą,
  • zwiększanie dostępności strony dla osób z niepełnosprawnościami.

Aby sprawnie pracować z atrybutami HTML, warto wykorzystywać dobry edytor do programowania, który oferuje podpowiedzi i kolorowanie składni.

Co to są atrybuty HTML5 i elementy takie jak div HTML

HTML5 wprowadził wiele nowych atrybutów, które rozszerzają możliwości poprzednich wersji języka. Atrybuty HTML5 obejmują m.in. data-*, które pozwalają na przechowywanie własnych danych w elemencie, a także nowe atrybuty dla formularzy, które ułatwiają walidację danych. Jeśli zastanawiasz się, jak zrobić stronę HTML, powinieneś zrozumieć, jak efektywnie wykorzystywać te atrybuty. Element div HTML jest jednym z najczęściej używanych kontenerów, którego elastyczność wynika właśnie z możliwości zastosowania różnych atrybutów. Dzięki atrybutom takim jak class, id czy style, prosty div HTML może stać się dowolnym blokiem treści o określonych właściwościach. Atrybuty znaczników HTML są niezbędne do tworzenia responsywnych i dynamicznych stron internetowych.

Aby pogłębić swoją wiedzę na temat języka znaczników i jego atrybutów, warto regularnie zaglądać do naszej sekcji HTML poradnik, gdzie znajdziesz wiele przydatnych wskazówek. Kompleksowa nauka tworzenia stron internetowych wymaga zrozumienia, jak efektywnie wykorzystywać atrybuty HTML w codziennej pracy programisty. Atrybuty HTML pozwalają nie tylko na kontrolę wyglądu i funkcjonalności elementów, ale także znacząco wpływają na dostępność strony oraz jej optymalizację pod kątem wyszukiwarek internetowych, co przekłada się na lepsze doświadczenia użytkowników i wyższą pozycję w wynikach wyszukiwania.