<meta> analysis

The HTML meta element represents any metadata information that cannot be represented by one of the other HTML meta-related elements (<base>, <link>, <script>,<style> or <title>).

Depending on the attributes set, the kind of metadata can be one of the following:

• If name is set, it is document-level metadata, applying to the whole page.
• If http-equiv is set, it is a pragma directive, i.e. information normally given by the web server about how the web page should be served.
• If charset is set, it is a charset declaration, i.e. the charset used for the serialized form of the webpage.
• If itemprop is set, it is user-defined metadata, transparent for the user-agent as the semantics of the metadata is user-specific.

  meta  always be inside the tag head.

Attributes

• character encoding

<meta charset='utf-8'>

或

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

utf-8 means the language could be English,Chinese,Japanese,Korea and so on.  gb2312 means Simple Chinese .big5 means traditional Chinese.

And first one is recommended for html5 site.

• browser version

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

content="IE=edge,chrome=1": prior to newest IE version or chrome. 

<meta http-equiv="X-UA-Compatible" content="IE=6" />;<!-- IE6 --> 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" ><!-- IE7 --> 

<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- IE8 --> 

<meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--IE newest-->

• SEO related

<meta name="description" content="<150 characters" />

Less than 150 characters to describe the website for being searched.

<meta name="keywords" content="html5, css3, keywords"/>  

keywords to find out the site.

<meta name="author" content="Yvonne" />

The author of the site, which is not neccessory in the head.

• refresh and relocate

<meta http-equiv="Refresh"  contect="5;url=http://www.helloweba.com" />

refresh the page after 5s and link to the website url.

• expire date of site

<meta http-equiv="Expires" contect="Mon,12 May 2016 00:20:00 GMT" />

When expire, user should invoke from server.

• forbid cache localhost

<meta http-equiv="Pragma" contect="no-cache" />

The browser refresh the page every time so that users can't load page without internet.

• viewport screen scale

4.7-5 inch 360px

5.5 inch 400px

iphone6 375px

iphone6 plus 414px

<;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

width is the device-width default 980px. 0<initial-scale<10. minimun-scale: user zoom out mini scale.  maximum-scale: user zoom out max scale.  user-scalable: whether user could zoom out manually. 

• web-App fullscreen

<meta name="apple-mobile-web-app-capable" content="yes" />

• setting status bar and color

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

In condition of web-App fullscreen.

• setting status bar title

<meta name="apple-mobile-web-app-title" content="标题" />

ignore recognize telphone number automatically

<meta content="telephone=no" name="format-detection" />

• ignore recognize email automatically

<meta content="email=no" name="format-detection" />