Tutorials Videos Menu
Website Pro NEW

HTML Headings


Headings create a clear outline for humans and search engines. Global Tuts uses them to structure lessons so you always know what topic comes next.


Why this matters on Global Tuts

Good heading hierarchy improves readability, SEO and accessibility — especially for long tutorial pages and documentation.

Common beginner mistakes

  • Jumping from h1 to h4 without intermediate levels
  • Using headings only for font size
  • Multiple h1 tags used as visual styling shortcuts

Written by Mohammad Ashraf for Global Tuts learners.

Example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Try it Yourself »

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

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>
Try it Yourself »

Note: Browsers automatically add some white space (a margin) before and after a heading.


Headings Are Important

Search engines use the headings to index the structure and content of your web pages.

Users often skim a page by its headings. It is important to use headings to show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.


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;">Heading 1</h1>
Try it Yourself »