View video tutorial

HTML <h1>-<h6> Tag

HTML

The tags <h1> to <h6> are used to define headings for a contents.

HTML <h1> to <h6> Tags


➔ Elements from <h1> to <h6> represent section headings at six levels.

➔ The tag <h1> is the highest level section heading and <h6> is the lowest.

Key aspects and best practices


➔ The h1 to h6 tags define the structure and hierarchy of the document.

➔ The most important heading, such as the main title, can be represented by the h1 tag.

➔ Headings are also extremely important for accessibility, navigation, and SEO.

➔ A page should have h1 as the top level main heading, followed by h2 as the best section, then h3 to h6 as further subsections, and this structural heirarchy should not be violated.

➔ Screen readers use it to outline content, and search engines use this heading level to understand the structure and content of the document.

➔ The recommended usage of h1 includes using it once while the other can be used multiple times, use the browser default style for all headings.

Supported Global attributes

Global attributes may be applied on all elements, although some elements may have no effect on them.

<accesskey>, <class>, <contenteditable>, <contextmenu>, <data-*>, <dir>, <draggable>, <dropzone>, <hidden>, <id>, <lang>, <spellcheck>, <style>, <tabindex>, <title>, <translate>.

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<h1 class="h1">This is heading 1</h1>
<h2 class="h2">This is heading 2</h2>
<h3 class="h3">This is heading 3</h3>
<h4 class="h4">This is heading 4</h4>
<h5 class="h5">This is heading 5</h5>
<h6 class="h6">This is heading 6</h6>
Try it Now »

Click on the "Try it Now" button to see how it works.