Tag HTML <meta>

Definicja i zastosowanie

<meta> Tag określa metadane dokumentu HTML. Metadane są danymi o danych (informacjach).

<meta> Tag zawsze znajduje się Element <head> Wewnątrz, zwykle używane do określania zestawu znaków, opisu strony, słów kluczowych, autora dokumentu i ustawień viewport:

Metadane nie są wyświetlane na stronie, ale mogą być analizowane przez maszyny.

Przeglądarki (jak wyświetlać zawartość lub odświeżać stronę), wyszukiwarki (słowa kluczowe) i inne usługi sieciowe używają metadanych.

Wskazówka:Elementy meta mają wiele różnych zastosowań, a w jednym dokumencie HTML można mieć wiele elementów meta.

Wskazówka:Przez <meta> Tag, który pozwala projektantom stron internetowych kontrolować viewport (czyli obszar widoczny użytkownika na stronie internetowej) (zobacz poniższy przykład "Ustawienie viewport").

Uwaga:Każdy element meta może być użyty tylko do jednego celu. Jeśli chcesz użyć więcej niż jednej cechy, powinieneś dodać kilka elementów meta do elementu head.

Zobacz również:

Tutorial HTML:Głowa HTML

Podręcznik HTML DOM:Obiekt Meta

Przykład

<head>
  <meta charset="UTF-8">
  <meta name="description" content="Darmowy tutorial internetowy">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="Bill Gates">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Spróbuj sam

Atrybut

Atrybut Wartość Opis
charset Zestaw znaków Określa kodowanie znaków dokumentu HTML.
content Tekst Określa wartość powiązaną z atrybutem http-equiv lub name.
http-equiv
  • content-security-policy
  • content-type
  • default-style
  • refresh
 Dostarczanie informacji/wartości dla atrybutu content za pomocą nagłówków HTTP.
name
  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
 określające nazwę metadanych.

globalne atrybuty

<meta> etykieta wspiera również Globalne atrybuty w HTML.

Element meta ma trzy typowe zastosowania:

  1. Określenie par metadanych nazwa/wartość
  2. Oświadczenie kodowania znaków
  3. Symulacja pól nagłówków HTTP

1: Określenie różnych par metadanych nazwa/wartość

Element meta może być używany do definiowania metadanych za pomocą par nazwa/wartość, do czego są potrzebne atrybuty name i content.

Definiowanie słów kluczowych dla wyszukiwarek:

<meta name="keywords" content="HTML, CSS, JavaScript">

Definiowanie opisu strony:

<meta name="description" content="Free Web tutorials for HTML and CSS">

Definiowanie autora strony:

<meta name="author" content="John Doe">

Ustawienie widoku, aby poprawić wygląd strony na różnych urządzeniach:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2: Oświadczenie kodowania znaków

Używając atrybutu charset, można określić, że strona używa kodowania UTF-8:

<meta charset="UTF-8">

3: Symulacja pól nagłówków HTTP

Używając atrybutów http-equiv i content, dokument będzie odświeżany co 30 sekund:

<meta http-equiv="refresh" content="30">

Zmiany w HTML5

Atrybut charset został dodany w HTML5.

W HTML4 atrybut http-equiv mógł mieć wiele różnych wartości. W HTML5 można używać tylko wartości wymienione na tej stronie.

Atrybut scheme w HTML4 nie jest już używany w HTML5.

W związku z tym, element meta już nie jest używany do określenia języka strony.

ustawienie widoku

HTML5 wprowadził metodę, która pozwala projektantom stron internetowych na: <meta> etykieta do kontrolowania widoku.

Powinien być zawarty w każdej stronie internetowej: <meta> Element widoku:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dostarcza przeglądarce instrukcje dotyczące kontrolowania rozmiaru i skali strony.

width=device-width Częściowo ustawia szerokość strony na szerokość ekranu urządzenia (w zależności od urządzenia).

Gdy przeglądarka załaduje stronę po raz pierwszy:initial-scale=1.0 Częściowa ustawienie początkowego poziomu skalowania.

Poniżej znajdują się przykłady stron bez meta znacznika viewport oraz ze znacznikiem meta viewport:

Wskazówka:Jeśli przeglądasz stronę na telefonie lub tablecie, możesz kliknąć poniższe dwa linki, aby zobaczyć różnice.



Bez meta znacznika viewport


Z meta znacznikiem viewport

Domyślne ustawienia CSS

Brak.

Wsparcie przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie