HTML & CSS best practices and tips (from a web design noob)

I’ve been working a lot on improving Chriselison.uk and my portfolio sites recently and I thought I’d share some of my best practices and tips when writing HTML and CSS. These are not meant to be things you should do, but things I’ve found may be helpful for those wanting to make their own websites.

Get yourself a decent text editor!

If you’re going to be writing HTML and CSS, you’ll want something better than just Windows Notepad or your OS equivalent. Luckily there are several good text editors out there, I myself use Brackets, the free and open source editor from Adobe.

The Brackets text editor

There are many other text editors available for Windows, Linux & Mac, including Notepad++, Sublime Text, UltraEdit, Emacs, Atom, Vim, PSPad, etc.

Use indents when writing your code

A good text editor should allow you to indent your code when writing HTML or CSS. You can usually define how much the text should be indented in your editor. I use 2 spaces per indent, although some people prefer tabs or 4 spaces. Indents make your code look easier to read and understand and generally more professional.

Always use the !DOCTYPE!

When writing your HTML pages you should always include a !DOCTYPE at the very top of your HTML code. This doctype tells the browser which version of HTML the page is written in. The HTML5 doctype is really easy to remember, it’s simply ‘html’.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Specify a page language in your HTML

You should always specify a language in your page’s HTML using the lang="" attribute in the <html> tag. If your page is written in English for example, then use ‘en’, if it’s written in Dutch, ‘nl’. The browser uses this property when translating pages, so including this could be handy for speakers of other languages visiting your site!

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

Specify a character set in your HTML

You should include this property early in your <head> section of your HTML, it tells the browser what character encoding to use. These days you should use UTF-8 and ensure your HTML and CSS files are UTF-8 encoded.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  </body>
</html>

Give your HTML pages a title!

You should give every HTML page a title. This title is used in your browser’s tab/title bar and is used in search results. Try to use a consistent and sensible titling for your website.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My first website!</title>
  </head>
  <body>
  </body>
</html>

Use meta tags

If you want your website to show up in search results, you’ll need to give your site a meta description and keywords. Make sure to give your page a title, too!

<head>
  ...
  <meta name="description" content="I go over some of my favourite HTML &amp; CSS best practices and tips.">
  <meta name="keywords" content="css, web-dev, web-design, html">
  <title>HTML &amp; CSS best practices and tips (from a web design noob) | Christopher Elison</title>
</head>

Use a CSS reset before your main stylesheet

It’s a good idea to use a CSS reset stylesheet before your main site styles. As different browsers render elements slightly differently, a reset stylesheet provides a consistent, cross-browser starting point from which to build your website. I personally opt to use Normalize by Nicolas Gallagher in all my projects.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/normalize-8.0.0.css">
    <link rel="stylesheet" href="/css/main.css">
    <title>My first website!</title>
  </head>
  <body>
  </body>
</html>

Other resets include Eric Meyer’s reset.css, Jonathan Neal’s sanitize.css and Bootstrap’s reboot.

Use semantic HTML elements

HTML5 has introduced several useful semantic tags you can use in your pages such as <article>, <header>, <nav> and <main>. Using these semantic tags could make it easier for search engines to index your pages.

<body>
  <header>
    <nav>
      <!-- Navigation links -->
    </nav>
  </header>
  <main>
    <!-- Main body of the page -->
    <aside>
      <!-- Sidebar -->
    </aside>
    <article>
      <!-- Main article text -->
    </article>
  </main>
  <footer>
    <!-- Copyright/social links -->
  </footer>
</body>

Give your images alt text

Whenever you use an image on a page or article, you should always give your image alt text. This text is used by search engines, but also by screen readers when describing images to the visually-impaired. The alt text should describe the content of the image.

  <img src="img/team.jpg" alt="Photo of the development team">

Use CSS font stacks

