Ostatnio edytowany:

meta

Autor: Virtual Patriot

Przeznaczenie elementu meta

Element meta reprezentuje dodatkowe informacje metadata o dokumencie HTML, które z reguły nie są bezpośrednio przeznaczone dla użytkownika, lecz dla różnych mechanizmów, które interpretują oraz przetwarzają kod dokumentu HTML (jednym z tych mechanizmów jest przeglądarka internetowa).

Dodatkowe techniczne informacje o elemencie meta

kategoria ogólna
kontekst zewnętrzny
  • jako element dziecko elementu head, lecz tylko wtedy gdy dany element meta posiada atrybut charset lub atrybut http-equiv, który pełni rolę określającą system kodowania znaków danego dokumentu HTML

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Darmowy Kurs HTML</title>
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </body>
    </html>

    Kontekstem zewnętrznym przykładowego elementu "meta" jest element "head", dla którego wspomniany element "meta" jest elementem dzieckiem. Ponadto wspomniany element "meta" posiada atrybut "charset", który pełni rolę określającą system kodowania znaków danego dokumentu HTML, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "meta".

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>Darmowy Kurs HTML</title>
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </body>
    </html>

    Kontekstem zewnętrznym przykładowego elementu "meta" jest element "head", dla którego wspomniany element "meta" jest elementem dzieckiem. Ponadto wspomniany element "meta" posiada atrybut "http-equiv", który pełni rolę określającą system kodowania znaków danego dokumentu HTML, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "meta".

  • jako element dziecko elementu head, lecz tylko wtedy gdy dany element meta posiada atrybut http-equiv, który nie pełni roli określającej system kodowania znaków danego dokumentu HTML

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Darmowy Kurs HTML</title>
        <meta http-equiv="content-language" content="pl">
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </body>
    </html>

    Kontekstem zewnętrznym przykładowego elementu "meta" jest element "head", dla którego wspomniany element "meta" jest elementem dzieckiem. Ponadto wspomniany element "meta" posiada atrybut "http-equiv", który nie pełni roli określającej system kodowania znaków danego dokumentu HTML, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "meta".

  • jako element dziecko elementu noscript, który jest elementem dzieckiem elementu head, lecz tylko wtedy gdy dany element meta posiada atrybut http-equiv, który nie pełni roli określającej system kodowania znaków danego dokumentu HTML

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Darmowy Kurs HTML</title>
        <noscript>
          <meta http-equiv="refresh" content="60">
        </noscript>
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </body>
    </html>

    Kontekstem zewnętrznym przykładowego elementu "meta" jest element "noscript", dla którego wspomniany element "meta" jest elementem dzieckiem. Ponadto wspomniany element "noscript" jest elementem dzieckiem elementu "head", natomiast wspomniany element "meta" posiada atrybut "http-equiv", który nie pełni roli określającej system kodowania znaków danego dokumentu HTML, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "noscript", jest prawidłowym kontekstem zewnętrznym dla elementu "meta".

  • element HTML, który tworzy wewnętrzny kontekst metadata, lecz tylko wtedy gdy dany element meta posiada atrybut name

    Przykładowy Kod HTML

    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Darmowy Kurs HTML</title>
        <meta name="author" content="Jan Kowalski">
      </head>
    
      <body>
        <!-- miejsce na pozostały kod części BODY -->
      </body>
    </html>

    Kontekstem zewnętrznym przykładowego elementu "meta" jest element "head". Ponadto wspomniany element "head" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst metadata, natomiast wspomniany element "meta" posiada atrybut "name", dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "head", jest prawidłowym kontekstem zewnętrznym dla elementu "meta".

kontekst wewnętrzny
  • brak
wymagane elementy dzieci
  • brak
wymagane atrybuty
składnia HTML
  • <meta>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • zawsze
CSS display
  • none

Dodatkowe domyślne reguły CSS elementu meta

meta {
  display:none;
}

Interpretacja elementu meta

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu meta

charset

Przeznaczenie atrybutu charset

Atrybut charset wykorzystany wraz z elementem meta określa informację o systemie kodowania znaków, jaki posiada dany dokument HTML.

Maksymalnie jeden element "meta" posiadający atrybut "charset" może znaleźć się w części HEAD dokumentu HTML.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu charset

system kodowania znaków

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

Przykładowy Kod HTML

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

    <p>
      Przykładowe polskie znaki: ą, ć, ę, ł, ń, ó, ś, ż, ź.
    </p>

  </body>
</html>

Rezultat

Przykładowe polskie znaki: ą, ć, ę, ł, ń, ó, ś, ż, ź.

Sugerowaną dla przeglądarki internetowej informacją metadata o systemie kodowania znaków przykładowego dokumentu HTML jest informacja metadata wskazująca na system "utf-8", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "charset" wraz z wartością "utf-8".

content

Przeznaczenie atrybutu content

Atrybut content wykorzystany wraz z elementem meta określa treść informacji metadata, którą ma reprezentować dany element meta.

