Autor publikacji: Virtual Patriot - Administrator

meta

Data publikacji: Kwiecień 09 2016
Ostatnio edytowano: Grudzień 28 2024

Zobacz również: w3.org - the meta element (HTML5.2)

Przeznaczenie elementu `meta`

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

Dodatkowe artykuły związane z elementem `meta`

Progres II - Brakujące elementy HTML podstawowej struktury HTML

Informacje techniczne o elemencie `meta`

kategoria ogólna

zawartość metadata

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>
    
  </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>
    
  </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>
    <meta http-equiv="content-language" content="pl">
    <title>Darmowy Kurs HTML</title>
  </head>

  <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>
    
  </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>
    
  </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

wyłącznie jeden atrybut charset lub wyłącznie jeden atrybut http-equiv lub wyłącznie jeden atrybut name, ponadto atrybut content, lecz tylko wtedy gdy dany element meta posiada atrybut http-equiv lub atrybut name

zdolność fallback

nie dotyczy

składnia HTML

<meta>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

zawsze

CSS display

none

Przypuszczalnie domyślne reguły CSS elementu `meta`

meta {
  display:none;
}

Interpretacja elementu `meta`

tak

Nie interpretuje wartości plugin-types składnika name atrybutu content.

Nie interpretuje wartości 'unsafe-hashes' składnika value atrybutu content.

tak

Nie interpretuje wartości content-security-policy atrybutu http-equiv.

Nie interpretuje wartości referrer atrybutu name.

tak

Opis atrybutów elementu `meta`

Atrybut Lokalny

charset

Przeznaczenie atrybutu `charset`

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

Atrybut "charset" ma sens tylko wtedy gdy dany element "meta" nie posiada atrybutu content, atrybutu http-equiv lub atrybutu name.

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

Atrybut "charset" jest atrybutem wymaganym elementu "meta", lecz tylko wtedy gdy dany element "meta" nie posiada atrybutu content, atrybutu http-equiv lub atrybutu name.

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, jaki powinien posiadać przykładowy dokument HTML, jest informacja metadata wskazująca na system "utf-8", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "charset" o wartości "utf-8".

Atrybut Lokalny

content

Przeznaczenie atrybutu `content`

Atrybut content wykorzystany wraz z elementem meta pozwala nam określić treść, jaką powinna posiadać informacja metadata reprezentowana przez dany element meta.

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

Atrybut "content" jest atrybutem wymaganym elementu "meta", lecz tylko wtedy gdy dany element "meta" posiada atrybut http-equiv lub atrybut name oraz nie posiada atrybutu charset.

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>

Treścią, jaką posiada informacja metadata reprezentowana przez przykładowy element "meta" posiadający atrybut "name" o wartości "author", jest treść w postaci ciągu znaków "Jan Kowalski", ponieważ do wspomnianego elementu "meta" został dodany atrybut "content" wraz z wartością "Jan Kowalski".

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

Atrybut Lokalny

http-equiv

Przeznaczenie atrybutu `http-equiv`

Atrybut http-equiv wykorzystany wraz z elementem meta pozwala nam określić (w postaci pragma directive, czyli tzw. dyrektywy pragma) jedną z dodatkowych informacji metadata o danym dokumencie HTML, jaką powinien reprezentować dany element meta.

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

Atrybut "http-equiv" jest atrybutem wymaganym elementu "meta", lecz tylko wtedy gdy dany element "meta" nie posiada atrybutu charset lub atrybutu name.

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 języku, jaki posiada 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 informacją metadata o tym, jaki język posiada treść reprezentowana przez zawartość przykładowego dokumentu HTML, jest informacja metadata wskazująca na język polski, ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "http-equiv" o wartości "content-language" oraz atrybutem "content" o 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).

Mimo że wartość "content-language" atrybutu "http-equiv" należy do specyfikacji języka HTML5.2, nie należy korzystać z wartości "content-language". Do określenia docelowej informacji należy wykorzystać element html wraz z atrybutem lang.

content-security-policy