It’s always a good idea to include a font fallback stack when defining your fonts using the CSS ‘font-family’ property, this ensures that in the event of a font not being loaded or present on a user’s system, the browser will always use the default serif or sans-serif font.

p {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

In this example, if the ‘Open Sans’ font can not be loaded, the browser will then try to render the paragraph in Arial, if that font is unavailable then it will try to load Helvetica, failing that, the browsers default ‘sans-serif’ font will be loaded.

#333 is the new black

Rather than setting your text colour as just black/#000, try #333 or even #555, it gives your text a subtle but classier look and feel. Use this with care though, as you want to keep a good contrast between your text and background colours. Be mindful of users with reduced vision.

p {
  color: #333;
}

The same goes for your background colour, instead of just white, try a slightly different shade of white/grey, a subtle change in background colour can really alter the look and mood of your page.

Make your text zoomable and responsive with relative units

Instead of giving your text fixed pixel (px) values, use rem (root em) units. Rem is a relative unit based on the root font size. If you want to increase the text size proportionally, simply increase the html font-size, for example 110%. This is useful in a media query to increase the font size on mobile browsers. You can also use rems for paddings and margins.

html {
  font-size: 100%; /* Equivalent to 16px */
}

p {
  font-size: 1rem; /* 1x the root font size */
}

h1 {
  font-size: 2.6rem; /* 2.6x the root font size */
}

h2 {
  font-size: 1.6rem; /* 1.6x the root font size */
}

/* Mobile screens */
@media screen and (max-width: 480px) {
  html { font-size: 110%; }
}

Use a unitless line-height for vertical rhythm and readability

With line-height you can set the ‘leading’ of your paragraph text, in other words, the vertical space between lines of text. I like to set the line-height of my body to 1.6 (without a unit). Changing the line-height can affect the vertical rhythm and readability of the page.

html {
  line-height: 1.6;
}

Comparing line heights

Full-width image background

Many modern websites make use of this trendy effect, a full-width div with a background image that scales to it, you can apply various filters to the background with ‘background-blend-mode’ to add cool effects.

Fullscreen background image div

  <div class="fullscreen">
    <h1>Welcome to my website!</h1>
  </div>
.fullscreen {
  align-items: center;
  background-blend-mode: multiply; /* Try lighten, multiply, darken etc */
  background-color: #888855;
  background-image: url(martijn-baudoin-V1bVk2Y392s-unsplash.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 100vh;
  width: 100%;
}

.fullscreen h1 {
  color: #d5d5d5;
  font-family: Arial, sans-serif;
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.5);
  text-transform: uppercase;
  width: 100%;
}

Play with the background-color and background-blend-mode values for different effects, you can simulate some cool Instagram-style filters with vanilla CSS and an image!

Circular profile image

You’ll often see profiles with a person’s face in a round image, did you know you can achieve this in just CSS using the border-radius property? No image editing required:

Me!

img.profile-image {
  border: 3px solid #ddd; /* Change as required */
  border-radius: 50%;
  width: 120px;           /* Change this, too */
}

Enable font smoothing and ligatures

Use the following to improve the look of your fonts and to enable ligatures and kerning. The article ‘font-feature-settings’ by Robin Rendle explains the different options you can enable. This article from 2015 by Mat “Wilto” Marquis argues against using text-rendering: optimizeLegibility; excessively, so use wisely.

html {
  text-rendering: optimizeLegibility;
  
  /* Experiment with enabling/disabling dlig & rlig */
  -webkit-font-feature-settings: "kern" 1, "liga" on, "dlig" off, "rlig" off;
     -moz-font-feature-settings: "kern" 1, "liga" on, "dlig" off, "rlig" off;
          font-feature-settings: "kern" 1, "liga" on, "dlig" off, "rlig" off;
}

That’s all for now, thanks for reading! I hope to write more HTML/CSS articles in the future, but for now I am going to return to working on Chriselison.uk and my portfolio websites. If you like, drop me a follow @ChrisElison on Twitter and Instagram.