You can’t have a website with no HTML. All you will get is a blank page.
Part of my job involves working with many different developers. I train junior hires or those from another IT department wanting to cross skill. I work closely with agencies who we outsource work to when we don’t have enough time or people to handle it in-house. A commonality I see when I review the code or talk to these developers is the lack of understanding (or care) to the HTML.
Which is a shame because having strong HTML skills makes it so much easier to build your websites.
The importance of HTML
Why is HTML important? Well a few reasons:
1. It gives your website meaning
HTML is ‘semantic’ meaning that each tag has some kind of meaning. The <H1> tag lets browsers know that this is the main heading of the page. The <a> tag tells the browser that the content inside lets you navigate to another section of the website. These elements are interpreted by browsers and assistive devices and technologies to help users work their way around your website.
It’s not just browsers and assistive technologies that make use of semantic HTML but search crawlers do too. SEO is heavily impacted by your HTML. A crawler is much more effective at understanding your content if it has clear semantic HTML to crawl through.
4. It saves you time
5 Tips on How to Get Better at HTML
1. Be deliberate in learning the basics
2. Build your website HTML first
This lets you focus on just the HTML at the beginning, making sure the structure is just right.
3. Minimise the amount of wrappers you use
Structure your HTML with the minimal amount of tags you need to get the job done. Excessive use of <div> tags or wrappers is usually an indication that you need to restructure your HTML. Pay close attention to the structure of your HTML. Good HTML can save you a lot of headaches down the line.
4. Use a naming convention for your classes
Don’t just go and give your HTML random class names. Be deliberate and thoughtful about naming your classes. Here are some naming conventions to look into, none are better than the others, it’s all up to your personal preference. The important thing is to pick one and stick with it.
5. Learn from other websites
Go visit websites of developers and agencies that focus on web accessibility. Experts in accessibility write the best HTML. Inspect those sites using the browser devtools and see how they do things. Here are a few to get you started:
Don’t just stop at theses sites, go to the portfolio and visit the websites that these developers and agencies build as well. Expose yourself to as many different approaches as possible to get a better understanding with how to HTML better.
Hopefully I’ve convinced you that HTML is really important. Good semantic HTML is beneficial for SEO, accessibility and makes your job as a front end developer so much easier. The best part is that it doesn’t take too much effort to drastically improve your understanding of it. Start with the web.dev lesson then go explore websites that you like and you’ll be well on your way to writing better HTML.