Do you know these amazing HTML essentials every cool web dev admires?

HTML is the foundational block of the web as we know it. It stands for Hyper Text Markup Language and every thing that we see on the internet is made possible by this amazing technology. Today we'll cover the basics of HTML and to begin that we'll begin where we last left off and talk a little about something called 'separation of concerns.'

Separation of concerns:

Separation of concerns is a coding practice wherein we organize code based on the purpose it serves. Basically what it does is that it ensures that each module should only do one thing and not be bothered with code that does something else. So, all code responsible for content on a page goes in one file (HTML), all code responsible for making things look pretty and ensuring that everything looks as it is supposed to, goes into a separate file (CSS), and lastly, all code responsible for the functionality of the website goes into its own separate file (JS). This 'separation of concern' approach gives the following advantage:

• better organization of file (this comes in especially handy when dealing with large codebase of an organization for instance)
• easier debugging
• more manageable code
• reduction of complexity
• easier maintenance Now having separated HTML from the rest, we'll focus solely on HTML in this post and we'll start with 'how to select an HTML tag'.

Three 'seperate' balloons

How to select an HTML tag:

Remember what we said about HTML - It only deals with the content on a webpage. To that end we'll write HTML based only on the content. What it means is that our logic behind the selection of any HTML tag should only be content-related like semanticity and importance of that segment in the overall page. Other considerations like the size of text, how it looks, how much margin it holds should not be the deciding factor. For example, If our logic for making something an <h1> is that it is the most important thing on the page, then that logic is right, but if it is that since <h1> has the biggest font size and we wanted text size to be big then this logic is incorrect. Remember HTML is only for content

HTML tags should not be selected based on things like font size.

Violate separation of concerns and preserve it as well!

Now let's look at something really interesting. Using HTML tags like <strong> and <em> should violate separation of concerns right? Well, yes and no. Like we discussed before, it again depends on the reason as to why we did what we did. So if the reason was that it changes how the text looks on the site, then we've breached the 'seperation of concerns'. If, however, the reason was that it aids differently abled people or tools like screen reader to better explain the text styles to the users of screen readers, then congratulations! we were successful in preserving the separation of concerns. It is for this very reason that things like marquee and blink are now depreceated as they fail in the preservation of separation of concerns. So, long story short, always preserve 'seperation of concerns' and have solid reason behind the selection of one HTML tag over another. As a bonus, whenever in doubt, don't forget to check out MDN here to see the use cases and semanticity of any HTML tag.

Conclusion:

So in this blogpost, we covered essential things about basic HTML tags. At first, they seem trivial in nature but trust me, you'll ve surprised at how many 'good developers' don't know these simple things. Also, if a recruiter asks you any question from these seemingly simple things, well, you got it covered now! Cheers!

Hey everyone! 👋

I'm Sumit, a self-taught, newly knighted web developer and in the coming weeks, I'd be learning more and sharing my knowledge along the way. So follow me on Twitter to be a part of my journey. Also, don't forget to like and share this article with your friends. Bye