Skip to main content

Mastering HTML Headings | Create Structured Web Pages with Headings

HTML headings are used to define headings or titles for a web page or section of a web page.

There are six levels of headings in HTML, ranging from <h1> to <h2>, with <h1> being the most important and <h6> being the least important.

As an example:

Editor

Loading...

In this example:

  • The <h1> heading is used for the main heading of the web page, while the <h2> headings are used for subheadings.
  • The <h3> heading is used for a sub-subheading, and so on.
  • The <p> tag is used to define paragraphs of text.
headings comes with default margin

By default, different heading levels have different margins set by the browser's stylesheet.

Importance Of Headings​

Headings are important in HTML because they provide a hierarchical structure to a web page's content, making it easier to read and understand.

Here are some reasons why headings are important:

Accessibility​

Headings help screen reader users to navigate and understand the content of a web page. Screen readers read out the headings to users, allowing them to quickly skip to the content they are interested in.

Readability​

Headings help break up long sections of text into smaller, more readable chunks. This can make the content more engaging and easier to understand, especially for users who are skimming the page.

SEO​

Headings can also be important for search engine optimization (SEO). Search engines use headings to understand the structure of a web page and to identify the most important keywords and phrases on the page.

Organization​

Headings help to organize the content of a web page into logical sections, making it easier for users to navigate and find the information they are looking for.

Headings size​

The size of headings is determined by the default styles set by the browser's stylesheet. However, the size of headings can be adjusted using CSS (Cascading Style Sheets).

You can specify the size for any heading with the style attribute, using the CSS font-size property.

As an example:

Editor

Loading...

In this example:

  • The style attribute is used to add inline CSS styling to the element, specifically the font-size property, which sets the size of the font to 50px.