There’s 6 different “level heading” elements which you can wrap around text to make it bigger or smaller on the page. This is useful if you want to add a title or headers to your page to make it more readable and appealing.
...
Heading level 1 is the biggest, then as the number gets bigger, the text gets smaller.
This is incorrect. While its true that browsers assign default font sizes to numbered headings as how you observe, that isn't what they're for. <h1> doesn't mean "biggest heading" and <h6> doesn't mean smallest.
The purpose of the numbered headings are to semantically structure and organize different sections of the content in a webpage.
<h1> represents the section the current webpage is a part of. Which is usually the title of the website, or the article title in case of a blog post. Next, <h2> represents the start of a major subsection on that page. And then, if you have a subsection within the subsection started by <h2>, that would be under <h3>. The same logic applies all the way up to <h6>.
The benefits of structuring content semantically this way are huge. User agents and search engines are then able to better understand the organization of the content of the page.
It's also useful when you want to create a table of contents highlighting the different sections & subsections underneath. Here's an example from my own blog post:
I hope my comment doesn't offend you and that you take this as a learning experience. For the longest time in my career, I too always thought that numbered headings were for styling purposes. I highly suggest going through the MDN docs for further reading. Cheers, and happy up-skilling! 😄
Thanks for reading Ashwin, and thanks for the feedback! I'm always looking to improve the quality of the content so no hard feelings, and you're completely right here.
That was my mistake attributing the diferent h* elements to the size of the text, this is just a side effect of default styling on most websites or browsers.
You can absolutely have a "higher" level heading element like h1 appear smaller than its counterparts like h2 or h3, and you're right when you say that the elements are mainly used for semantically grouping different sections of the page (as shown in your table of contents). For a simple website though I'd say most people would only be worrying about the size of the header and how it appears on the page, which is why I mentioned that.
I'll see if I can update the post to clarify this in a way that makes sense! Thanks again, cheers 😎
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
This is incorrect. While its true that browsers assign default font sizes to numbered headings as how you observe, that isn't what they're for.
<h1>doesn't mean "biggest heading" and<h6>doesn't mean smallest.The purpose of the numbered headings are to semantically structure and organize different sections of the content in a webpage.
<h1>represents the section the current webpage is a part of. Which is usually the title of the website, or the article title in case of a blog post. Next,<h2>represents the start of a major subsection on that page. And then, if you have a subsection within the subsection started by<h2>, that would be under<h3>. The same logic applies all the way up to<h6>.The benefits of structuring content semantically this way are huge. User agents and search engines are then able to better understand the organization of the content of the page.
It's also useful when you want to create a table of contents highlighting the different sections & subsections underneath. Here's an example from my own blog post:
Build a community-driven delivery app using Django, PostgreSQL & JavaScript
Ashwin Hariharan for Egen ・ Jan 31 ・ 19 min read
I hope my comment doesn't offend you and that you take this as a learning experience. For the longest time in my career, I too always thought that numbered headings were for styling purposes. I highly suggest going through the MDN docs for further reading. Cheers, and happy up-skilling! 😄
Thanks for reading Ashwin, and thanks for the feedback! I'm always looking to improve the quality of the content so no hard feelings, and you're completely right here.
That was my mistake attributing the diferent
h*elements to the size of the text, this is just a side effect of default styling on most websites or browsers.You can absolutely have a "higher" level heading element like
h1appear smaller than its counterparts likeh2orh3, and you're right when you say that the elements are mainly used for semantically grouping different sections of the page (as shown in your table of contents). For a simple website though I'd say most people would only be worrying about the size of the header and how it appears on the page, which is why I mentioned that.I'll see if I can update the post to clarify this in a way that makes sense! Thanks again, cheers 😎