Wartość content-security-policy oznacza, że dany element meta reprezentuje informację o polityce prywatności treści danego dokumentu HTML.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="content-security-policy" content="script-src 'nonce-34678934'">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <p id="akapit-1">
      Skrypt jest nieaktywny!
    </p>

    <script nonce="34678934">
      window.document.getElementById('akapit-1').innerHTML = 'Skrypt został uaktywniony!';
    </script>

  </body>
</html>

Rezultat

Zobacz rezultat: przykład wartości content-security-policy atrybutu http-equiv - element meta

Przeglądarka internetowa zignoruje każdy skrypt dołączony do przykładowego dokumentu HTML, lecz nie skrypt reprezentowany przez element "script" posiadający atrybut "nonce" o wartości "34678934", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "http-equiv" o wartości "content-security-policy" oraz atrybutem "content" o wartości "script-src 'nonce-34678934'".

Składniki wzorca wartości atrybutu `content`

                    
                      name value

Informacje dodatkowe

możemy podać kilka par składników name value, każdą kolejną parę składników należy oddzielić od poprzedniej pary dokładnie jednym znakiem średnika

możemy podać kilka składników value, każdy kolejny składnik należy oddzielić od poprzedniego składnika przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji)

Przykładowe zapisy

default-src 'self'
default-src 'self'; object-src 'none'
script-src https://webkod.pl/js/ 'unsafe-eval'
script-src https://webkod.pl/js/skrypt.js 'unsafe-eval'; media-src 'none'
default-src 'self'; object-src 'none'; script-src https://webkod.pl/js/
plugin-types application/x-shockwave-flash application/pdf
object-src https:
object-src https://webkod.pl:8080/swf/
object-src https://*.webkod.pl:*/swf/
object-src https://*/swf/
object-src *.webkod.pl/swf/
style-src 'nonce-Wm5hc3ogasSZenlrIFBIUC4gQnJhd28hMzc5Mw=='
script-src 'sha256-KkiBhyAMN7arIfy4fJmAB84G+iqo4hFc9t1DGfXL6e4='
script-src 'unsafe-hashes' 'sha256-kjqXMpWSYmNgBZG5LcIFygaL4K3OnpDdHQV6N+ZdBy4='

name

Składnik name danego wzorca wartości określa, dla jakiego typu treści chcemy, aby istniała docelowa polityka prywatności, na którą wskazuje wartość składnika value.

Wartość domyślna: brak

Wartości składnika `name`

                            
                              base-uri,
                              child-src,
                              connect-src,
                              default-src,
                              font-src,
                              form-action,
                              frame-src,
                              img-src,
                              media-src,
                              plugin-types,
                              object-src,
                              script-src,
                              style-src,
                              worker-src

base-uri

Wartość base-uri tyczy się wartości atrybutu href elementu base.

child-src

Wartość child-src tyczy się tego samego co wartość frame-src oraz wartość worker-src.

connect-src

Wartość connect-src tyczy się zasobu internetowego, jaki może zostać załadowany przez skrypt języka programowania JavaScript za pomocą określonej grupy sposobów.

Docelowym sposobem w języku programowania JavaScript (w tym przypadku) między innymi może być:

new XMLHttpRequest()
new WebSocket()
new EventSource()
navigator.sendBeacon()
funkcja fetch()
oraz inne sposoby

default-src

Wartość default-src określa wartość domyślną składnika value dla takich wartości składnika name, jak: child-src, connect-src, font-src, frame-src, img-src, media-src, object-src, script-src, style-src oraz worker-src.

Informacje dodatkowe

dla wartości frame-src wartością domyślną składnika value jest:

wartość składnika value wartości child-src, jeżeli taka wartość została przez nas określona, w przeciwnym przypadku wartość składnika value wartości default-src

dla wartości worker-src wartością domyślną składnika value jest:

wartość składnika value wartości child-src, jeżeli taka wartość została przez nas określona, w przeciwnym przypadku wartość składnika value wartości script-src, jeżeli taka wartość została przez nas określona, w przeciwnym przypadku wartość składnika value wartości default-src

font-src

Wartość font-src tyczy się zewnętrznych czcionek dołączanych do dokumentu HTML za pomocą specyficznej reguły @font-face języka CSS.

