5 Tips to build better websites by improving your HTML


HTML is a fundamental technology of the web. It is literally the language that makes websites work. You can have a website with no CSS, it’ll just look like a formatted text document. You can have a website with no JavaScript, it’ll just not have any interactivity but the content will still be there.

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.

2. SEO

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.

3. Accessibility

Building an accessible website begins at the start with HTML. You can’t write bad HTML and expect to fix it with CSS or JavaScript. You need to use the correct tags in the correct locations within the markup.

4. It saves you time

Well structured HTML makes everything easier. Well structured HTML gives your website a lot of accessibility benefits out of the box and reduces the need to patch accessibility issues later on. Writing CSS and JavaScript is easier because you don’t need to worry about over specific selectors or many different tags clashing with each other. It makes it easier to target different elements using standard JavaScript APIs as well.

5 Tips on How to Get Better at HTML

1. Be deliberate in learning the basics

HTML is deceptively simple. Developers tend to skip over it or ‘learn it as they go’ while doing CSS and JavaScript exercises. Take a day to go through some articles or tutorials that teach pure HTML. Learn how to properly structure your HTML, what tags are available, what attributes you can use etc. web.dev has a great resource to get you started.

2. Build your website HTML first

This is a technique that I love to do. Rather than jumping straight into things and hacking away with CSS, JavaScript and PHP all at the same time. I would build out the structure of the page, first using just HTML then I would layer on CSS and finally I would add any required JavaScript. Once I was happy then I would transfer the code over into PHP, adding the appropriate server side logic after.

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.

Conclusion

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.

Need a web developer? Let’s chat