HTML head structure

HTML head structure

The following introduces the commonly used head structure, as well as the meaning and usage scenarios of each tag and element (this article is based on the article of Yisi Da Shen and is an expanded summary).

Head structure of padding.me

Copy code
The code is as follows:

<!DOCTYPE HTML>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta name="keywords" content="PaddingMe,front-end,front-end,front-end engineer,web development engineer,HTML,CSS,JavaScript,HTML5,CSS3,git,Github">
<meta name="description" content="PaddingMe - he is a front-end developer.">
<meta name="robots" content="index,follow">
<meta name="author" content="PaddingMe,[email protected]"></p> <p> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta></p> <p> <meta http-equiv="Cache-Control" content="no-siteapp"></p> <p> <title>PaddingMe</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"></p> <p> <link rel="author" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">
<link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /></p> <p> <link rel="stylesheet" href="/css/screen.css">
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/social.css">
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />
</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 turn on quirks mode to render the web page under IE. Public DTD, the name format is "registered//organization//type tag//language", "registered" indicates whether the organization is registered by the International Organization for Standardization (ISO), + indicates yes, - indicates no. "Organization" is the name of the organization, such as W3C; "Type" is generally DTD; "Tag" is the specified public text description, that is, the unique descriptive name of the referenced public text, which may be followed by a version number. Finally, "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 types of DTDs. Respectively represent strict version, transitional version, and frame-based HTML documents.
•
HTML 4.01 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

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

•
HTML 4.01 Frameset
<!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.
<!doctype html>

The doctype in HTML has two main purposes.
•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.
• Determines 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-quirks (standard) mode
◦Quirks Mode
◦ Some weird (almost standard) modes
Regarding IE browser's document mode, browser mode, strict mode, quirks mode, DOCTYPE tag, you can read the mode in detail? standard! , and the box model.

charset

Declare the character encoding used by the document,

Copy code
The code is as follows:

<meta charset='utf-8'>

Before HTML5, web pages would be written like this:

Copy code
The code is as follows:

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

These two are equivalent, as described in detail at: http://stackoverflow.com/questions/4696499/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
<html lang="zh-cmn-Hans"> <!-- A more standard way to write the lang attribute<http://zhi.hu/XyIa> -->

Traditional Chinese
<html lang="zh-cmn-Hant"> <!-- A more standard way to write the lang attribute<http://zhi.hu/XyIa> -->

Region codes are rarely needed, usually to emphasize differences in Chinese usage in different regions, for example:

Copy code
The code is as follows:

<p lang="zh-cmn-Hans">
<strong lang="zh-cmn-Hans-CN">Pineapple</strong> and <strong lang="zh-cmn-Hant-TW">Pineapple</strong> are actually the same fruit. The name is different in mainland China and Taiwan, and it is also different in Singapore and Malaysia. It is called <strong lang="zh-cmn-Hans-SG">pineapple</strong>.
</p>

For more information, please visit http://zhi.hu/XyIa

Prioritize the latest version of IE and Chrome


Copy code
The code is as follows:

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

360 Using Google Chrome Frame


Copy code
The code is as follows:

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

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


Copy code
The code is as follows:

<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
<meta http-equiv="Cache-Control" content="no-siteapp" />

Related link: SiteApp transcoding statement

SEO optimization section
•
Page title <title> tag (required in the head)
<title>your title</title>

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

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

•
Define the author of the web page
<meta name="author" content="author,email address">

