DEV Community

loading...

Best Practices for HTML

cookrdan profile image Dan ・1 min read

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?

Discussion (7)

pic
Editor guide
Collapse
cookrdan profile image
Dan Author • Edited

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!

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
mattwaler profile image
Matt Waler

People seem to hate on using divs as wrappers, when really all that needs to be done is to add ‘role=“presentation”’ for screen readers to ignore it and dig deeper.

Collapse
cookrdan profile image
Dan Author

What scenario would you use that for?

Collapse
mattwaler profile image
Matt Waler

If I was using a div within a section to create a 50-50 layout of image and content, applying flexbox classes to the div, I would also add role="presentation" so that the div itself would be ignored by screen readers, but the content would still be easily findable.

Thread Thread
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

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

html-best-practices

There's a lot of info there.