form-action

Wartość form-action tyczy się wartości atrybutu action oraz wartości atrybutu formaction.

frame-src

Wartość frame-src tyczy się zasobu internetowego, jaki może zostać wczytany do zagnieżdżonego kontekstu przeglądarki internetowej reprezentowanego przez element iframe.

img-src

Wartość img-src tyczy się obrazków dołączanych do dokumentu HTML różnymi sposobami.

Docelowym sposobem między innymi może być:

element img
element input posiadający atrybut type o wartości image
element video posiadający atrybut poster
element link posiadający atrybut rel o wartości icon
funkcja url() języka CSS
oraz inne sposoby

media-src

Wartość media-src tyczy się zasobów internetowych, które mogą być reprezentowane przez element audio, element video oraz element track.

plugin-types

Wartość plugin-types tyczy się typu MIME zasobów internetowych, które mogą być reprezentowane przez element embed oraz element object.

object-src

Wartość object-src tyczy się zasobów internetowych, które mogą być reprezentowane przez element embed oraz element object.

script-src

Wartość script-src tyczy się skryptów języka programowania JavaScript dołączanych do dokumentu HTML różnymi sposobami.

Docelowym sposobem może być:

element script
atrybut zdarzeń języka programowania JavaScript (np. atrybut onclick, atrybut onmouseenter, atrybut onmouseleave oraz inne atrybuty zdarzeń)
adres URL (np. href="javascript:alert('Witaj!')")

style-src

Wartość style-src tyczy się stylów języka CSS dołączanych do dokumentu HTML różnymi sposobami.

Docelowym sposobem może być:

element style
element link posiadający atrybut rel o wartości stylesheet
atrybut style
specyficzna reguła @import języka CSS

worker-src

Wartość worker-src tyczy się zasobu internetowego, jaki może zostać załadowany przez skrypt języka programowania JavaScript za pomocą określonej grupy sposobów.

Docelowym sposobem w języku programowania JavaScript (w tym przypadku) może być:

new Worker()
new SharedWorker()
navigator.serviceWorker.register()

value

Składnik value danego wzorca wartości określa docelową politykę prywatności dla treści, na którą wskazuje wartość składnika name.

Wartość domyślna: brak

Wartości składnika `value`

                            
                              typ protokołu,
                              URL,
                              typ MIME,
                              'self',
                              'none',
                              'unsafe-eval',
                              'unsafe-inline',
                              'nonce-value',
                              'hash-value',
                              'unsafe-hashes'

typ protokołu

Wartość w formie typu protokołu (np. https:) oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name, jeżeli adres URL docelowej treści nie będzie posiadał typu protokołu, który podaliśmy.

Sposób podawania: należy podać nazwę interesującego nas typu protokołu, a następnie znak dwukropek
Przeznaczenie: dowolna treść, na którą wskazuje wartość składnika name oraz która posiada swój własny adres URL

URL

Wartość w formie adresu URL oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name, jeżeli adres URL docelowej treści nie będzie zgadzał się z adresem URL, który podaliśmy.

Sposób podawania

należy podać interesujący nas adres URL, który w tym przypadku może składać się z:

typu protokołu (np. https)
nazwy serwera (np. www.webkod.pl), również w postaci subdomeny (np. www.poczta.webkod.pl)
numeru portu (np. 8080)
ścieżki do folderu lub do pliku (np. pliki/obrazki/ lub pliki/obrazki/lew.png)

zawsze należy podać nazwę serwera

