How <meta> tags work correctly in HTML

If we press F12 or ctrl+shift+j in the browser, we can open the developer tool and see a lot of <meta> elements in the

• Basic Introduction to <meta> tags
• Attribute enumeration in the <meta> tag
• The name attribute in the <meta> tag applies
• HTTP-EQUIV attribute application in the <meta> tag
• Use of the <meta> tag on the mobile side

Basic Introduction to the first part of the:<meta> label

　The <meta> tag is an important HTML tag in the source code of the HTML page. Meta notes are used to describe the properties of an HTML page document, such as author, date and time, keywords, page refresh. In addition,<meta> tags are used for search engine optimization (SEO). It is located within the

Part II:<meta> attribute enumeration in tags

　　<meta> tag attributes we can be divided into required properties and optional properties.

1. Required attribute: Content property. This property is intended to define meta information related to the HTTP-EQUIV or Name property, where the content is used to search for information and classifications for bots.

2. Optional properties:

• The Name property. This property is primarily used to describe web pages. The value of the Name property can be: Author, description, keywords, generator, and so on
• The Http-equiv property. This property is equivalent to the HTTP header file, which can return some useful information to the browser to help correct and accurate display of the content. The value of the Http-equiv property can have Content-type, expires, refresh, and so on.

Part III:The name attribute in the <meta> tag applies

A keywords (keyword: Tell the browser what your page's keywords are) B description (description: Tell the browser what the main content of your page is)

These two attribute values I put together because they are very similar in function. Because setting these two values can help your homepage to be landed by each big search engine, increase the website visit quantity. The setting of these two property values is therefore particularly important. Because according to the search engine work principle, the search engine will first exclude the robot to automatically retrieve the page keywords and description, and add it to their own database, and then according to the density of keywords to sort the site

We can use it as follows:

12	<meta name="keywords"content="关于meta标签,网页,918之初"><meta name="description"content="HTML中<meta>标签如何正确使用">

Note: The content of keywords is limited to 36 words.

The content of description is limited to 76 words.

It is important to note that name must be used in conjunction with the content property.

　C Robot(Robot Wizard: for high-speed robots which pages need to be indexed and which pages do not need to be indexed)

The value of this property is all, none, Index, NOINDEX, follow, and nofollow. The default is all.

Set to all: The file will be retrieved and the link on the page can be queried;

Set to None: The file will not be retrieved, and the link on the page cannot be queried;

Set to index: The file will be retrieved;

Set to follow: links on the page can be queried;

Set to NOINDEX: The file will not be retrieved, but the link on the page can be queried;

Set to Nofollow: The file will not be retrieved and the link on the page can be queried.

We can use it as follows:

1	<meta name="robot"content="none">

That is, the search robot will not retrieve this page when it retrieves the page automatically.

D author (used to tell the author of the Search Robot Web page)

1	<meta name="author"content="somebody">

　　

Part IV:<meta> tags in the http-equiv attribute application

A.content-type (document content type: Used to set the document's type and character set)

This is the most common set of meta notes, in the production of Web pages, we can see in plain HTML code is the language of your Web page, when the browser access to your Web page, the browser will be based on this to identify and set the corresponding, otherwise, the browser will use the default setting method.

1	<meta http-equiv="content-type"content="text/html; charset=UTF-8">

B.expires (term: can be used to set the expiration date of the page)

Once the page expires, it must be refreshed on the server and cannot be retrieved from the cache. It is important to note that the time set must be in GMT format.

1	<meta http-equiv="expires"content="Fri,12 Jan 2001 15:15:15 GMT">

If you set the browser page in the browser to get from a page in the local cache, then when browsing, it will only be fetched from the local cache until the time set in the meta expires and the browser will get the new page.

C.pragma (Cashe mode: whether to access Web content from the cache)

1	<meta http-equiv="pragma"content="no-cache">

This line of code means that the page is not fetched from the cache, so the visitor will not be able to work offline.

D.refresh (refresh: Wait for a certain time to automatically refresh or jump to another URL)

1	<meta http-equiv="refresh"content="1; url=https://www.baidu.com"/>

Part V the use of:<meta> tags in the mobile side

In recent years, with the rise of mobile, we need more and more dedicated web design for mobile, below, I will introduce some of the mobile layout in the use of <meta> tags.

The value of the viewport of the 1.name property (scaling of the mobile screen)

Viewport is the visible area, that is, all the toolbars, the status bar, the scroll bar, and so on we look at the page area. Generally we can manipulate the attributes have width, height, initial-scale, Minimum-scale, Maxmum-scale, user-scalable.

Examples are as follows:

　　

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

That is, force the width of the document and the device to remain 1:1, and the document's percentage and maximum ratio are 1.0. Use User-scalable=no to define that users cannot be manually scaled to make the page fixed.

　　

The format-detection value of the 2.name property.

This property allows us to disable the automatic identification of telephones and mailboxes. Examples are as follows:

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

This way, when the device browses the page, the phone function is not enabled for the number (note that different devices may be interpreted differently), ignoring the number on the page as the phone number. The same is true for mailboxes.

Apple-mobile-web-app-capable value of the 3.name attribute (Web App support is enabled on the website)

　　

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

Description: 1. Web App support is open on the website

2. This meta can be seen as "Apple device Web application xx", meaning that meta is specifically defined for Web applications.

The Apple-mobile-web-app-status-bar-style value of the 4.name property (changes the color of the top status bar)

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

Description: 1. The color of the status bar in the Web App is black;

2. Default (white), can be defined as black (dark) and black-translucent (gray translucent);

　　

5.name attribute settings author name and contact information

1	<meta name="author"contect="zzw, [email protected]"/>

　　

　　

　　

How <meta> tags work correctly in HTML