HTML 07 - Headings

HTML headings are used to define the hierarchy /ˈhaɪərɑːki/ (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 /ˌsʌbˈtɒpɪk/.

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.

  • Heading impact on SEO: A well organized headings helps search engines to undestand the content structure and indexing.
  • Highlighting Important Topics: Using header tags properly keeps the content readable.

Examples of HTML Heading

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

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

In this example we will use CSS font-size and font-weight property to make a heading 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 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).

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

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

  • 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:

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

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

  • Styling Overload: Avoid excessive styling; CSS should handle the aesthetics /iːsˈθetɪks; esˈθetɪks/ , not headings.

 

 HTML 08 - Paragraphs

posted @ 2024-05-13 21:05  emanlee  阅读(4)  评论(0)  编辑  收藏  举报