Znacznik HTML <meta>
Przykład
Opisz metadane w dokumencie HTML:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta
name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Znacznik <meta>definiuje metadane dotyczące dokumentu HTML. Metadane to dane (informacje) o danych.
<meta> tagi zawsze znajdują się wewnątrz elementu <head> i są zwykle używane do określenia zestawu znaków, opisu strony, słów kluczowych, autora dokumentu i ustawień okienka ekranu.
Metadane nie będą wyświetlane na stronie, ale można je przeanalizować maszynowo.
Metadane są używane przez przeglądarki (jak wyświetlić zawartość lub przeładować stronę), wyszukiwarki (słowa kluczowe) i inne usługi sieciowe.
Istnieje metoda umożliwiająca projektantom stron internetowych przejęcie kontroli nad obszarem wyświetlania (widocznym dla użytkownika obszarem strony internetowej) za pomocą <meta>znacznika (patrz przykład „Ustawianie obszaru roboczego” poniżej).
Obsługa przeglądarki
| Element | |||||
|---|---|---|---|---|---|
| <meta> | Yes | Yes | Yes | Yes | Yes |
Atrybuty
| Attribute | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| content | text | Specifies the value associated with the http-equiv or name attribute |
| http-equiv | content-security-policy content-type default-style refresh |
Provides an HTTP header for the information/value of the content attribute |
| name | application-name author description generator keywords viewport |
Specifies a name for the metadata |
Atrybuty globalne
Znacznik <meta>obsługuje również atrybuty globalne w HTML .
Więcej przykładów
Zdefiniuj słowa kluczowe dla wyszukiwarek:
<meta name="keywords" content="HTML, CSS, JavaScript">
Zdefiniuj opis swojej strony internetowej:
<meta name="description" content="Free Web tutorials for
HTML and CSS">
Określ autora strony:
<meta name="author" content="John Doe">
Odśwież dokument co 30 sekund:
<meta http-equiv="refresh" content="30">
Ustaw widok tak, aby Twoja witryna wyglądała dobrze na wszystkich urządzeniach:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ustawianie rzutni
Widoczny obszar to widoczny dla użytkownika obszar strony internetowej. Różni się w zależności od urządzenia – na telefonie komórkowym będzie mniejszy niż na ekranie komputera.
Powinieneś umieścić następujący <meta>element na wszystkich swoich stronach internetowych:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Daje to przeglądarce instrukcje dotyczące kontrolowania wymiarów i skalowania strony.
Część width=device-widthustawia szerokość strony zgodnie z szerokością ekranu urządzenia (która będzie się różnić w zależności od urządzenia).
Część initial-scale=1.0ustawia początkowy poziom powiększenia, gdy strona jest ładowana po raz pierwszy przez przeglądarkę.
Oto przykład strony internetowej bez metatagu viewport i tej samej strony internetowej z metatagiem viewport:
Wskazówka: jeśli przeglądasz tę stronę za pomocą telefonu lub tabletu, możesz kliknąć dwa poniższe łącza, aby zobaczyć różnicę.
Więcej informacji o widocznym obszarze można znaleźć w naszym responsywnym projektowaniu stron internetowych — samouczku dotyczącym widoku .
Powiązane strony
Samouczek HTML: Nagłówek HTML
Odniesienie HTML DOM: Meta obiekt
Domyślne ustawienia CSS
Nic.