DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Dan
Dan

Posted on

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?

Top comments (7)

Collapse
cookrdan profile image
Dan Author • Edited on

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!

cookrdan profile image
Dan Author

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.

Collapse
cookrdan profile image
Dan Author

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

Collapse
cookrdan profile image
Dan Author

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

html-best-practices

There's a lot of info there.

Collapse
cookrdan profile image
Dan Author

What scenario would you use that for?

Head to your account's Settings to...

🌚 Enable dark mode
πŸ”  Change your default font
πŸ“š Adjust your experience level to see more relevant content