HTML Headings: How to Structure Your Web Pages

The HTML heading tags (<h1> to <h6>) are used to add headings to a webpage. For example,

<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>

Browser Output

HTML tags

In the example, we have used tags <h1> to <h6> to create headings of varying sizes and importance.

The <h1> tag denotes the most important heading on a webpage. Similarly, <h6> denotes the least important heading.

The difference in sizes of heading tags comes from the browser's default styling. And, you can always change the styling of heading tags, including font size, using CSS.

Note: Do not use heading tags to create large texts. It's because search engines like Google use heading tags to understand what a page is about.

h1 Tag is Important

The HTML <h1> tag defines the most important heading in a webpage.

Although it's possible to include multiple <h1> tags in a webpage, the general practice is to use a single <h1> tag (usually at the beginning of the page).

The <h1> tag is also important for SEO. Search engines (such as Google) treat content inside <h1> with greater importance compared to other tags.

Headings are block-level elements

The Headings <h1> to <h6> tags are block-level elements. They start on a new line and take up the full width of their parent element. For example,

<h1>Headings</h1> <h2>are</h2> <h3>fun!</h3>

Browser Output

HTML tags <h1> to <h6> are block-level elements


HTML Headings: How to Structure Your Web Pages
1.05 GEEK