HTML <meta> tag usage and use cases

Browser support

All browsers support <meta> tags.

Definition and usage

The <meta> element provides meta-information about the page (meta-information), such as descriptions and keywords for search engines and update frequency.

The <meta> tag is located in the header of the document and does not contain any content. The properties of the <meta> tag define the name/value pairs associated with the document.

The difference between HTML and XHTML

The,<meta> tag does not have an end tag in HTML.

In XHTML, the,<meta> tag must be properly closed.

Tips and Comments:

Note The:<meta> tag is always inside the head element.

Note: Metadata is always passed in pairs in the form of a name/value.

Required Properties

Properties	value	Description
Content	Some_text	Define meta information related to the HTTP-EQUIV or Name property

Optional properties

Properties	value	Description
Http-equiv	Content-type Expires Refresh Set-cookie	Associate the Content property to the HTTP header.
Name	Author Description Keywords Generator Revised Others	Associate the Content property to a name.
Scheme	Some_text	Defines the format used to translate content property values.

examples of common methodsName property

The Name property provides the names in the name/value pairs. Neither HTML nor XHTML tags specify any pre-defined <meta> names. Typically, you are free to use a meaningful name for yourself and the reader of your source document.

"keywords" is a name that is often used. It defines a set of keywords for a document. Some search engines use these keywords to categorize documents when they encounter these keywords.

<meta name= "keywords" content= "html,asp,php,sql" >//a meta tag like this might be useful for indexing into search engines
or document description information
<meta name= "Author" content= "www.cnblogs.com/oospace/" >
<meta name= "Revised" content= "David yang,8/1/07" >
<meta name= "Generator"     content= "Dreamweaver 8.0en" >

Or

<meta name= "viewport" content= "Width=device-width, initial-scale=1"/>//make the current page width equal to the width of the screen, often used to adapt to small screen devices such as mobile phone screen

Or

<meta name= "renderer" content= "WebKit"/>//is often used in multi-core browsers to use the Wekit kernel by default, such as some domestic browsers

If the Name property is not provided, then the names in the name/value pairs take the value of the Http-equiv property.

Http-equiv Property

The Http-equiv property provides a name for a name/value pair. and instructs the server to include a name/value pair in the header of the MIME document to be routed to the browser before sending the actual document.

When the server sends a document to the browser, many name/value pairs are sent first. Although some servers send many of these name/value pairs, all servers must send at least one: content-type:text/html. This tells the browser to be ready to accept an HTML document.

When using the <meta> tag with the Http-equiv property, the server adds a name/value pair to the header of the content sent to the browser. For example, add:

<http-equiv= "CharSet"  content= "iso-8859-1"> <  http-equiv= "Expires"  content= "Dec">

The head that is sent to the browser should contain:

Content-type:text/htmlcharset:iso-8859-1expires:31 DEC 2008

Of course, these fields make sense only if the browser can accept these additional header fields and use them in the appropriate way.

Or

<http-equiv= "Content-type"  Content= "text/html; Charset=utf-8"  />//Setting Document type and encoding method

<meta http-equiv= "x-ua-compatible" content= "IE=12;IE=11;IE=10;IE=9; ie=8; "/>//Set IE browser to use its own kernel, disable compatibility mode <meta http-equiv=" x-ua-compatible "content=" Ie=emulateie12;ie=emulateie11 ; IE=EMULATEIE10;IE=EMULATEIE9;IE=EMULATEIE8 "/>//set IE browser to use its own rendering mode, disable compatibility mode

or

<http-equiv= "Refresh"  content= "5;url=http://www.cnblogs.com/ oospace/"/>//page redirect, 5 seconds after automatically jump to the corresponding link

Content Properties

The Content property provides the value in a name/value pair. The value can be any valid string.

The content property is always used with the Name property or the Http-equiv property.

Scheme attribute

The scheme attribute is used to specify the scheme to be used to translate attribute values. This scenario should be defined in the profiles file specified by the profile property of the

Global Properties

The <meta> tag supports global properties in HTML. That is, commonly used properties

HTML Global Properties

5= the attribute added in HTML5.

Properties	Description
AccessKey	Specifies the shortcut key for activating an element.
Class	Specifies one or more class names for an element (referencing a class in a style sheet).
Contenteditable 5	Specifies whether the element content can be edited.
ContextMenu 5	The context menu for the specified element. The context menu is displayed when the user clicks on an element.
data-* 5	Private custom data that is used to store pages or applications.
Dir	Specifies the text direction of the content in the element.
Draggable 5	Specifies whether the element can be dragged.
Dropzone 5	Specifies whether to copy, move, or link while dragging the data that is being dragged.
Hidden 5	The specified element is still not or is no longer relevant.
Id	The unique ID of the specified element.
Lang	The language that specifies the content of the element.
SpellCheck 5	Specifies whether to check spelling and grammar of elements.
Style	The inline CSS style for the specified element.
TabIndex	Specifies the tab order of the elements.
Title	Specifies additional information about the element.
Translate 5	Specifies whether the element content should be translated.

Above.

HTML <meta> tag usage and use cases