Detailed explanation of meta tags and usage in html

I won’t waste any more time talking nonsense, let’s get started with today’s topic.

Meta tags in Html

1. Meta tag meaning

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

The <meta> tag is placed in the head of the document and contains no content.

The attributes of the <meta> tag define name/value pairs associated with the document.

2. Common attributes in meta

1. charset

Description: Specifies the character encoding of HTML documents.

Usage: <meta charset="UTF-8">

2. Viewport

Description: This is the visible area of ​​the user's web page. As we all know, the screens of mobile devices are generally much smaller than those of PCs. Webkit browsers will map a larger "virtual" window to the screen of the mobile device. The default virtual window is 980 pixels wide (the standard width of most websites at present), and then it is scaled according to a certain ratio (3:1 or 2:1).

That is to say, when we load a normal web page, webkit will first load the web page according to the browser standard of 980 pixels, and then reduce it to a width of 490 pixels. Note that this shrinking is a global shrinking, that is, all elements on the page will shrink.

usage:

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

(1) width

Width controls the size of the viewport. Generally, it is set to device-width for adaptive viewing.

(2) initial-scale

initial-scale: The initial zoom ratio, that is, the zoom ratio when the page is loaded for the first time.

(3) Maximum-scale

maximum-scale Maximum zoom. This is the maximum zoom level allowed. This is also a floating point value that indicates the maximum multiplier of the page size compared to the screen size.

(4) minimum-scale

minimum-scale: The minimum scale to which the user is allowed to zoom. Similar to maximum-scale in usage.

(5) user-scalable

user-scalable User-adjustable scaling. That is, whether the user can change the page zoom level. If set to yes, the user is allowed to change it, otherwise no.

3. keywords

Description: A list of keywords provided to search engines. Each keyword is separated by an English comma “,”. Specify keywords that the search engine uses to improve the quality of your searches.

Usage: <Meta name="Keywords" Content="Keyword 1, Keyword 2, Keyword 3, Keyword 4, ...">

4. description

Description: Description is used to tell search engines the main content of your website.

Usage ：<Meta name="Description" Content="你網頁的簡述">

5. format-detection

Note: format-detection is used to detect some formats in HTML.

Usage: The format-detection attribute of meta mainly has the following settings:

 meta name="format-detection" content="telephone=no"
    meta name="format-detection" content="email=no"
    meta name="format-detection" content="adress=no"

You can also write: meta name="format-detection" content="telephone=no,email=no,adress=no"


(1) Telephone

You clearly wrote a string of numbers without adding a link style, but the iPhone will automatically add a link style to your text, and will automatically dial when you click on the number! How do I remove this dial-up link? Now it’s time for our meta to come into play. The code is as follows:

telephone=no disables the conversion of numbers into dial-up links!
Telephone=yes turns on the conversion of numbers into dial-up links. To turn on the conversion function, you don’t need to write this meta. It is turned on by default!

(2) Email

Tell the device not to recognize the email address and not to send automatically after clicking

email=no is not allowed as an email address!
email=yes will enable the text to be the email address by default. You don’t need to write this meta, it is enabled by default!

(3) adress

adress=noForbidden to jump to the map!
adress=yes turns on the function of jumping directly to the map by clicking on the address. It is turned on by default!

6. apple-touch-fullscreen

Note: After adding to the home screen, it will be displayed in full screen.

Usage: <meta name="apple-touch-fullscreen" content="yes">

7. apple-mobile-web-app-capable

Description: The function is to delete the default Apple toolbar and menu bar. content has two values: "yes" and "no". When we need to display the toolbar and menu bar, we don't need to add this line of meta. It is displayed by default.

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

8. App-Config

Description: Keep history and animation effects

Usage: <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

9. msapplication-tap-highlight

Description: Click without highlight (highlight)

Usage: <meta name="msapplication-tap-highlight" content="no">

Summarize

The above is a detailed introduction to the meta tags and usage in HTML. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!