HTML Headings

HTML Headings are defined using the <h1> to <h6> tags.

<h1> defines the most important heading (highest level), while <h6> defines the least important heading (lowest level).

<h1>This is a Level 1 Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>

Importance of Headings

Headings are not just for making text larger or bold; they play a crucial structural role in HTML.

1. Building Document Structure: Browsers, search engine crawlers, and screen readers use headings to understand and navigate a page's structure. Think of headings as the outline of a book or paper: <h1> is the main title, <h2> is for major chapter headings, <h3> is for subsection headings, and so on.

2. Search Engine Optimization (SEO): Search engines (like Google) use headings to index the structure and content of your web page. A well-structured page with proper heading usage is easier for search engines to understand, potentially resulting in better rankings.

3. Accessibility: Visually impaired users rely on screen readers to "read" web pages. These software programs allow users to quickly jump to different parts of the page via headings, just as we quickly scan headings to skim an article. Misusing headings (e.g., using them just for styling) can severely impact the experience for these users.

How to Use Headings Correctly

• <h1> is the main heading: Each page should have only one <h1> tag, and it should accurately summarize the core content of the entire page, similar to a newspaper's front-page headline.

• Use in hierarchical order: Headings should be used in order from <h1> to <h6>, without skipping levels. For example, an <h2> should be followed by an <h3>, not directly by an <h4>.

• Don't use headings for styling: If you just want to make text larger or bold, you should use CSS properties like font-size or font-weight instead of misusing heading tags. The fundamental purpose of headings is structure, not styling.

Default Styles

By default, browsers apply some styles to heading tags. Typically, <h1> has the largest font size, decreasing progressively, with <h6> having the smallest. All headings default to bold and have some margin above and below them.

You can always use CSS to override these default styles, changing the size, color, font, etc. of headings, but their semantic meaning in the HTML structure remains unchanged.

Example:

/* Customize heading styles in CSS */
h1 {
    color: navy;
    font-family: Arial, sans-serif;
}

h2 {
    color: darkred;
}