HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
Example
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
HTML Headings Explained
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading, while <h6> defines the least important one.
Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Note: Browsers automatically add some white space (a margin) before and after a heading.
Why Headings Are Important
Search engines use headings to understand the structure and content of your web pages. Correctly used headings are crucial for on-page SEO.
Users also scan pages by their headings to quickly find the content they are looking for. It is important to use headings to create a clear document structure.
Use <h1> for the main heading of your page, followed by <h2> for subheadings, then the less important <h3>, and so on. This creates a logical hierarchy.
Note: Use HTML headings for headings only. Do not use headings just to make text BIG or bold. Use other tags like <strong> for that.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:
Example
<h1 style="font-size:60px;">Bigger Heading 1</h1>Test Yourself with an Exercise
Which of the following headers is the largest and most important header?
HTML Tag Reference
A brief reference for the tags discussed in this chapter.
| Tag | Description |
|---|---|
<html> | Defines the root of an HTML document |
<body> | Defines the document's body |
<h1> to <h6> | Defines HTML headings |