HTML <meta> etikett
Definition och användning
<meta> Etiketten definierar metadata om HTML-dokumentet. Metadata är data om data (information).
<meta> Etiketten är alltid placerad <head> element Inuti, används ofta för att specificera teckenuppsättning, sidbeskrivning, nyckelord, dokumentförfattare och viewport-inställningar:
Metadata visas inte på sidan, men kan tolkas av maskiner.
Webbläsare (hur innehållet visas eller sidan laddas om), sökmotorer (nyckelord) och andra nätverkstjänster använder metadata.
Tips:meta-element har flera olika användningsområden och flera meta-element kan finnas i ett HTML-dokument.
Tips:Genom <meta> Etikett, det finns ett sätt för webbdesigners att styra viewport (dvs. det område som användaren ser på webbsidan) (se exempel nedan "Ställ in viewport").
Observera:Varje meta-element kan användas för endast ett ändamål. Om du vill använda flera egenskaper, bör du lägga till flera meta-element i head-elementet.
Se också:
HTML tutorial:HTML huvud
HTML DOM referenshandbok:Meta-objekt
Exempel
<head> <meta charset="UTF-8"> <meta name="description" content="Gratis webbtutorial"> <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>
Attribut
| Attribut | Värde | Beskrivning |
|---|---|---|
| charset | Teckenuppsättning | Specificerar teckenuppsättningen för HTML-dokumentet. |
| content | Text | Specificerar värden som är associerade med http-equiv eller name-attribut. |
| http-equiv |
|
Tillhandahåll HTTP-huvud för information/värde för content-attributet. |
| name |
|
bestämmer namnet på metadata. |
globala attribut
<meta> taggar stöder Globala attribut i HTML.
meta-elementen har tre typiska användningsfall:
- Specificera namn/värde metadata par
- Deklarera teckenkodning
- Simulera HTTP-huvudelement
1: Specificera olika namn/värde metadata par
meta-elementet kan definiera metadata med namn/värdepar, vilket kräver att man använder name- och content-attributen.
Definiera nyckelord för sökmotorer:
<meta name="keywords" content="HTML, CSS, JavaScript">
Definiera en beskrivning av webbsidan:
<meta name="description" content="Free Web tutorials for HTML and CSS">
Definiera sidans författare:
<meta name="author" content="John Doe">
Ställ in visningsområdet för att förbättra webbplatsens utseende på olika enheter:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2: Deklarera teckenkodning
Använd charset-attributet för att deklarera att sidan använder UTF-8-teckenkodning:
<meta charset="UTF-8">
3: Simulera HTTP-huvudelement
Använd http-equiv-attributet och content-attributet för att uppdatera dokumentet var 30 sekund:
<meta http-equiv="refresh" content="30">
Förändringar i HTML5
charset-attributet är ett nytt tillägg i HTML5.
http-equiv-attributet i HTML4 kan ha flera olika värden, medan det i HTML5 bara kan använda de värden som nämns på sidan.
scheme-attributet i HTML4 används inte längre i HTML5.
Dessutom används inte längre meta-elementet för att specificera språket som används på webbsidan.
ställa in visningsområdet
HTML5 introducerade ett sätt som gör det möjligt för webbdesignare att <meta> taggar för att kontrollera visningsområdet.
Du bör inkludera följande <meta> Visningsområde element:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Det ger webbläsaren instruktioner om hur man kontrollerar sidans storlek och skalningsproportioner.
width=device-width Delar sätter sidans bredd till att följa skärmen på enheten (beroende på enhet).
När webbläsaren först laddar sidaninitial-scale=1.0 Delvis inställning av initial skalnivå.
Nedan visas exempel på webbsidor utan viewport meta-tag och med viewport meta-tag.
Tips:Om du surfar på denna sida med en mobil eller surfplatta kan du klicka på de två länkarna nedan för att se skillnaderna.
Standard CSS-inställningar
Inget.
Webbläsarstöd
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Stöd | Stöd | Stöd | Stöd | Stöd |
