HTML Headings

HTML headings are used to define the headings of a webpage. There are six levels of headings, from <h1> to <h6>, with <h1> being the highest (or most important) level and <h6> being the lowest (or least important) level.

Syntax

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

Examples

<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>
<h4>This is an H4 heading</h4>
<h5>This is an H5 heading</h5>
<h6>This is an H6 heading</h6>

Rendering of Headings

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading

This is an H6 heading

As you can see, the size of the headings decreases from <h1> to <h6>. This is the default styling provided by most browsers.

Usage Tips

• Use headings to create a clear structure for your content. This helps both users and search engines understand the hierarchy and importance of the information on your page.
• Only use one <h1> per page to denote the main topic or title of the page.
• Use <h2> to <h6> headings to create sections and subsections within your content.
• Headings should be used for their semantic value, not for styling. Use CSS to style headings if needed.

Styling Headings with CSS

<style>
h1 {
    color: #4CAF50;
    font-size: 2.5em;
}
h2 {
    color: #2196F3;
    font-size: 2em;
}
h3 {
    color: #FF5722;
    font-size: 1.75em;
}
</style>

This CSS code will style the <h1>, <h2>, and <h3> headings with different colors and font sizes.