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-widthnastavuje šíř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.0nastavuje 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ý.