Writing HTML

These are my recommendations for techniques you should use when writing HTML, based on my experience working on sites like Envato Elements.

I used these techniques to build the site you’re reading now. You can read the source to this site on GitHub.

What’s Not On The List

I’m sticking to things that apply to just about all websites. I’m ignoring tools, frameworks, and hosting.

The Techniques

Here they are in alphabetical order (for want of a more meaningful organisational scheme.)

Accessibility

In Chrome, run Lighthouse in the dev tools, and look at the accessibility results. In Safari, run an accessibility audit in the Audit tab of the dev tools. Fix the things they point out.

Make sure you can navigate your site with the keyboard. You’ll need to turn on tab-key navigation.

Try your site in a screen reader. There’s a learning curve, but you can’t really tell if your accessibility is up to scratch unless you try it. Google has a good video intro to VoiceOver, the built-in screen reader on MacOS.

Use HTML Sections to mark the important parts of your page. Look at the accessibility tree in Chrome dev tools, and ensure it makes sense.

Know about Accessible Rich Internet Applications. Follow the five rules of ARIA use.

Know about the Web Content Accessibility Guidelines. Compare your site to the WCAG Quick Reference.

BEM — Block Element Modifier

BEM is a straightforward approach to the problem of keeping your CSS well organised. It’s simple enough for small sites, and I’ve seen it scale well to much larger ones too.

Favicons

Your site should have favicons in resolutions to suit different devices. Favicon.io is an easy way to generate the necessary images, and the tags needed in your head section.

Flexbox and Grid

Flexbox and Grid eliminate much of the hackery in laying out pages. The Complete Guide to Flexbox and The Complete Guide to Grid are excellent.

Fonts

We don’t all have design skills, so don’t get fancy. The best number of fonts for your site is one, maybe two.

Google Fonts is your friend. Only add the styles and weights you need. Make sure you don’t miss any, because browser-generated bold and italics are awful. Use the <link> method of embedding.

HTML Living Standard

We’ve moved past HTML version numbers, and into the HTML living standard. Can I Use helps figure out which HTML features are supported by which browser versions.

To tell browsers that you’re adhering to the living standard, always start your document with:

<!DOCTYPE html>
<html lang="en"></html>

Be sure to specify your character set in the head section:

<meta charset="utf-8" />

MDN

MDN is an excellent source for HTML and CSS documentation. W3Schools shows up at the top of searches more often, but tends to be less detailed and less up to date than MDN.

Performance

Understand Core Web Vitals.

Run Lighthouse in the Chrome dev tools, and look at its performance report. It’ll suggest things you can improve.

Prettier

Use Prettier to format your HTML and CSS. Save your brain for more important things than deciding how to format your source code. Your favourite editor probably has support for it. Set it up to format automatically whenever you save.

Reader View

Try your page in Safari’s Reader View, either on a Mac, iPhone, or iPad. If your page looks better in Reader View, improve your design.

Responsive Design

People will read your site on phones, tablets, laptops, and desktops. It should work well at all sizes.

Design for phones first. If you make your site work well on a phone, it’s relatively easy to make it work well on bigger screens from there. Going the other way is harder.

Put this in your page’s head section to tell mobile browsers that you’ve thought of them:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Chrome, Firefox, and Safari all have built-in ways of previewing your site at phone and tablet sizes.

SASS and SCSS

Just about every site generator and framework supports SASS these days. You should use it. Use SCSS syntax.

SEO

Stick to the basics, and don’t try to game Google. Make sure all your pages have:

The Google SEO Starter Guide is helpful.