The day comes where you’re looking to make your own website, maybe to increase your digital presence or allow others to find your work more easily....
For further actions, you may consider blocking this person and/or reporting abuse
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 😎
This is highly unusual.
You're making web development seem easy and ... logical.
Explaining things like basic HTML and CSS.
You should start with buzzwords like React, Gatsby and Tailwind CSS.
Want to build your first web page?
Download 1000 npm packages, focus on scalability and microservices, and it might be ready in 10 months.
Oh, and everyhing that has the "open source" label on it is awesome, doesn't matter if it's insecure, unstable or owned by a private for-profit company.
And make sure to be hysterical on Twitter and make fun of anyone who's still writing PHP code.
One last thing, never ever test your website on any other browser except Chrome.
20% of people are using Safari as their main browser? F**k 'em, you don't care, they should just install Chrome.
Be sure to tell them that Chrome is the best, but also tell them that you hate Google.
Everyone knows a web developer will feel truly accomplished only when they overcomplicate everything and make it seem like they're working on rocket science.
Thanks so much for reading Liviu, love and appreciate your comment! 😁
You've hit the nail on the head, the mission with my content is making programming content more accessible and easier to understand, and I try to make my content approachable for a broader audience. I think a lot of people starting out have this idea going in that programming is super complicated and it is like rocket science, but maybe that's just the perception others give off.
I think some people get lost in what's actually important, for example, there's not much point in worrying about optimising your performance if you haven't got that problem. What's important is giving users of your website a great experience - if users on your website have a fundamentally poor experience, no amount of optimisation, switching frameworks, or scalability is going to save you.
There's always time to build on top of what you've got and learn those things later down the road!
Thanks - Good beginner article. I guess if we're going to each people things we may as well get it right. So in that vein, here are some corrections for consideration...
Headers (h1, h2, h3...) - these are not headers, they are headings. A
<header>is very different.Divs are divisions not dividers. A horizontal rule
<hr>is a good divider, but a<div>is more along the concept of "sectioning" or "grouping" content vs. dividing it.Thanks for reading @badcat, appreciate the feedback! Also appreciate the corrections, I think others looking to take things further will too.
With regards to headers vs headings, that's totally my bad, used the wrong name during writing. I have mentioned they are "level heading" elements, but I'll update this as I don't want to cause confusion. I understand your concern with "division" over "divider" (I'm aware it is formally called the "content division" element), and I'll add some clarification. But I think in the scope of this post, for all intents and purposes, it divides content (at least at a high level). I also mention how it is like a container, as well as words like "sections" and "grouping". I explain it like this to give some context around the images that come after.
Hope that makes sense and addresses your concerns, always appreciate the feedback to improve the quality of the content. 🙂
It's always cool to see KISS principle applied. My website is only CSS and HTML by choice. I still haven't had a reason to add JS. I like pushing the limits of what HTML and CSS can do.
One relevant post I can think of is Writing HTML in HTML by John Ankarström if anyone is interested. Where he mentions how writing just static HTML & CSS will let you see how your designs have changed over time. Like a diary. You can go to an old post an go back in time with respect to your website's situation.
While I still use a static site generator. I would like to try and get there. Cos archiving your history in that form sounds great and fun!
Thanks for reading Nikhil and great post you shared 😄 I completely agree, keeping things as simple as possible and building on top of it when you need the functionality is great for beginners, especially when a lot of people are under the impression that more is better, but you can create some amazing things just using HTML and CSS!
I am glad you found it interesting. :)
I don't think it is just for beginners though. Some brilliant devs I follow all have functional and minimal websites. They tend to keep the JS to the minimum. The idea is to not shy away from JavaScript. But use it only when necessary.
I completely agree! More is not better. More is bloat and a liability in the long term. :)
Not to mention, CSS has almost become a programming language with a lot of modern functions.
stateofcss.com/ was an eye opener for me. It is still largely an unexplored territory IMO which includes me as well. So I started giving more time to it since last year. :)
simple and precise ... great work
Thanks Sarvesh! Appreciate the feedback 🎉
I really liked your explanation, very easy to understand!😃
If someone creates a website from scratch, it may be a good solution to use, for example, Wordpress.
Wait... did you just make a list out of a paragraph tag?
Great article