DEV Community

loading...

What kind of coding standards do you follow when writing HTML?

Akanksha Sharma
Javascript Dev , Hobbit of The Shire
・1 min read

What kind of coding standards do you follow when writing HTML?

Discussion (14)

Collapse
moopet profile image
Ben Sinclair

Aside from the stuff linters pick up:

  • Avoid unnecessary divs and spans, try to put content into the appropriately-semantic containers.
  • Only one opening or closing tag per line
  • Indent nested tags consistently (2 spaces is my preference, but that's all it is - a preference)
  • Use one line break as vertical whitespace between containing blocks.
  • Use one line break as vertical whitespace between unrelated meta tags, scripts, stylesheets, etc.

And I try to write it while keeping in mind that it's not necessarily going to be the only output format.

Collapse
dmerand profile image
Donald Merand

Reading the Google Style Guide for HTML/CSS really helped me a lot. Like all dogma, it's probably best to take it with a grain of salt :-)

Collapse
akanksha_9560 profile image
Akanksha Sharma Author

Great starting point. But somehow in working in large team always leaves HTML messy. :(

Collapse
dmerand profile image
Donald Merand

Is it more true for HTML than, for example, CSS or JavaScript?

It's definitely a good point! We should be considering our HTML templates in our refactoring efforts as well.

Collapse
rhymes profile image
rhymes • Edited

Didn't know some HTML5 tags were optional!

Collapse
dmerand profile image
Donald Merand

Yes! That was news to me too. I made one page that way just to confirm, but generally avoid it since most linting tools will complain, and on some level it just never felt right to leave out the closing tag...

Thread Thread
rhymes profile image
rhymes

Yeah and also I'm sure some browser will complain 🤣🤣

Collapse
eljayadobe profile image
Eljay-Adobe

I'm still recovering from the ill-fated XHTML era.

Leaving off the HTML5 optional closing tags will take some getting used to.

But I've gotten used to (and now, I even prefer) leaving off the semicolon in JavaScript when it is superfluous, I'm sure I can do the same in the HTML context.

Collapse
eljayadobe profile image
Eljay-Adobe

I use Tidy for HTML, and Standard for JavaScript.

(I was a contributor to Dave Raggett's Tidy, in its early early days.)

Collapse
akanksha_9560 profile image
Akanksha Sharma Author

Is there a plugin for Tidy too? Could we use it with vscode?

Collapse
eljayadobe profile image
Eljay-Adobe

Looks like there is VSCode-Tidy, which is for the current version of Tidy (HTML5).

Collapse
jesuszilla_tm profile image
Jesuszilla イエスジラ

It’s completely arbitrary for me since I find HTML to be very inelegant. Thus I just try to make it not look cluttered like many webpages do. AngularJS helps a lot with this.

Collapse
akanksha_9560 profile image
Akanksha Sharma Author

I am always confused as to if we should write as small code as possible or write more nested HTML?

Collapse
denmch profile image
Den McHenry • Edited

I think you should try to write as much HTML as the semantic structure requires, and arrange it in such a way that another human will be able to understand and edit it. You're writing declarative code for:

  • browsers,
  • assistive technology, and
  • things like search bots

that all need to know the document's structure and how best to help users find what they're looking for (or help complete some action). It's possible to write too little HTML and miss the mark on conveying the meaning and structure of the content, and it's possible to write too much HTML in an effort to give yourself containers that can be styled for visual effects (but this is often easily avoided).

HTML should primarily focus on conveying that clearly enough that in the absence of CSS and JavaScript, you'd be able to scan the page and recognize it as a readable document with a hierarchy.

(This could be as simple as using headings appropriately; using lists for lists, rather than using something else with CSS counters, which seems sexy; using tables for tabular data; and using articles for syndicated content like blog posts.)

Back to the people who will be looking at and possibly editing your HTML, you should be consistent and nest children below their parents. For example, siblings should sit beside one another under their common parent, at the same level of indentation, so that the next editor can easily see the relationship. And so on.

I like to use two spaces for each successive level, and that seems the most standard approach. It's probably because using 4 spaces or tabs can make it much harder to read the deeper you go. 2 spaces seems just right.

Ben's comment seems pretty right on to me, but I wanted to give some special emphasis to the need to write for both technology and for people.