When I heard about arguments erupting at the work place over proper line spacing(double space or tab?), I though it was hyperbole. Like, really? I mean, I get fighting over the superiority of one language over another, but line spacing?
Then I joined a team to build an app and a problem arose: we coded HTML differently from one another. Style guides I’d read in the past stressed the use of double space, but, apparently, another member of the team liked using tabs because, “Sublime allows you to minimize elements based on tab spacing,’ he claimed.
We ended up agreeing on tabs because I’m a team player.
Looking back on it, I should have referenced the style guides that insist on double spacing. Anyway, that’s why I’m going to go through a rundown of the major rules for HTML. I’m also going to go over CSS rules in a future article because HTML and CSS go together like [insert horrible parable(bread and jam’s my choice, if you wanted to know)].
Jokes aside, agreeing on a universal set of rules is crucial for scaling and maintaining large apps. Of course, a pre-processor like Pug is a good mediator. That’s if you’re using Node.js for your back end, of course. You also have Slim and HAML for Ruby.
Really, don’t read the rest of this article. Just use Pug.
But if you insist on writing markup, here are four guidelines.
Filenames must be lower case.
If you need your filenames to be longer than one word, they should be separated by hyphens.
Most know that an HTML document must start with !DOCTYPE html. The head and body tags are also standard, though, as of HTML5, your code will work if you omit theand tags. But omit them at your peril.
You still have to specify a language:
You have to define a character encoding:
You actually have to include a viewport:
meta name=”viewport” content=”width=device-width, user-scalable=no”
Interestingly enough, there are do’s and dont’s for comments in HTML.
A single line comment should have spaces between the delimiters.
!-- TODO: Make pug carousel --
Multiple line comments must start on their own line. No indentations this time.
Closing tag comments should include the id or class of the element