Atrybut "content" ma sens tylko wtedy gdy dany element "meta" posiada atrybut http-equiv lub atrybut name.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu content

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 treści.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Jan Kowalski">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Sugerowaną dla przeglądarki internetowej informacją metadata o autorze przykładowego dokumentu HTML jest informacja metadata wskazująca na autora o nazwie "Jan Kowalski", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "name" o wartości "author" oraz posiadający atrybut "content" wraz z wartością "Jan Kowalski".

Forma wspomnianej treści jest uzależniona od posiadanej przez dany element "meta" wartości atrybutu http-equiv lub wartości atrybutu name.

http-equiv

Przeznaczenie atrybutu http-equiv

Atrybut http-equiv wykorzystany wraz z elementem meta określa dodatkową informację metadata o danym dokumencie HTML.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu http-equiv

content-language

Wartość content-language oznacza, że dany element meta reprezentuje informację o bazowym języku, jakim została napisana treść reprezentowana przez zawartość danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-language" content="pl">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Sugerowaną dla przeglądarki internetowej dodatkową informacją metadata o tym, jakim bazowym językiem została napisana treść reprezentowana przez zawartość przykładowego dokumentu HTML jest informacja metadata wskazująca na język polski, ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "http-equiv" o wartości "content-language" oraz posiadający atrybut "content" wraz z wartością "pl".

Wartością atrybutu content danego elementu "meta" w tym wypadku musi być ciąg znaków w formie symbolu języka (Norma ISO 639-1).

content-type

Wartość content-type oznacza, że dany element meta reprezentuje informację o systemie kodowania znaków, jaki posiada dany dokument HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Sugerowaną dla przeglądarki internetowej dodatkową informacją metadata o tym, jaki system kodowania znaków posiada przykładowy dokument HTML jest informacja metadata wskazująca na system "utf-8", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "http-equiv" o wartości "content-type" oraz posiadający atrybut "content" wraz z wartością "text/html; charset=utf-8".

Wartością atrybutu content danego elementu "meta" w tym wypadku musi być ciąg znaków "text/html; ", po którym musi wystąpić ciąg znaków "charset=" wraz z wartością określającą system kodowania znaków danego dokumentu HTML.

default-style

Wartość default-style oznacza, że dany element meta reprezentuje informację o tym, który z elementów HTML, który reprezentuje alternatywny (zamienny) zasób internetowy posiadający reguły określające styl wyglądu poszczególnych elementów HTML występujących w zawartości danego dokumentu HTML powinien być traktowany przez przeglądarkę internetową jako domyślny element HTML reprezentujący wspomniany zasób internetowy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <meta http-equiv="default-style" content="wygląd alternatywny - 2">

    <link href="http://webkod.pl/files/html/styl-domyslny-01.css" rel="stylesheet" title="wygląd domyślny">
    <!-- KOD ŹRÓDŁOWY PLIKU - styl-domyslny-01.css -->
    <!-- body { background-color:orange; } -->
    <link href="http://webkod.pl/files/html/styl-alternatywny-01.css" rel="stylesheet alternate" title="wygląd alternatywny - 1">
    <!-- KOD ŹRÓDŁOWY PLIKU - styl-alternatywny-01.css -->
    <!-- body { background-color:yellow; } -->
    <link href="http://webkod.pl/files/html/styl-alternatywny-02.css" rel="stylesheet alternate" title="wygląd alternatywny - 2">
    <!-- KOD ŹRÓDŁOWY PLIKU - styl-alternatywny-02.css -->
    <!-- body { background-color:pink; } -->

    <style title="wygląd alternatywny - 3">
      body { background-color:aqua; }
    </style>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Sugerowaną dla przeglądarki internetowej dodatkową informacją metadata o tym, który z elementów HTML reprezentujący alternatywny zasób internetowy posiadający reguły określające styl wyglądu poszczególnych elementów HTML występujących w zawartości przykładowego dokumentu HTML powinien być traktowany przez przeglądarkę internetową jako domyślny zasób internetowy pełniący wspomnianą rolę jest informacja metadata wskazująca na element HTML posiadający atrybut "title" o wartości "wygląd alternatywny - 2", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "http-equiv" o wartości "default-style" oraz posiadający atrybut "content" wraz z wartością "wygląd alternatywny - 2".

refresh

Wartość refresh oznacza, że dany element meta reprezentuje informację o tym, po opływie ilu sekund dany dokument HTML ma zostać odświeżony (wczytany ponownie do okna przeglądarki internetowej).

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <meta http-equiv="refresh" content="5">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Sugerowaną dla przeglądarki internetowej dodatkową informacją metadata o tym, po opływie ilu sekund przykładowy dokument HTML powinien zostać wczytany ponownie do okna wspomnianej przeglądarki internetowej jest informacja metadata wskazująca na czas równy "5" sekund, ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "http-equiv" o wartości "refresh" oraz posiadający atrybut "content" wraz z wartością "5".

Wartością atrybutu content danego elementu "meta" w tym wypadku musi być ciąg znaków w formie nieujemnej liczby całkowitej, po której opcjonalnie może wystąpić ciąg znaków "; url=" wraz z ciągiem znaków w formie adresu URI zasobu internetowego, który chcemy aby został wczytany do okna przeglądarki internetowej.

