HTML Headings
HTML Headings （HTML标题）
The heading is a title at the head of a page or section of a book. It is very important to have different types of headings to structure the content of the web page. Headings help search engines to understand and index the structure of the web page. （标题是书本页面或章节头部的标题。使用不同类型的标题来构建网页的内容非常重要。标题可帮助搜索引擎理解网页的结构并编制索引。）
Heading Tags
Heading Tags （标题标签）
There are 6 levels of headings in HTML: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
The <h1> - <h6> tags are used to mark headings according to their importance. The <h1> tag stands for the most important heading of the web page and the <h6> stands for the least important and smallest one.
Example of <h1> - <h6> html heading tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Importance of Heading
Importance of Heading （标题的重要性）
HTML headings highlight important topics and the document structure, thus improving user engagement. （- HTML标题突出重要主题和文档结构，从而提高用户参与度。）
Use only one <h1> tag on any web page. The tag must describe what your page is about and also contain a keyword to improve rankings in Google.
Search Engines use headings for indexing the structure and content of the webpage. （-搜索引擎使用标题来索引网页的结构和内容。）
Heading Size
Heading Size （标题大小）
You can change the default size of the headings. Set the size of any heading with the CSS font-size property:
Example of changing the size of the heading with the font-size property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Important Notes
Important Notes （重要提示）
Do not use heading tags to increase the text size or make the text bold. Instead, you should use CSS properties like font-weight and font-size. Remember, search engines use headings to structure the content. （-请勿使用标题标签来增加文字大小或将文字加粗。相反，您应该使用CSS属性，如font-weight和font-size。请记住，搜索引擎使用标题来构建内容。）
Do not skip heading levels. Use the <h1> as the main headings of the webpage, followed by the <h2> headings, then the less important <h3> headings, etc.
Avoid using <h1> more than once on a page.
HTML Horizontal Rules
HTML Horizontal Rules （HTML水平规则）
The <hr> tag defines a thematic change between paragraph-level elements in an HTML page. The <hr> element is used to separate content in an HTML page:
Example of headings separated with the <hr> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>Lorem ipsum is simply dummy text...</p>
<hr>
<h2>This is heading 2</h2>
<p>Lorem ipsum is simply dummy text...</p>
<hr>
<h3>This is heading 2</h3>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>
HTML Head Element
HTML Head Element （HTML头部元素）
The HTML <head> element contains metadata (document title, character set, styles, links, scripts), specific information about the web page that is not displayed to the user.
Metadata provides browsers and search engines with technical information about the web page. （元数据为浏览器和搜索引擎提供有关网页的技术信息。）
Example of the usage of <head> element:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<p>HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>
What is a Header?
What is a Header? （什么是页眉？）
Do not confuse the HTML header tag with an HTML heading tag because headers are a piece of text repeating at the top of the page. The Heading is a title or a subtitle displaying on the webpage. （不要将HTML标题标签与HTML标题标签混淆，因为标题是在页面顶部重复的一段文本。标题是显示在网页上的标题或副标题。）