TL;DR – HTML headings help organize the structure of a web page by providing titles and subtitles of various levels.
HTML Heading: a Definition
HTML headings name sections of a webpage. It simplifies page navigation, helping to create a pleasant user experience. Using HTML headings of different importance levels, you can convey the structure and hierarchy in your page:
|<h1> – <h6>||Names sections of a web document to provide structure|
|<head>||Contains machine-readable metadata (e.g., encoding information)|
|<header>||Contains introductory or navigational information|
Theory is great, but we recommend digging deeper!
Six Levels of HTML Heading Tags
There are six HTML heading tags in total:
<h6>. A smaller number means a smaller heading used to name a less important paragraph:
<h1>I am the most important heading in the world</h1> <h2>I am a less important heading in the world</h2> <h3>I am an even less important heading in the world</h3> <h4>I am a heading and I am not the least important</h4> <h5>I am almost the least important heading in the world</h5> <h6>I am the least important heading in the world</h6>
<h1> heading tags surround the most significant and most visible heading in the whole page, and the
<h6> heading represents the least essential one which is almost as small as simple paragraph text.
HTML Headings: Useful Tips
- HTML headings help search engines index the page's structure and understand its content. Thus, using well-written headings can help improve your website's findability.
- You shouldn't use more than one
<h1>element. It is also advised to nest HTML headings by the level and avoid skipping them.