What’s in the head tag?

In every HTML document, there is an indispensable tag: , which acts as a container containing tags that describe information (metadata) about the HTML document itself. These tags are not usually displayed on the page, but are mostly for browsers and search engines to see.

The tags that can be used in are:

, , ,

This section describes meta information labels

<title>

The title of the definition document, displayed in a browser title bar or TAB, generally summarizes the entire content of the web page.

<base>

Provides a basis for all relative urls on the page. There can be only one tag in a document.

At present I only observed “Taobao.com” used this label.

<link>

Specifies the relationship between external resources and the current document, often in linked stylesheets, as shown below:

<link rel="stylesheet" href="xxx.css" type="text/css">
Copy the code

Of course, there are many other functions:

  1. For example, for SEO, mainly for search engines to see:
<link rel="canonical" href="...">
Copy the code

In cases where there are often multiple urls pointing to the same page, the tags tell the search engine what the main URL of the page is so that the search engine can keep the main page and eliminate other duplicate pages.

  1. Providing RSS feeds:
<link rel="alternate" type="application/rss+xml" title="RSS" href="...">
Copy the code

In addition to being readable by search engines, these tags are also recognized by many browser plugins.

  1. Representing a page icon:
<link rel="icon" href="https://xxx.png">
Copy the code

Most browsers will read the link’s resources and display them on the page.

  1. Providing preprocessing of pages:
<link rel="dns-prefetch" href="//xxx.com">
Copy the code

Do a DNS query for a domain name in advance. Mandatory domain name read-ahead can be useful in some cases.

For example, on the home page of a website, it is mandatory to pre-resolve frequently referenced domain names throughout the site, even if they are not used on the home page itself. While the performance of the home page may not be affected, it will improve overall site performance.

<style>

Contains style information for the document.

<meta>

Charset attribute

<meta charset="UTF-8">
Copy the code

Starting with HTML5, this is the recommended way to declare the character encoding used in the current document, and is recommended first in the .

HTTP – equiv properties

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

In HTML4, this code was used to declare character sets, but is no longer recommended.

In addition to content-Type, there are several other values:

Content-language (obsolete), set-cookie (obsolete), default-style, refresh, and Content-security-policy

Because it is not commonly used, so I will not introduce one, but also very easy to understand, interested can click here to understand.

The name attribute

In fact, tags can be defined freely, as long as the reader and writer agree on the format of name and content. Here’s an example:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
Copy the code

This usage is not in the HTML standard, but it is the de facto standard for mobile development. Here’s an explanation of what’s in content:

  • Width: the page width, which can be a positive integer; You can also use a string “device-width” to indicate the same width as the device.
  • Height: the page height, which can be a positive integer; You can also use a string “device-height” to indicate the same height as the device.
  • Initial-scale: indicates the initial scaling scale.
  • Minimum-scale: indicates the minimum scale.
  • Maximum-scale: indicates the maximum scaling ratio.
  • User-scalable: Whether to allow users to scale.

The name attribute has a number of values besides viewport:

Application-name, author, description, generator, keywords, referrer, robots, etc.

Similarly, not one introduction, interested can click here to understand.

<script>

Use to embed or reference executable scripts. Let’s look at some common global attributes for script tags:

  • async

    Cause the browser to use another thread to download the script without blocking the page rendering. When the script is downloaded, the browser pauses rendering, executes the script, and resumes rendering the page.

    Async cannot guarantee the execution order of scripts. The scripts downloaded first will be executed first.

  • defer

    It also causes the browser to download the script in parallel, but instead of executing it immediately, it waits until the DOM has loaded (that is, just after reading the
    tag) before executing the script.

    Defer ensures that the scripts are executed in the order in which they appear on the page.

  • src

    Defines the address that references an external script, specifying that there should be no more embedded scripts in the script tag for this property. If the script file uses non-English characters, the character encoding should also be indicated. Such as:

    <script charset="utf-8" src="https://www.example.com/script.js"></script>
Copy the code

  • type

    The default is text/javascript

To learn more about the

<noscript>

If the script type on the page is not supported or the script is currently turned off in the browser, then the alternative content is defined here when the script is not executed.

conclusion

This article ends here, but there is still much more to be said about link and meta tags. Many related tags have special requirements and are only used in certain situations. For example, mobile development uses many tags that are not needed on PC.

Of course, the usual use is mainly based on demand, as I currently, only slightly used some of the viewport and SEO related tags.

In view of this, I recommend a good way to learn, is to go to each major website to check their head tag, if you have not seen the search, it will become familiar quickly.

The websites I have seen include taobao.com, Alibaba, JINGdong, Netease Yanxuan, Qidian.com, etc.

(after)