Autor publikacji
Virtual Patriot - Administrator

data

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu data

Element data reprezentuje zawartość, którą powinna być treść, która może zostać zidentyfikowana (np. przez dodatkowy skrypt języka programowania) na podstawie wartości atrybutu value danego elementu data.

Dodatkowe artykuły związane z elementem data

Informacje techniczne o elemencie data

kategoria ogólna
kontekst zewnętrzny

element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<ul>
  <li>
    <data value="23">krzesło</data>
  </li>

  <li>
    <data value="16">szafa</data>
  </li>

  <li>
    <data value="67">stół</data>
  </li>
</ul>

Kontekstem zewnętrznym przykładowych elementów "data" są elementy "li". Wspomniane elementy "li" są jednymi z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "li", element "li" oraz element "li", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "data".

kontekst wewnętrzny

zawartość frazowana

Przykładowy Kod HTML

<ul>
  <li>
    <data value="23">krzesło</data>
  </li>

  <li>
    <data value="16">szafa</data>
  </li>

  <li>
    <data value="67">stół</data>
  </li>
</ul>

Kontekstem wewnętrznym przykładowych elementów "data" jest wyłącznie tekst. Wspomniany tekst jest jednym z elementów, które należą do kategorii zawartość frazowana, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "krzesło", ciąg znaków "szafa" oraz ciąg znaków "stół", jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "data".

wymagane elementy dzieci

brak

wymagane atrybuty

atrybut value

zdolność fallback

nie dotyczy

składnia HTML

<data> ... </data>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline

Przypuszczalnie domyślne reguły CSS elementu data

/* brak */

Interpretacja elementu data

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu data

Atrybut Lokalny

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem data pozwala nam określić, na podstawie jakiej wartości dodatkowy skrypt języka programowania może zidentyfikować treść, która jest reprezentowana przez zawartość danego elementu data.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu value

ciąg znaków

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <ul>
      <li>
        <data value="34">blok wykonany z drewna</data>
      </li>

      <li>
        <data value="112">blok wykonany ze szkła</data>
      </li>

      <li>
        <data value="5">blok wykonany z betonu</data>
      </li>
    </ul>

    <script>
      (function(){
          var data = window.document.getElementsByTagName('data');
          var sum = data.length;
          var weight = {
              '34'  : '12kg',
              '112' : '20kg',
              '5'   : '40kg',
              '78'  : '6kg',
              '99'  : '10kg',
              '54'  : '15kg'
          };

          for(var i = 0; i < sum; i++)
          {
              data[i].innerHTML += ' - <b>' + weight[data[i].attributes['value'].value] + '</b>';
          }
      })();
    </script>

  </body>
</html>

Rezultat

  • blok wykonany z drewna
  • blok wykonany ze szkła
  • blok wykonany z betonu

Treść, którą jest ciąg znaków "blok wykonany ze szkła" oraz która jest reprezentowana przez zawartość przykładowego elementu "data", może zostać zidentyfikowana przez skrypt języka programowania JavaScript na podstawie wartości "112", ponieważ do wspomnianego elementu "data" został dodany atrybut "value" wraz z wartością "112".