•
Defines the search engine indexing method for web pages. Robotterms is a set of values ​​separated by English commas "," and usually has the following values: none, noindex, nofollow, all, index and follow.
<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
<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 ratio
•maximum-scale Maximum scaling ratio
•minimum-scale minimum zoom ratio
•user-scalable Whether to allow user scaling (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:
<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.
<meta name="viewport" content="width=device-width,user-scalable=yes">

Related link: Non-responsive viewport

iOS devices

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


Copy code
The code is as follows:

<meta name="apple-mobile-web-app-title" content="Title"> <!-- Title after adding to the home screen (new in iOS 6) -->

Whether to enable WebApp full screen mode


Copy code
The code is as follows:

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- Whether to enable WebApp full screen mode -->

Set the background color of the status bar


Copy code
The code is as follows:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <!-- Set the background color of the status bar. Only effective when `"apple-mobile-web-app-capable" content="yes"` -->

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

content parameter:
•default 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
<meta name="format-detection" content="telephone=no" /> <!-- Disable automatic identification of numbers as phone numbers-->

iOS Icons

rel parameter:
The apple-touch-icon 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
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone and iTouch, default 57x57 pixels, required -->

iPad, 72x72 pixels, optional but recommended
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad, 72x72 pixels, optional but recommended -->

Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone and Retina iTouch, 114x114 pixels, optional but recommended -->

Retina iPad, 144x144 pixels, optional but recommended
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad, 144x144 pixels, optional but recommended -->

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:

<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad vertical screen 768 x 1004 (standard resolution) -->

iPad vertical screen 1536x2008 (Retina)


Copy code
The code is as follows:

<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad vertical screen 1536x2008 (Retina) -->

iPad landscape 1024x748 (standard resolution)


Copy code
The code is as follows:

<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad landscape 1024x748 (standard resolution) -->

iPad landscape 2048x1496 (Retina)


Copy code
The code is as follows:

<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad landscape 2048x1496 (Retina) -->

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

iPhone/iPod Touch vertical screen 320x480 (standard resolution)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- iPhone/iPod Touch vertical screen 320x480 (standard resolution) -->

iPhone/iPod Touch Portrait 640x960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch Portrait 640x960 (Retina) -->

iPhone 5/iPod Touch 5 Portrait 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 Portrait 640x1136 (Retina) -->

Add Smart App Banner (iOS 6+ Safari)
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- Add Smart App Banner (iOS 6+ Safari) -->

Windows 8

Windows 8 tile colors


Copy code
The code is as follows:

<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 tile color -->

Windows 8 Tile Icons


Copy code
The code is as follows:

<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 tile icon -->

RSS Subscription
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- Add RSS subscription -->

favicon icon
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- Add favicon icon -->

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

Mobile meta


Copy code
The code is as follows:

<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" /><!-- Delete Apple's default toolbar and menu bar-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- Set the color of Apple toolbar -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- Ignore the numbers in the page as phone numbers, ignore email recognition-->
<!-- Enable 360 ​​browser's extreme speed mode (webkit) -->
<meta name="renderer" content="webkit">
<!-- Avoid IE using compatibility mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Optimized for handheld devices, mainly for some old browsers that do not recognize viewport, such as BlackBerry-->
<meta name="HandheldFriendly" content="true">
<!-- Microsoft's old browser -->
<meta name="MobileOptimized" content="320">
<!-- uc forces vertical screen-->
<meta name="screen-orientation" content="portrait">
<!-- QQ forced vertical screen -->
<meta name="x5-orientation" content="portrait">
<!-- UC forced full screen -->
<meta name="full-screen" content="yes">
<!-- QQ forced full screen -->
<meta name="x5-fullscreen" content="true">
<!-- UC application mode -->
<meta name="browsermode" content="application">
<!-- QQ application mode -->
<meta name="x5-page-mode" content="app">
<!-- No highlight when clicking on windows phone -->
<meta name="msapplication-tap-highlight" content="no">
<!-- Adapt to mobile end -->

Shared by toobug.

More meta tag references
•COMPLETE LIST OF HTML META TAGS
•18 Meta Tags Every Webpage Should Have in 2013

Reference articles:
•https://github.com/yisibl/blog/issues/1
• https://gist.github.com/paddingme/6182708733917ae36331
• http://amazeui.org/css/
•http://www.douban.com/note/170560091/

<<:  An article teaches you how to use Vue's watch listener

>>:  Nginx routing forwarding and reverse proxy location configuration implementation

Recommend

JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)

This article shares the specific code of JavaScri...

Various ways to achieve the hollowing effect of CSS3 mask layer

This article introduces 4 methods to achieve mask...

Detailed explanation of MySQL EXPLAIN output columns

1. Introduction The EXPLAIN statement provides in...

Solution to running out of MySQL's auto-increment ID (primary key)

There are many types of auto-increment IDs used i...

Various types of jQuery web page verification code plug-in code examples

html <!DOCTYPE html> <html lang="en...

How to get the size of a Linux system directory using the du command

Anyone who has used the Linux system should know ...

Key knowledge summary of Vue development guide

Table of contents Overview 0. JavaScript and Web ...

JavaScript two pictures to understand the prototype chain

Table of contents 1. Prototype Relationship 2. Pr...

js to achieve simulated shopping mall case

Friends who are learning HTML, CSS and JS front-e...

React new version life cycle hook function and usage detailed explanation

Compared with the old life cycle Three hooks are ...

Detailed steps to install mysql 8.0.18-winx64 on win10

1. First go to the official website to download t...

Implementation steps for docker-compose to deploy etcd cluster

Table of contents Write docker-compose.yml Run do...

Use a few interview questions to look at the JavaScript execution mechanism

Table of contents Previous words Synchronous and ...

Nginx configuration based on multiple domain names, ports, IP virtual hosts

1. Type introduction 1.1 Domain-based virtual hos...

How to use multi-core CPU to speed up your Linux commands (GNU Parallel)

Have you ever had the need to compute a very larg...