Atrybuty HTML

Czym są atrybuty HTML?

Elementami budującymi nasz świat wirtualny HTML są elementy HTML. Wszystkie dostępne w języku HTML elementy HTML mogą budować nasz świat wirtualny HTML, lecz nie wszystkie elementy HTML dostępne w języku HTML posiadają dodatkowe zdolności, z których możemy korzystać za pomocą ich dodatkowych atrybutów HTML.

Zarówno elementy HTML zbudowane z dwóch tagów, jak i elementy HTML zbudowane z jednego tagu posiadają miejsce na swoje atrybuty HTML.

Przykład:

<p nazwa="wartość">przykładowa zawartość</p>

<meta nazwa="wartość">

Jak możemy dostrzec miejscem na atrybut HTML elementu HTML jest miejsce występujące po nazwie pierwszego tagu elementu HTML.

Atrybut HTML zbudowany jest ze swojej nazwy oraz zazwyczaj ze swojej wartości.

Nazwa atrybutu HTML jest informacją dla przeglądarki internetowej, jaki atrybut HTML chcemy dodać do interesującego nas elementu HTML. Natomiast wartość atrybutu HTML jest podpowiedzią dla przeglądarki internetowej, jaką konkretną informację ma reprezentować sobą atrybut HTML danego elementu HTML.

Nazwę atrybutu HTML należy oddzielić od nazwy pierwszego tagu elementu HTML przynajmniej jednym białym znakiem, zazwyczaj znakiem spacji, dzięki czemu przeglądarka internetowa może rozróżnić od siebie obie wspomniane nazwy.

Przykład:

<p title="przykładowy akapit treści">przykładowa zawartość</p>

<meta charset="utf-8">

Ponadto poniższe formy są również prawidłowe:

<p       title="przykładowy akapit treści"    >przykładowa zawartość</p>

<meta
charset="utf-8"
>

Nazwa atrybutu HTML może składać się zarówno z małych, jak i z dużych liter, lecz zalecam Tobie korzystanie wyłącznie z małych liter.

<p TITLE="przykładowy akapit treści">przykładowa zawartość</p>
<meta ChArSeT="utf-8">

<!-- bardziej przyjazną formą jest forma składająca się wyłącznie z małych liter -->
<p title="przykładowy akapit treści">przykładowa zawartość</p>
<meta charset="utf-8">

Wartość atrybutu HTML należy podać po znaku = oraz pomiędzy podwójnym ("wartość") lub pomiędzy pojedynczym ('wartość') cudzysłowem.

Przykład:

<!-- przykład podwójnego zewnętrznego cudzysłowu wartości atrybutu HTML -->
<p title="przykładowy akapit treści">przykładowa zawartość</p>

<!-- przykład pojedynczego zewnętrznego cudzysłowu wartości atrybutu HTML -->
<meta charset='utf-8'>

Jeżeli z jakiejś przyczyny pomiędzy wspomnianym podwójnym cudzysłowem musi znaleźć się znak ", znak ten możemy zapisać za pomocą znaku specjalnego ". Natomiast znak ' możemy zapisać za pomocą znaku specjalnego '.

Przykład:

<p title="przykładowy element &#34;p&#34;">przykładowa zawartość</p>

<p title='przykładowy element &#39;p&#39;'>przykładowa zawartość</p>

Każdy element HTML może posiadać więcej niż jeden atrybut HTML. Każdy kolejny atrybut HTML elementu HTML należy oddzielić od poprzedniego atrybutu HTML przynajmniej jednym białym znakiem, zazwyczaj znakiem spacji.

Przykład:

<p title="przykładowy akapit treści" id="akapit-1">przykładowa zawartość</p>

<meta name="author" description="Jan Kowalski">

Ponadto poniższe formy są również prawidłowe, lecz raczej nie stosuje się ich zbyt często.

<p
  title="przykładowy akapit treści"
  id="akapit-1"
>przykładowa zawartość</p>

<meta
  name="author"
  description="Jan Kowalski"
>

Przyjrzyjmy się teraz elementowi meta, który poznaliśmy wcześniej.

<meta>

Element meta może reprezentować dodatkową informację metadata dla przeglądarki internetowej o dokumencie HTML, w którego zawartości znajduje się dany element meta, lecz element meta w zaprezentowanej formie, czyli bez żadnego konkretnego atrybutu HTML o konkretnej wartości, nie jest żadną konkretną informacją dla przeglądarki internetowej, dlatego stan ten postaramy się zmienić, dodając do wspomnianego elementu meta przykładowy atrybut charset wraz z odpowiednią wartością.

<meta charset="utf-8">

Od tej pory nasz przykładowy element meta reprezentuje sobą konkretną informację metadata, o której powiemy sobie za chwilę. Jednak zanim to nastąpi nasz przykładowy element meta musimy umieścić w odpowiednim miejscu w przykładowym kodzie HTML.

Przykład:

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Moje ulubione rzeczy</title>
  </head>
  <body>

    <article>
      <h1>Mój ulubiony kwiat</h1>
      <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
      <p>Ponieważ róża to symbol miłości.</p>
    </article>

    <article>
      <h1>Mój ulubiony kolor</h1>
      <p>Moim ulubionym kolorem jest kolor <b>błękitny</b>.</p>
      <p>Ponieważ błękitny to kolor nieba.</p>
    </article>

  </body>
</html>

Gdy element meta posiada atrybut charset wraz z konkretną wartością oraz gdy wspomniany element meta jest elementem dzieckiem elementu head, w takiej sytuacji element meta reprezentuje sobą dodatkową informację metadata dla przeglądarki internetowej na temat systemu kodowania znaków, który został przypuszczalnie wykorzystany przez nas do napisania zawartości danego dokumentu HTML. W tym wypadku sugerowanym dla przeglądarki internetowej systemem kodowania znaków jest system utf-8, ponieważ tą wartość podaliśmy jako wartość atrybutu charset elementu meta.

To tylko początek naszej przygody z atrybutami HTML oraz ich wartościami.