Ostatnio edytowany:

data

Autor: Virtual Patriot

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 techniczne informacje 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
składnia HTML
  • <data> ... </data>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline

Dodatkowe 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

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem data określa w formie oraz do odczytu maszynowego/komputerowego wartość identyfikującą treść, która reprezentowana jest 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 count = data.length;
          var weight = {
              '34' : '12kg',
              '112' : '20kg',
              '5' : '40kg',
              '78' : '6kg',
              '99' : '10kg',
              '54' : '15kg'
          };

          for(var i = 0; i < count; 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 reprezentowana jest przez zawartość przykładowego elementu "data" może zostać zidentyfikowana przez skrypt języka JavaScript, ponieważ do wspomnianego elementu "data" został dodany atrybut "value" wraz z wartością "112".