Best Practices for HTML

twitter logo ・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?

twitter logo DISCUSS (7)
markdown guide
 

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!

 

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

 

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.

 

What scenario would you use that for?

 

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.

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.

 

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

html-best-practices

There's a lot of info there.

Classic DEV Post from Jan 29

Advice for Developers in the Early Stage of their Career

I have been asked this a couple of times and will love to hear from others too....

Dan profile image
I’m a coding guy

Tip: You can configure your dev.to reading experience, such as using sans serif fonts.

Go to your the "misc." section of your settings.

Customize dev.to