HTML značka <meta>
Příklad
Popište metadata v dokumentu 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>
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Značka <meta>
definuje metadata o dokumentu HTML. Metadata jsou data (informace) o datech.
<meta>
tagy vždy jdou do prvku <head> a obvykle se používají k určení znakové sady, popisu stránky, klíčových slov, autora dokumentu a nastavení výřezu.
Metadata se na stránce nezobrazí, ale lze je strojově analyzovat.
Metadata používají prohlížeče (jak zobrazit obsah nebo znovu načíst stránku), vyhledávače (klíčová slova) a další webové služby.
Existuje způsob, jak umožnit webovým designérům převzít kontrolu nad výřezem (uživatelova viditelná oblast webové stránky) prostřednictvím <meta>
značky (viz příklad „Nastavení výřezu“ níže).
Podpora prohlížeče
Element | |||||
---|---|---|---|---|---|
<meta> | Yes | Yes | Yes | Yes | Yes |
Atributy
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 |
Globální atributy
Značka <meta>
také podporuje globální atributy v HTML .
Další příklady
Definujte klíčová slova pro vyhledávače:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definujte popis své webové stránky:
<meta name="description" content="Free Web tutorials for
HTML and CSS">
Definujte autora stránky:
<meta name="author" content="John Doe">
Obnovit dokument každých 30 sekund:
<meta http-equiv="refresh" content="30">
Nastavení zobrazované oblasti, aby váš web vypadal dobře na všech zařízeních:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Nastavení výřezu
Viewport je uživatelsky viditelná oblast webové stránky. Liší se podle zařízení – na mobilu bude menší než na obrazovce počítače.
Na všechny své webové stránky byste měli zahrnout následující <meta>
prvek:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To dává prohlížeči pokyny, jak ovládat rozměry a měřítko stránky.
Část width=device-width
nastavuje šířku stránky tak, aby odpovídala šířce obrazovky zařízení (která se bude lišit v závislosti na zařízení).
Část initial-scale=1.0
nastavuje počáteční úroveň přiblížení při prvním načtení stránky prohlížečem.
Zde je příklad webové stránky bez metaznačky viewport a stejné webové stránky s metaznačkou viewport:
Tip: Pokud si tuto stránku prohlížíte pomocí telefonu nebo tabletu, můžete kliknutím na dva odkazy níže vidět rozdíl.
Více o viewportu si můžete přečíst v našem Responsive Web Design – The Viewport Tutorial .
Související stránky
HTML tutoriál: HTML Head
HTML DOM reference: Meta Object
Výchozí nastavení CSS
Žádný.