Wartość set-cookie oznacza, że dany element meta reprezentuje informację o tym, jakie COOKIE (tzw. ciasteczko) ma zostać zapamiętane w przeglądarce internetowej podczas wczytywania danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
    <meta http-equiv="set-cookie" content="kolor=czerwony;">
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Rezultat

Sugerowaną dla przeglądarki internetowej dodatkową informacją metadata o tym, jakie COOKIE ma zostać zapamiętane przez wspomnianą przeglądarkę internetową podczas wczytywania przykładowego dokumentu HTML jest informacja metadata wskazująca na COOKIE o nazwie "kolor" oraz wartości "czerwony", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "http-equiv" o wartości "set-cookie" oraz posiadający atrybut "content" wraz z wartością "kolor=czerwony;".

niestandardowa nazwa

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas niestandardowej nazwy dodatkowej informacji metadata, którą ma reprezentować dany element meta.

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem meta określa nazwę informacji metadata, którą ma reprezentować dany element meta.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

application-name

Wartość application-name oznacza, że dany element meta reprezentuje nazwę aplikacji internetowej reprezentowanej przez zawartość danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="application-name" content="Kalkulator 1.0">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <!-- miejsce na pozostały kod części BODY -->

  </body>
</html>

Sugerowaną dla przeglądarki internetowej informacją metadata o nazwie aplikacji internetowej reprezentowanej przez zawartość przykładowego dokumentu HTML jest nazwa "Kalkulator 1.0", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "name" o wartości "application-name" oraz posiadający atrybut "content" wraz z wartością "Kalkulator 1.0".

Wartością atrybutu content danego elementu "meta" w tym wypadku może być ciąg znaków o dowolnej formie.

author

Wartość author oznacza, że dany element meta reprezentuje nazwę autora danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Jan Kowalski">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Sugerowaną dla przeglądarki internetowej informacją metadata o autorze przykładowego dokumentu HTML jest informacja metadata wskazująca na autora o nazwie "Jan Kowalski", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "name" o wartości "author" oraz posiadający atrybut "content" wraz z wartością "Jan Kowalski".

Wartością atrybutu content danego elementu "meta" w tym wypadku może być ciąg znaków o dowolnej formie.

description

Wartość description oznacza, że dany element meta reprezentuje krótki opis treści reprezentowanej przez zawartość danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Kolejny artykuł z serii - Moje ulubione rzeczy. Tym razem tematem artykułu jest mój ulubiony owoc, czyli czereśnia.">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Sugerowanym dla przeglądarki internetowej opisem treści reprezentowanej przez zawartość przykładowego dokumentu HTML jest opis "Kolejny artykuł z serii - Moje ulubione rzeczy. Tym razem tematem artykułu jest mój ulubiony owoc, czyli czereśnia.", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "name" o wartości "description" oraz posiadający atrybut "content" wraz z wartością "Kolejny artykuł z serii - Moje ulubione rzeczy. Tym razem tematem artykułu jest mój ulubiony owoc, czyli czereśnia.".

Wartością atrybutu content danego elementu "meta" w tym wypadku może być ciąg znaków o dowolnej formie.

generator

Wartość generator oznacza, że dany element meta reprezentuje nazwę programu, który został wykorzystany do wygenerowania zawartości danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="Space 2.5">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Sugerowaną dla przeglądarki internetowej informacją metadata o nazwie programu, który został wykorzystany do wygenerowania zawartości przykładowego dokumentu HTML jest nazwa "Space 2.5", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "name" o wartości "generator" oraz posiadający atrybut "content" wraz z wartością "Space 2.5".

Wartością atrybutu content danego elementu "meta" w tym wypadku może być ciąg znaków o dowolnej formie.

keywords

Wartość keywords oznacza, że dany element meta reprezentuje zbiór oddzielonych od siebie dokładnie jednym znakiem przecinka słów kluczowych odnoszących się do treści reprezentowanej przez zawartość danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="keywords" content="owoc,czereśnia,ulubiony">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <h1>Owoce</h1>

    <article>
      <h2>Mój ulubiony owoc</h2>
      <p>Moim ulubionym owocem jest czereśnia.</p>
    </article>

  </body>
</html>

Sugerowanymi dla przeglądarki internetowej słowami kluczowymi odnoszącymi się do treści reprezentowanej przez zawartość przykładowego dokumentu HTML są słowa "owoc,czereśnia,ulubiony", ponieważ w zawartości wspomnianego dokumentu HTML występuje (w odpowiednim miejscu) element "meta" posiadający atrybut "name" o wartości "keywords" oraz posiadający atrybut "content" wraz z wartością "owoc,czereśnia,ulubiony".

Wartością atrybutu content danego elementu "meta" w tym wypadku powinien być ciąg znaków zawierający oddzielone od siebie dokładnie jednym znakiem przecinka wyrazy.

niestandardowa nazwa

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas niestandardowej nazwy informacji metadata, którą ma reprezentować dany element meta.