HTML head tag detailed introduction

There are many tags and elements in the HTML head part, which are related to the browser's rendering of web pages, SEO, etc., and each browser kernel and each domestic browser manufacturer has some of their own tag elements, which causes a lot of differences. In the era of mobile Internet, the head structure and meta elements of the mobile terminal become more important. The purpose of this article is to understand the meaning of each tag and write a head tag that meets your needs. This article is based on Yisi's article and expands on the summary to introduce the meaning and usage scenarios of various tags and elements in the commonly used head.

DOCTYPE

DOCTYPE (Document Type), this declaration is located at the very beginning of the document, before the html tag. This tag tells the browser which HTML or XHTML specification the document uses.

The DTD (Document Type Definition) declaration starts with <!DOCTYPE>, which is case-insensitive. There is nothing in front of it. If there is other content (except spaces), the browser will render the web page in quirks mode under IE. Public DTD, the name format is registration//organization//type tag//language, registration refers to whether the organization is registered by the International Organization for Standardization (ISO), + means yes, - means no. Organization is the name of the organization, such as W3C. The type is generally DTD. A tag specifies a public text description, which is a unique descriptive name for the referenced public text, optionally followed by a version number. The last language is the ISO 639 language identifier of the DTD language, such as EN for English and ZH for Chinese. XHTML 1.0 can declare three DTD types. Respectively represent strict version, transitional version, and frame-based HTML documents.

●HTML 4.01 strict

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >

●HTML 4.01 Transitional

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >

●HTML 4.01 Frameset

XML/HTML CodeCopy content to clipboard

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd" >

●The latest HTML5 introduces a more concise writing method, which is forward and backward compatible and is recommended for use.

XML/HTML CodeCopy content to clipboard

<!doctype html >

The doctype has two main purposes in HTML.

●Verify the validity of documents.

It tells user agents and validators what DTD the document was written in. This action is passive. The browser does not download the DTD and check the validity every time the page is loaded. It is only enabled when the page is manually verified.

●Determine the browser's rendering mode

For actual operation, tell the browser which parsing algorithm to use when reading the document. If it is not written, the browser will parse the code according to its own rules, which may seriously affect the HTML layout. There are three ways for browsers to parse HTML documents.

●Non-weird (standard) mode●Weird mode●Partially weird (near-standard) mode Regarding IE's document mode, browser mode, strict mode, quirks mode, and DOCTYPE tag, you can read Mode in detail? standard! content.

charset

Declare the character encoding used by the document,

XML/HTML CodeCopy content to clipboard

< meta charset = "utf-8" >

Before HTML5, web pages would be written like this:

XML/HTML CodeCopy content to clipboard

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

These two are equivalent, as described in <meta charset='utf-8'> vs <meta http-equiv='Content-Type'>, so it is recommended to use the shorter one that is easier to remember.

The lang attribute

Simplified Chinese

XML/HTML CodeCopy content to clipboard

< html lang = "zh-cmn-Hans" >

Traditional Chinese

XML/HTML CodeCopy content to clipboard

< html lang = "zh-cmn-Hant" >

Why is it lang="zh-cmn-Hans" instead of the usual lang="zh-CN"? Please read: Should the declaration in the page header use lang="zh" or lang="zh-cn"?

Prioritize the latest version of IE and Chrome

XML/HTML CodeCopy content to clipboard

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

360 Using Google Chrome Frame

XML/HTML CodeCopy content to clipboard

< meta name = "renderer" content = "webkit" >

After reading this tag, the 360 browser will immediately switch to the corresponding high-speed core. In addition, for the sake of insurance, add

XML/HTML CodeCopy content to clipboard

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

The effect achieved by writing this way is that if Google Chrome Frame is installed, GCF is used to render the page. If GCF is not installed, the highest version of IE kernel is used for rendering.

Related links: Browser kernel control Meta tag description document

Baidu prohibits transcoding

When you open a web page through Baidu Mobile, Baidu may transcode your web page, take off your clothes, and put a dog-skin plaster advertisement on you. To do this, you can add

XML/HTML CodeCopy content to clipboard

< meta http-equiv = "Cache-Control" content = "no-siteapp" />

Related link: SiteApp Transcoding Statement

SEO optimization section

Page title <title> tag (head required)

XML/HTML CodeCopy content to clipboard

< title > your title </ title >

Page keywords

XML/HTML CodeCopy content to clipboard

< meta name = "keywords" content = "your keywords" >

Page description

XML/HTML CodeCopy content to clipboard

< meta name = "description" content = "your description" >

Define the author of the web page

XML/HTML CodeCopy content to clipboard

< meta name = "author" content = "author,email address" >

Defines how web search engines index web pages. Robotterms is a set of values separated by commas "," and usually has the following values: none, noindex, nofollow, all, index, and follow.

XML/HTML CodeCopy content to clipboard

< meta name = "robots" content = "index,follow" >

Related Link: WEB1038 - Tag contains an invalid value

viewport

The viewport allows the layout to display better on mobile browsers. Usually write

XML/HTML CodeCopy content to clipboard

< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >

