HTML offers not just ordinary paragraph tags, but also six distinct header tags to denote headings of different sizes and styles. Ranging from heading 1 to heading 6, heading 1 represents the largest and boldest text, whereas heading 6 signifies the smallest and thinnest, akin to a paragraph. This section elaborates on the correct utilization of these tags.
3.1 – How to use Headings
Headings play a crucial role in organizing and structuring content in HTML documents. They are defined using the <h1> to <h6> tags, with <h1> representing the most important heading and <h6> the least important. Each heading tag supports all global attributes.
Example of defining headings:
<h1> Heading Number 1 </h1> <h2> Heading Number 2 </h2> <h3> Heading Number 3 </h3> <h4> Heading Number 4 </h4> <h5> Heading Number 5 </h5> <h6> Heading Number 6 </h6>
Maintaining correct structure:
Search engines and user agents rely on heading elements to understand the hierarchy and relevance of content. Therefore, adhering to the correct structure for headings is essential. Typically, an article should contain one <h1> element for the main title, followed by <h2> subtitles, and so forth, without skipping levels.
Example document structure:
<h1> This is the title of the page</h1> <p> This is the introduction </p> <h2> Topics</h2> <h3> Topic 1 </h3> <p> Paragraph about topic 1 </p> <h3> Topic 2 </h3> <p> Paragraph about topic 2</p> <h2> Conclusion </h2> <p> Paragraph about the conclusion</p>