First, what is<head>Element?

The head element is a container that contains everything you want to include in your HTML page but don’t want to show to the user. These include keywords and page descriptions that you want to appear in search results, CSS styles, character set declarations, and more.

The element is used to hold metadata for the page, the content of which is no longer visible on the page

Example:

<head>
    <meta charset="utf-8">
</head>
Copy the code

The above code indicates that the page is encoded using the UTF-8 character set

Second, some metadata

Document title and content title

We can use the

tag to add document titles to documents, and use < H1 >-

to add level 1 to level 6 content titles to document content

Example:

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "> <title> Example </title> </head> <body> <h1> < h3 > 3 title < / h3 > < h4 > level 4 title < / h4 > < h5 > 5 title < / h5 > < h6 > six levels of headings < h6 > < / body > < / HTML >Copy the code

Output:

When you bookmark, you will see the contents of

become the original book signature.

Set the document character encoding

Using the
element, we can specify the character encoding of the document (here we use the GBK character set as an example), but some character sets may not cover all characters in the document, which can lead to garbled characters.

For example, if you use the GBK character set and the document contains Tibetan.

<! DOCTYPE HTML > < HTML > < head > < meta charset = "GBK" > < title > sample document < / title > < / head > < body > < p > བ ཀ ྲ ་ ཤ ི ས ་ བ ད ེ ་ ལ ེ ག ས ། < / p > < / body > </html>Copy the code

Output:

Tibetan cannot be displayed when you use the UTF-8 character set, which contains most of the characters in everyday use

Use the UTF-8 character set whenever possible

Set the author and description of the document

Using
elements with name and content attributes, we can set the author and description of the document

  • nameSpecifies the type of the element
  • contentIt gives the actual content

Example:

<meta name="author" content=" "> <meta name="description" content=" ">Copy the code

The above two pieces of code specify the author, summarize the document information, and facilitate search engine retrieval,

It’s called SEO (Search Engine Optimization)

Add custom ICONS to your page

  1. Save the custom icon to the site root directory
  2. Add the following code to<head>In the

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

hrefThe resolution of ICONS in links is usually 16×16.gifor.pngFormat save, however.icoCan provide greater compatibility

When a favicon.ico file exists in the root directory, most browsers will automatically detect and use it

The “shortcut Icon” string will be recognized by most standards-compliant browsers as listing possible keywords (” shortcut “will be ignored and only” icon “will apply); Internet Explorer will use it as a separate name (” Shortcut icon “). The result is that all browsers can understand this code.

Example:

<! DOCTYPE HTML > < HTML > <head> <meta Charset =" utF-8 "> <title> Example document </title> <link rel="shortcut icon" href="juejin.png" Type = "image/x - icon" > < / head > < body > < h1 > example < / h1 > < / body > < / HTML >Copy the code

Effect:

Document language setting

SEO can be done better by setting the language of the HTML document, such as setting the main language in the HTML start tag

<html lang="en">
Copy the code

The above code sets the main language of the document to English, you can also set other languages, such aszh-HansStands for Simplified Chinese

We can also use the element to set the language of parts of the document, such as Japanese

Rice is in the air with her touch. </span>.</p>Copy the code

Apply CSS and JavaScript

use<ling>and<script>Elements can point to CSS and JS documents

  • <link>Elements are often at the head of a document. The link element has two attributes,rel="stylesheet"Indicates that this is a style sheet for the document, while hrefContains the path to the stylesheet file:
<link rel="stylesheet" href="css-file.css">
Copy the code
  • <script>Place it at the end of the document (in</body>Z) before the tag is a better choice to ensure that the browser has parsed the HTML content before loading the script (the browser will report an error if the script loads an element that doesn’t exist).
<script src="js-file.js"></script>
Copy the code

<script>Is not an empty element, so you need a closing tag.

You can also choose to put scripts in<script>Element instead of pointing to an external script file.

Example:

<! DOCTYPE HTML > < HTML lang="zh-Hans"> <head> <meta charset=" UTF-8 "> <title> Meta name="description" <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="05.css"> The < / head > < body > < h1 > metadata example < / h1 > < script SRC = "05. Js" > < / script > < / body > < / HTML >Copy the code

summary

Through some examples and demonstrations, we learned how to set some metadata in the element, such as setting the document title, the document author, and the document overview. On the one hand, this metadata sets the way the data in the document is described, on the other hand, it helps search engine optimization, and plays an indispensable role in HTML documents.