Prev Next

HTML Headings

HTML headings are used to define the hierarchy and structure of content on a webpage. They range from <h1> (the most important) to <h6> (the least important). Using headings effectively improves readability, accessibility, and search engine optimization (SEO). Headings help both users and search engines understand the organization of information on your page.

Key Topics

Common Heading Levels

Here are some examples of HTML headings. These are single-element examples displayed using pre blocks. Use <h1> for main titles, and <h2> to <h6> for subheadings.

  • <h1>: Main heading, usually the page title. 
    <h1>This is the Main Heading</h1>
  • <h2>: Subheading under the main topic. 
    <h2>This is a Subheading</h2>
  • <h3> to <h6>: Less prominent headings for further subdivisions. 
    <h3>Section Title</h3>
<h4>Sub-Section Title</h4>
<h5>Minor Heading</h5>
<h6>Least Important Heading</h6>

Basic Page Structure Example

Below is a simple HTML page structure demonstrating the use of headings. Since this is a full HTML code demonstration, it is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page with Headings</title>
</head>
<body>
    <h1>Website Title</h1>
    <h2>Introduction</h2>
    <p>This section introduces the main topics of the website.</p>
    <h2>Main Topics</h2>
    <h3>Topic One</h3>
    <p>Details about topic one.</p>
    <h3>Topic Two</h3>
    <p>Details about topic two.</p>
    <h4>Subtopic of Topic Two</h4>
    <p>More in-depth details about a subtopic.</p>
</body>
</html>

Explanation: The <h1> heading is used for the page title, followed by <h2> headings for major sections and <h3> and <h4> for more detailed sections. This hierarchical structure helps readers and search engines understand the content's organization.

Output:

Website Title (large, bold heading)
Introduction (slightly smaller heading)
This section introduces the main topics of the website. (paragraph text)
Main Topics (another heading)
Topic One (sub-heading under Main Topics)
Details about topic one.
Topic Two (sub-heading under Main Topics)
Details about topic two.
Subtopic of Topic Two (an even smaller heading under Topic Two)
More in-depth details about a subtopic.

More Complex Example: Tables

While headings are often used to structure textual content, you can also use them alongside tables or other elements to label sections. This code is also enclosed in a copy code box.

<h2>Data Overview</h2>
<table border="1" style="border-collapse:collapse;">
    <tr>
        <th>Category</th>
        <th>Value</th>
    </tr>
    <tr>
        <td>Sales</td>
        <td>1000</td>
    </tr>
    <tr>
        <td>Customers</td>
        <td>250</td>
    </tr>
</table>

Explanation: The <h2> heading labeled "Data Overview" introduces a table of data. The heading gives context to the table, making it easier to understand what the table represents.

Output:

Data Overview (heading introducing the table)
Category   Value
Sales      1000
Customers  250

Key Takeaways

  • Use <h1> for the most important heading on the page, typically the page title.
  • Employ <h2> through <h6> headings to create a logical hierarchy of content.
  • Proper heading usage improves readability and accessibility.
  • Headings provide structure that benefits both users and search engines.
  • Always use headings in a meaningful, hierarchical order.
Prev Next