Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
communitycreator
web development
html tag

What are HTML <heading> tags?

Adeola Fadeyi

Just like with every other programming language, HTML possesses keywords, which define how the web browser will format and display the content within them, these are called HTML tags. HTML tags are used to indicate the beginning and end of an HTML element within an HTML document.

Tags define how the content within them will be formatted and displayed on a webpage. A standard webpage must have the essential tags. One of which is the <heading> tag, which makes up the heading element.

Html element structure
Html element structure

What is the <heading> tag?

The <heading> tag is a structural tag that defines the headings for an HTML document from level 1 to 6. It is represented with <h1> through <h6> and it possesses a closing tag i.e., <h2>Content goes here</h2>

The heading levels in an html document.

Use cases

  • <Heading> tags layout headings for an HTML document from level one to six.

  • <Heading> tags represent six levels of section headings, from the highest section level, <h1>, to the lowest section level, <h6>.

  • Google uses headings to index the structure and content of web pages, so they should be used wisely for SEO optimization.

  • The <heading> tags can be used with attributes such as ID, class, and align.

The align attribute is now considered obsolete, so it can be ignored.

Use of the heading tag with the #id attribute.

They can also be nested to create subsections.

Nesting the header elements.

Wrong usages

By default, browsers format headings with bolder and larger fonts, paragraphs, breaks, and whitespace. However:

  • Don’t use them to style text. Use CSS instead.
  • Don’t use more than one <h1> heading per page, as it may create confusion especially for screen reader users.
  • Avoid skipping heading levels.
Wrong omission of the heading levels

Browser compatibility

They are fully supported across major browsers on mobile and desktop devices.

Conclusion

  • The <heading> tags are used to layout the section headings of a webpage in their order of importance.
  • The <heading> tags can be used with HTML attributes such as class and id.
  • The <heading> tags can be nested.
  • The <heading> tags are cross-browser compatible.

RELATED TAGS

html
communitycreator
web development
html tag
RELATED COURSES

View all Courses

Keep Exploring