width=device-width will cause black edges to appear when opening the page in WebApp full-screen mode after adding it to the home screen on iPhone 5 (http://bigc.at/ios-webapp-viewport-meta.orz)

content parameter:

width viewport width (value/device-width)
height viewport height (value/device-height)
initial-scale initial scaling
maximum-scale maximum zoom ratio
minimum-scale minimum zoom ratio
user-scalable Whether to allow users to zoom (yes/no)
New in minimal-ui iOS 7.1 beta 2, which minimizes the upper and lower status bars when the page is loaded. This is a Boolean value, which can be written directly like this:

XML/HTML CodeCopy content to clipboard

< meta name = "viewport" content = "width=device-width, initial-scale=1, minimal-ui" >

If your website is not responsive, please do not use initial-scale or disable scaling.

XML/HTML CodeCopy content to clipboard

< meta name = "viewport" content = "width=device-width,user-scalable=yes" >

Related link: Non-responsive viewport

To adapt to iPhone 6 and iPhone 6plus, you need to write:

XML/HTML CodeCopy content to clipboard

< meta name = "viewport" content = "width=375" >
< meta name = "viewport" content = "width=414" >

Most 4.7~5-inch Android devices have a viewport width of 360px, but on iPhone 6 it is 375px. Most 5.5-inch Android devices (such as Samsung Note) have a viewport width of 400, but on iPhone 6 plus it is 414px.

iOS devices

Title after adding to the home screen (New in iOS 6)

XML/HTML CodeCopy content to clipboard

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

Whether to enable WebApp full screen mode

XML/HTML CodeCopy content to clipboard

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

Set the background color of the status bar

XML/HTML CodeCopy content to clipboard

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

Only works when "apple-mobile-web-app-capable" content="yes"

content parameter:

default The default value.
black The status bar background is black.
black-translucent The status bar background is black and translucent. If set to default or black, the web page content starts at the bottom of the status bar. If set to black-translucent, the web page content fills the entire screen and the top is blocked by the status bar.

Disable automatic identification of numbers as phone numbers

XML/HTML CodeCopy content to clipboard

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

iOS Icons

rel parameter: apple-touch-icon The image is automatically processed with rounded corners, highlights and other effects. apple-touch-icon-precomposed prohibits the system from automatically adding effects and directly displays the original design. iPhone and iTouch, default 57x57 pixels, must have

Copy code

The code is as follows:

iPad, 72x72 pixels, optional but recommended

Copy code

The code is as follows:

Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended

Copy code

The code is as follows:

Retina iPad, 144x144 pixels, optional but recommended

Copy code

The code is as follows:

The iOS icon size is 180×180 on iPhone 6 plus and 120x120 on iPhone 6. To adapt to iPhone 6 plus, you need to add this paragraph

Copy code

The code is as follows:

iOS Splash Screen

Official documentation: https://developer.apple.com/library/ios/qa/qa1686/_index.html
Reference article: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

The iPad startup screen does not include the status bar area.

iPad vertical screen 768 x 1004 (standard resolution)

Copy code

The code is as follows:

iPad vertical screen 1536x2008 (Retina)

Copy code

The code is as follows:

iPad landscape 1024x748 (standard resolution)

Copy code

The code is as follows:

iPad landscape 2048x1496 (Retina)

Copy code

The code is as follows:

The startup screen of iPhone and iPod touch includes the status bar area.

iPhone/iPod Touch vertical screen 320x480 (standard resolution)

Copy code

The code is as follows:

iPhone/iPod Touch Portrait 640x960 (Retina)

Copy code

The code is as follows:

iPhone 5/iPod Touch 5 Portrait 640x1136 (Retina)

Copy code

The code is as follows:

Add Smart App Banner (iOS 6+ Safari)

Copy code

The code is as follows:

The image size for iPhone 6 is 750×1294, and for iPhone 6 Plus it is 1242×2148.

Copy code

The code is as follows:

Windows 8
Windows 8 tile colors

Copy code

The code is as follows:

Windows 8 Tile Icons

Copy code

The code is as follows:

RSS Subscription

Copy code

The code is as follows:

favicon icon

Copy code

The code is as follows:

For a more detailed introduction to favicon, please refer to https://github.com/audreyr/favicon-cheat-sheet

Mobile meta

XML/HTML CodeCopy content to clipboard

< meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=no" />
< meta name = "apple-mobile-web-app-capable" content = "yes" />
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
< meta name = "format-detection" content = " telephone = no , email = no " />
< meta name = "viewport" content = "width=device-width, initial-scale=1, user-scalable=no" />
< meta name = "apple-mobile-web-app-capable" content = "yes" />
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
< meta name = "format-detection" content = "telphone=no, email=no" />
< meta name = "renderer" content = "webkit" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "HandheldFriendly" content = "true" >
< meta name = "MobileOptimized" content = "320" >
< meta name = "screen-orientation" content = "portrait" >
< meta name = "x5-orientation" content = "portrait" >
< meta name = "full-screen" content = "yes" >
< meta name = "x5-fullscreen" content = "true" >
< meta name = "browsermode" content = "application" >
< meta name = "x5-page-mode" content = "app" >
< meta name = "msapplication-tap-highlight" content = "no" >