dla nazwy serwera lub nazwy subdomeny oraz numeru portu możemy podać specjalną wartość *, która oznacza dowolną nazwę serwera (np. https://*/pliki/obrazki/), dowolną nazwę subdomeny (np. https://*.webkod.pl/pliki/obrazki/) lub dowolny numer portu (np. https://webkod.pl:*/pliki/obrazki/, https://*:*/pliki/obrazki/ lub https://*.webkod.pl:*/pliki/obrazki/)

Przeznaczenie

dowolna treść, na którą wskazuje wartość składnika name oraz która posiada swój własny adres URL

typ MIME

Wartość w formie typu MIME (np. application/x-shockwave-flash) oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name, jeżeli typ MIME docelowej treści nie będzie zgadzał się z typem MIME, który podaliśmy.

Sposób podawania: należy podać interesujący nas typ MIME
Przeznaczenie: treść, na którą wskazuje wartość plugin-types składnika name

'self'

Wartość 'self' oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name, jeżeli adres URL docelowej treści nie będzie posiadał tego samego typu protokołu, tej samej nazwy serwera oraz tego samego numeru portu, co dany dokument HTML.

Przeznaczenie: dowolna treść, na którą wskazuje wartość składnika name oraz która posiada swój własny adres URL

'none'

Wartość 'none' oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name.

Przeznaczenie: dowolna treść, na którą wskazuje wartość składnika name

'unsafe-eval'

Wartość 'unsafe-eval' oznacza, że przeglądarka internetowa nie będzie ignorować sposobów, za pomocą których jest możliwe uruchomienie skryptu języka programowania JavaScript z ciągu znaków.

Docelowym sposobem w języku programowania JavaScript między innymi może być:

funkcja eval()
wartość ostatniego parametru konstruktora Function()
wartość pierwszego parametru funkcji setInterval()
wartość pierwszego parametru funkcji setTimeout()
oraz inne sposoby

Przeznaczenie: treść, na którą wskazuje wartość script-src składnika name

'unsafe-inline'

Wartość 'unsafe-inline' oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name, jeżeli docelowa treść będzie znajdowała się w zewnętrznym zasobie internetowym (np. w zewnętrznym pliku dołączonym do danego dokumentu HTML).

Przeznaczenie: dowolna treść, na którą wskazuje wartość składnika name oraz która znajduje się w zewnętrznym zasobie internetowym

'nonce-value'

Wartość 'nonce-value' oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name, jeżeli element HTML reprezentujący docelową treść nie będzie posiadał atrybutu nonce o wartości, jaka została wygenerowana losowo przez serwer, na którym znajduje się dany dokument HTML.

Sposób podawania

w cudzysłowie pojedynczym należy podać ciąg znaków nonce, myślnik oraz wartość wygenerowaną losowo przez serwer, na którym znajduje się dany dokument HTML

np. 'nonce-amhsbWJ4dmt0ZmN6dXduZXlzcmdvaXBkcWExNjYw'

Przeznaczenie

dowolna treść, na którą wskazuje wartość składnika name oraz która jest reprezentowana przez element HTML posiadający atrybut nonce

'hash-value'

Wartość 'hash-value' oznacza, że przeglądarka internetowa zignoruje treść, na którą wskazuje wartość składnika name, jeżeli wartość uzyskana z docelowej treści (za pomocą określonego algorytmu) nie będzie zgadzała się z wartością, którą podaliśmy.

Sposób podawania

za pomocą funkcji hash() języka programowania PHP oraz algorytmu sha256, algorytmu sha384 lub algorytmu sha512 możemy uzyskać docelową wartość

np. hash('sha256', 'alert("Witaj!");', true)

w ten sposób uzyskaną wartość należy zakodować za pomocą funkcji base64_encode() języka programowania PHP

np. base64_encode(hash('sha256', 'alert("Witaj!");', true))

w cudzysłowie pojedynczym należy podać nazwę wykorzystanego algorytmu, myślnik oraz uzyskaną wartość

np. 'sha256-KkiBhyAMN7arIfy4fJmAB84G+iqo4hFc9t1DGfXL6e4='

Przeznaczenie

treść, na którą wskazuje wartość script-src składnika name, jeżeli docelowa treść została dołączona do danego dokumentu HTML za pomocą elementu script, który nie posiada atrybutu src

treść, na którą wskazuje wartość style-src składnika name, jeżeli docelowa treść została dołączona do danego dokumentu HTML za pomocą elementu style

'unsafe-hashes'

Wartość 'unsafe-hashes' rozszerza przeznaczenie wartości 'hash-value' na kolejne treści.

Docelowe rozszerzenie dotyczy takich treści, jak:

skryptów języka programowania JavaScript dołączanych do dokumentu HTML za pomocą atrybutów zdarzeń (np. atrybutu onclick, atrybutu onmouseenter, atrybutu onmouseleave oraz innych atrybutów zdarzeń) lub za pomocą adresu URL (np. href="javascript:alert('Witaj!')")
stylów języka CSS dołączanych do dokumentu HTML za pomocą atrybutu style

Sposób podawania

wartość 'unsafe-hashes' należy podać wraz z przynajmniej jedną interesującą nas wartością 'hash-value'

np. 'unsafe-hashes' 'sha256-KkiBhyAMN7arIfy4fJmAB84G+iqo4hFc9t1DGfXL6e4='

content-type

Wartość content-type oznacza, że dany element meta reprezentuje informację o systemie kodowania znaków, jaki powinien 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 informacją metadata o tym, jaki system kodowania znaków powinien posiadać przykładowy dokument HTML, jest informacja metadata wskazująca na system "utf-8", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "http-equiv" o wartości "content-type" oraz atrybutem "content" o 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;charset=", po którym musi wystąpić ciąg znaków określający interesujący nas system kodowania znaków. Dodatkowo pomiędzy ciągiem znaków "text/html;", a ciągiem znaków "charset=" może wystąpić dowolna ilość znaków spacji.

default-style

Wartość default-style oznacza, że dany element meta reprezentuje informację o tym, który z elementów HTML powinien pełnić rolę preferowanego (domyślnego) elementu HTML reprezentującego reguły mogące określać styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości danego dokumentu HTML.

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="https://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="https://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="https://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

Zobacz rezultat: przykład atrybutu http-equiv o wartości default-style - element meta

Sugerowaną dla przeglądarki internetowej informacją metadata o tym, który z elementów HTML powinien pełnić rolę preferowanego (domyślnego) elementu HTML reprezentującego reguły mogące określać styl wyglądu poszczególnych elementów HTML znajdujących się w zawartości przykładowego dokumentu HTML, jest informacja metadata wskazująca na element HTML posiadający atrybut "title" o wartości "wygląd alternatywny - 2", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "http-equiv" o wartości "default-style" oraz atrybutem "content" o wartości "wygląd alternatywny - 2".

Wartością atrybutu content danego elementu "meta" w tym wypadku musi być wartość atrybutu title interesującego nas elementu link lub elementu style.

refresh

Wartość refresh oznacza, że dany element meta reprezentuje informację o tym, po upływie ilu sekund, od wczytania się danego dokumentu HTML, ma nastąpić odświeżenie danego dokumentu HTML lub przekierowanie do innego zasobu internetowego.

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

Zobacz rezultat: przykład atrybutu http-equiv o wartości refresh - element meta

Sugerowaną dla przeglądarki internetowej informacją metadata o tym, po upływie ilu sekund, od wczytania się przykładowego dokumentu HTML, ma nastąpić odświeżenie przykładowego dokumentu HTML, jest informacja metadata wskazująca na czas równy "5" sekund, ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "http-equiv" o wartości "refresh" oraz atrybutem "content" o 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 URL zasobu internetowego, do którego chcemy, aby nastąpiło przekierowanie. Dodatkowo pomiędzy ciągiem znaków ";", a ciągiem znaków "url=" może wystąpić dowolna ilość znaków spacji.

set-cookie

Wartość set-cookie oznacza, że dany element meta reprezentuje informację o tym, jakie COOKIE (tzw. ciasteczko) powinno zostać zapamiętane w przeglądarce internetowej podczas wczytywania się 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

Zobacz rezultat: przykład atrybutu http-equiv o wartości set-cookie - element meta

Sugerowaną dla przeglądarki internetowej informacją metadata o tym, jakie COOKIE powinno zostać zapamiętane w przeglądarce internetowej podczas wczytywania się przykładowego dokumentu HTML, jest informacja metadata wskazująca na COOKIE o nazwie "kolor" oraz wartości "czerwony", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "http-equiv" o wartości "set-cookie" oraz atrybutem "content" o wartości "kolor=czerwony;".

Mimo że wartość "set-cookie" atrybutu "http-equiv" należy do specyfikacji języka HTML5.2, nie należy korzystać z wartości "set-cookie". Do określenia docelowej informacji należy wykorzystać język programowania JavaScript lub język programowania PHP.

Atrybut Lokalny

name

Przeznaczenie atrybutu `name`

Atrybut name wykorzystany wraz z elementem meta pozwala nam określić jedną ze standardowych informacji metadata o danym dokumencie HTML, jaką powinien reprezentować dany element meta.

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

Atrybut "name" jest atrybutem wymaganym elementu "meta", lecz tylko wtedy gdy dany element "meta" nie posiada atrybutu charset lub atrybutu http-equiv.

Wartość domyślna: brak wartości domyślnej

Wartości atrybutu `name`

application-name

Wartość application-name oznacza, że dany element meta reprezentuje informację o nazwie aplikacji internetowej, jaką stanowi 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 dokumentu HTML -->

  </body>
</html>

Sugerowaną dla przeglądarki internetowej informacją metadata o nazwie aplikacji internetowej, jaką stanowi zawartość przykładowego dokumentu HTML, jest informacja metadata wskazująca na aplikacje o nazwie "Kalkulator 1.0", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "name" o wartości "application-name" oraz atrybutem "content" o wartości "Kalkulator 1.0".

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

author

Wartość author oznacza, że dany element meta reprezentuje informację o nazwie 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 nazwie autora przykładowego dokumentu HTML jest informacja metadata wskazująca na autora o nazwie "Jan Kowalski", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "name" o wartości "author" oraz atrybutem "content" o wartości "Jan Kowalski".

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

description

Wartość description oznacza, że dany element meta reprezentuje informację pełniącą rolę krótkiego opisu 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>

Sugerowaną dla przeglądarki internetowej informacją metadata pełniącą rolę krótkiego opisu treści reprezentowanej przez zawartość przykładowego dokumentu HTML jest informacja metadata posiadająca następujący opis: "Kolejny artykuł z serii - Moje ulubione rzeczy. Tym razem tematem artykułu jest mój ulubiony owoc, czyli czereśnia.", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "name" o wartości "description" oraz atrybutem "content" o 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ć dowolny ciąg znaków.

generator

Wartość generator oznacza, że dany element meta reprezentuje informację o nazwie programu, jaki 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, jaki został wykorzystany do wygenerowania zawartości przykładowego dokumentu HTML, jest informacja metadata wskazująca na program o nazwie "Space 2.5", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "name" o wartości "generator" oraz atrybutem "content" o wartości "Space 2.5".

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

keywords

Wartość keywords oznacza, że dany element meta reprezentuje informację o słowach 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>

Sugerowaną dla przeglądarki internetowej informacją metadata o słowach kluczowych odnoszących się do treści reprezentowanej przez zawartość przykładowego dokumentu HTML jest informacja metadata posiadająca następujące słowa kluczowe: "owoc,czereśnia,ulubiony", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "name" o wartości "keywords" oraz atrybutem "content" o wartości "owoc,czereśnia,ulubiony".

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

referrer

Wartość referrer oznacza, że dany element meta reprezentuje informację o tym, jaka wartość powinna stanowić wartość domyślną dla atrybutu referrerpolicy elementów HTML, które mogą posiadać docelowy atrybut referrerpolicy oraz które znajdują się w zawartości danego dokumentu HTML.

Przykładowy Kod HTML

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

    <img src="http://inna-strona.pl/inny-obrazek" alt="obrazek">

  </body>
</html>

Sugerowaną dla przeglądarki internetowej informacją metadata o tym, jaka wartość powinna stanowić wartość domyślną dla atrybutu "referrerpolicy" przykładowego elementu "img", jest informacja metadata wskazująca na wartość "no-referrer", ponieważ do części HEAD przykładowego dokumentu HTML został dodany element "meta" wraz z atrybutem "name" o wartości "referrer" oraz atrybutem "content" o wartości "no-referrer".

Wartością atrybutu content danego elementu "meta" w tym wypadku musi być dowolna wartość atrybutu referrerpolicy.

niestandardowa informacja

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