Html 简明教程

HTML - Headings

HTML 标题用于定义网页上的内容的层次结构（级别）和结构。它们创建了一个可视化层次结构，级别最高的标题是 h1，表示最重要的内容或主标题，低级别的标题如 h2、h3、h4 等，表示子主题。

HTML headings are used to define the hierarchy (levels) and structure of content on a web page. They create a visual hierarchy, with the highest level heading which is h1 indicating the most important content or the main heading, and lower-level headings like h2, h3, h4, etc. for subtopics.

Reason to use Headings

标题对于构建内容和提供新的部分或主题开始时的清晰视觉指示至关重要。正确的标题结构可以增强网站的可读性和用户体验，确保信息的组织性和易于浏览。

Headings are crucial for structuring content and providing a clear visual indication of the beginning of new sections or topics. Properly structured headings enhance readability and user experience on websites, ensuring that information is organized and easy to navigate.

  1. Heading impact on SEO: A well organized headings helps search engines to undestand the content structure and indexing.

  2. Highlighting Important Topics: Using header tags properly keeps the content readable.

尝试单击图标运行按钮，以运行以下 HTML 代码并查看输出。

Try to click the icon run button to run the following HTML code to see the output.

Examples of HTML Heading

在这些示例中，我们将看到使用所有标题标记来创建标题，并使用 CSS 将普通文本转换为标题。

In these examples we will see the usage of all the header tags to create a heading and will use CSS to convert a normal text into a heading.

Heading using h1-h6 tags

在此示例中，我们将使用标题标签（h1 至 h6），它们中的每一个对内容具有不同的大小和权重。

In this example we will use the heading tags (h1 to h6), each one of them has different size and weight for the content.

<!DOCTYPE html>
<html>
<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>
   <h5>This is heading 6</h5>
</body>
</html>

Heading using CSS properties

在此示例中，我们将使用 CSS * font-size* 和 * font-weight* 属性，从段落元素制作标题元素。

In this example we will use CSS font-size and font-weight property to make a headeing element from a paragraph element.

<!DOCTYPE html>
<html>
<head>
    <style>
    p{
        font-size: 24px;
        font-weight: bold;
    }
    </style>
</head>
<body>
    <p>Tutorialspoint</p>
    <p>Simply Easy Learning</p>
</body>

</html>

HTML Heading Tags

HTML 标题是通过使用 * <h1> to <h6> tags* 创建的。标题层次结构决定内容的重要程度，并有助于为用户和搜索引擎创建清晰的信息流。

HTML Heading is created by using using <h1> to <h6> tags. The heading hierarchy determines the importance of content and aids in creating a clear information flow for both users and search engines.

Hierarchical Structure of Heading Tags

以下是标题标签层次结构的列表（从最重要的到最不重要的）。

Below is the list according to the hierarchy of the heading tags (most to least significant).

  1. HTML <h1> Tag: The top-level heading denotes the main topic or title of the entire page.

  2. HTML <h2> Tag: Subheadings under <h1> represent major sections related to the main topic. They provide a more specific context to the content.

  3. HTML <h3> to <h6> Tags: These tags are used for further subsections or nested content within <h2> headings. They offer a deeper level of hierarchy for organizing content within specific sections.

Mistakes to be avoided

在使用标题标签的时候确保避免以下错误：

Make sure we avoid the following mistakes while using the heading tag:

  1. Skipping Levels: Always follow the proper hierarchy (h1, h2, h3, etc.). Don’t skip levels.

  2. Overusing h1: Reserve h1 for the main title; don’t use it multiple times on a page.

  3. Styling Overload: Avoid excessive styling; CSS should handle the aesthetics, not headings.