Best Practices for HTML

Hey Everyone,

I’m not new to HTML as it’s been around for a long time but I’m somewhat new to developing for the web.

Currently I’m reviewing some notes I have and looking up more information on MDN and I always like to see “best practices” as those are like gold nuggets.

Sometimes it seems like best practices incorporate other factors that are not straightforward. For example creating a relationship between <label> and <input> using for and id attributes respectively.

So, what kind of sneaky best practices do you know of for HTML?

Comments

[Dan]

I read this last week and I'll link it here. Ken's post on using semantic elements. and not using so many <div>s!

[Dan]

Yeah yeah I see, thanks! Good to know there’s a way to make screen readers ignore something.

I think the “hate” on using divs is more from using a div when there is a semantic element that is better to use.

Eg:
<div role=“navigation”> vs <nav>

So using div isn’t a no-no, it’s just a last-resort if there isn’t a semantic element for the use case. This is in contrast to what may have been a trend of excessive use of divs.

[Dan]

Re: Validating HTML

There are some services that do HTML validation (I didn't know about this). This relates to the topic of best practices. But, I think that a validator can't determine everything for you. For example I doubt it would distinguish an error between using an em or strong tag.

So I dug around and I've found a few things that I'm going to experiment with. I haven't had time to try them all yet:

• HTMLHint for VS Code will show problems in the problem panel.
• w3c validator is extension for VS Code that is probably better than HTMLHint. It requires installing Java if you don't have it.
• w3c-validator command line tool in python (looks outdated...maybe). The script just uploads html to w3c validator and then parses the json response.
• validator.nu which has a command line script on the about page (also in python).

See also validator

[Dan]

I went digging a little just now on google and found this.

html-best-practices

There's a lot of info there.

[Dan]

What scenario would you use that for?