✅ Get a complete overview of how HTML's H1 H2 H3 H4 H5 H6 headings work with interesting visual examples and line-by-line coding exercises with explanations.
💡 The HTML H1 H2 H3 H4 H5 H6 elements represent six levels of section headings. H1 is the highest section level and H6 is the lowest section level.
💡 HTML section headings use their font-sizes and font-weights to indicate their relative importance, for example, H1 is the highest level section heading so it is used to markup the most important topic of the page; H6 is the lowest level section heading so it is used to markup the least important section heading.
✅ Useful Tips:
⚠ Don't try using heading tags to resize text. Try to use the CSS font-size property. Headings use size to indicate their relative importance, but CSS is preferred for general-purpose resizing.
⚠ Don't skip heading levels: always start from H1, next use H2 and next H3, and so on.
⚠ Don't use multiple H1 per page. Using more than one will not result in an error, but using only one is seen as a best practice. The H1 is the most important heading and tells you what the main topic of the overall page is.
⚠ You wouldn't have a book with more than one title! So Having a single top-level title is also arguably better for search engine optimization and screen readers.
