The Perfect HTML markup (I think...)
Fullstack Engineer in a committed relationship with Typescript. Obsessed with performance and building large-scale applications.
HTML is easy, we get it. But are you writing it the right way👀. A lot of times I see people writing HTML that looks really confusing and hard to read through, especially when it time to apply CSS styles to your elements.
From what we know, div’s do not have any semantic meaning, so why do you keep spamming them in your code?🙂
Today I’m going to be sharing with you a foolproof way of writing a proper HTML markup, while using semantic tags as well, not the spamming of div’s that most beginners are used to.
Tip #1:
Separating your HTML body using header, main and footer tag.
You should always separate the contents of your body tag, using the header, main and footer tag.
Not just by using DIVS!!
This is.......eww
Isn't this nicer?🙂
This helps anyone who looks at your code to understand what is fully going on. Elements like nav should always go inside your header. The main content of your website/webpage should go into your main. And the footer of your website, clearly would go into the footer.
For those who may not know what a footer is.
Tip #2:
When making a navbar always use the nav tag. This and indicates that the highlited section of code is what represents the navbar. Also use a div tag to wrap all the elements of your navbar together.
This prevents your navbar from overflowing when your give it some left and right padding.
Tip #3:
Use the section tag to separate or group similar contents of your webpage together.
Every element inside the red rectangles should be wrapped with the section tag.
Again, stop using divs for this purpose.
Tip #4:
Use div’s as containers to hold 2 or more elements together. For example your want to hold two buttons together, or a h3 and a p tag together.
One thing I also see regularly which I feel is bad practice is using divs as buttons. We have the button tag for that. If you want to list items in a container, use the ol or ul tag.
If you don't want the bullet points on your ol and ul tags, you can always set the list-style-type property to none in your CSS
Don't do this.
Do this instead
Tip #5:
Keep off Inline Styling
Like for real, stay away from it as much as possible. It makes your code look really unreadable and bloated in my opinion. Perhaps your could try internal styling (still bloats your code, not as bad as before) or even better, external css. Doing this keeps your HTML nice and clean, while separating concerns really well.
Look at how bloated this looks.
That's all for this week. Thank you for reading ðŸ¤. And remember, cut it out with the div's!
If you found this helpful, give me a follow for more related content.
Also follow or send me a message on Twitter @alebiosu_thedev to know more about me or for a collaboration.
