CHAPTER 3 The Vanilla Web Diet
Without further ado, let’s dive into the first part of a healthy Web product:
a sensible starting point.Build on What Works
Our base layer should be plain and simple HTML that does what the product is
meant to do.
Something that looks like a button but doesn’t do anything does not
help our users. When everything else fails, HTML is what users get: let’s
not deprive them of that. Mistakes happen, errors can arise from lots of
sources, many of which might not be under our control. As Jake Archibald
put it: “All of our users have JavaScript disabled until your first script loads
and is executed.” That’s why time spent thinking about the base layer of
what we do is never time wasted.
This should be the main principle behind what we build — and it is
nothing new. We’ve called it “semantic layering, progressive enhancement”;
we even came up with cute acronyms like POSH (for plain old semantic
HTML). Yet we keep forgetting this principle again and again. It seems that
the pursuit of crafting sensible HTML that explains itself confuses people
who come from an object-oriented programming world, where everything
needs to be instantiated and changed before it’s applied. In HTML, not so
much. It makes sense to see HTML as a foundation to build on. You can’t
build something heavy and large on a rickety foundation, so let’s use as
much HTML as needed — but not more — and when we use HTML, let’s
use what works.
Say, for example, you want to have a tab control. It is not uncommon
for JavaScript widgets to come up with something like the following,
either as the HTML you have to create for them to work, or generated
by JavaScript:
<div class="tabcontrol">
<div class="tab">One</div>
<div class="tab">Two</div>
<div class="tab">Three</div>