HTML Heading Tags (`

` to `

`): Structure and SEO

Master the use of HTML heading tags (`

` to `

`) to structure your content effectively for both readability and search engine optimization (SEO). This guide covers best practices, browser compatibility, CSS styling, and default browser styles for headings.

---

---

HTML Heading Tags (<h1> to <h6>)

HTML headings are used to structure and organize content. They're essential for both readability and SEO.

HTML Heading Levels (<h1> to <h6>)

HTML provides six heading levels, from <h1> (most important) to <h6> (least important). Each heading should be used appropriately to reflect the hierarchical structure of your content.

<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>
<h6>This is heading 6</h6>
        

Best Practices for Headings

• Use only one <h1> tag per page, representing the main topic.
• Don't skip heading levels. If you use <h1>, then use <h2>, <h3>, and so on, in a logical order.

Browser Support

All major browsers fully support HTML headings (<h1> to <h6>).

Global and Event Attributes

Heading tags support both global attributes (like id, class, style) and event attributes (like onclick, onmouseover). See the Global Attributes and Event Attributes references for more details (replace with actual links).

Styling Headings with CSS

You can easily style headings using CSS. Here are some examples:

h1 { background-color: lightblue; color: navy; }
h2 { background-color: lightgreen; color: darkgreen; }
        

h1 { text-align: center; }
h2 { text-align: right; }
        

Default Browser Styles

Browsers typically apply default styling to headings. Here's an example of default <h1> styles:

h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
        

Similar default styles exist for <h2> to <h6>, varying in font size and margins. These styles can be overridden with your own CSS.