Jorge Valle

Jorge Valle

Jorge Valle is a front end developer with a particular passion for, and expertise in, JavaScript and user interfaces. Lately, he's also been diving into machine learning.

A judicious HTML style guide

Writing code is a very personal endeavor, and formatting and structuring it is a matter of personal preference. However, once you start working in teams, adhering to strict conventions keeps the code readable and the developers productive.

After many years and plenty of thought, I've arrived at my own style guide. This is what I use.

Bundle all scripts and stylesheets

There's no excuse for wasting expensive HTTP requests on several resources when they can be bundled into one.

Element names should all be in lowercase

Lowercase is easy to read, and follow along to.

Attribute names should all be in lowercase

Lowercase is easy to read, and follow along to.

Include optional elements

The HTML spec doesn't require us to use html, head or body elements. Omitting these, however, is less semantic and structural. The performance benefit of omission does not justify the lack of clarity.

Use alt attributes

Marking up your graphical elements with the alt attribute takes very little time, and goes a long way towards delivering a good experience towards visually impaired users. Have you ever navigated your site with a screen reader? If not, I suggest you do so.

Custom element names

Custom elements should follow the same standard as native elements. They should all be in lowercase and, if composed of several words, hyphenated.

Use two spaces for indentation

Four spaces is too much. Tabs lack granularity and consistency throughout editors. Two spaces is perfect.

Comments should always be in sentence case

This keeps things readable and consistent, as a comment should be.


Books, patrons and coffee in Caffè San Marco, Trieste