Skip to content

HTML Style Guide

Jump to bottom
connorshea edited this page Dec 5, 2014 · 5 revisions

Adapted from the Google HTML/CSS Style Guide.

Licensed under CC-BY 3.0.

For generic rules applicable to both HTML and CSS, see General HTML/CSS Style Guide.

Style Rules

Document Type

Although fine with HTML, do not close void elements, i.e. write <br>, not <br />.

HTML Validity

Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size.

Use tools such as the W3C HTML validator to test for validity.

<!-- Not recommended -->
<title>Test</title>
<article>This is only a test.

<!-- Recommended -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

HTML is for structure

Use HTML only for structure, inline stylesheets or scripts are frowned upon.

<!-- Not recommended -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
  <u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
  my website without doing everything all over again!</center>

<!-- Recommended -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
  doing it: separating concerns and avoiding anything in the HTML of
  my website that is presentational.
<p>It’s awesome!

Semantics

Use elements (sometimes incorrectly called “tags”) for what they have been created for. For example, use heading elements for headings, p elements for paragraphs, a elements for anchors, etc.

<!-- Not recommended -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

Alternative content for multimedia

While we are an image search site, fallbacks should be provided for images where possible.

<!-- Not recommended -->
<img src="image.png">

<!-- Recommended -->
<img src="image.png" alt="Picture of something.">

Entity References

There is no need to use entity references like &mdash;, &rdquo;, or &#x263a;, assuming the same encoding (UTF-8) is used for files and editors as well as among teams.

The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).

<!-- Not recommended -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- Recommended -->
The currency symbol for the Euro is “€”.

Optional Tags

For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 Specification defines what tags can be omitted.

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Ipsum.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Lorem.

type Attributes

Do not use the type attribute for style sheets (unless not using CSS) or scripts (unless not using JavaScript).

<!-- Not recommended -->
<link rel="stylesheet" href="main.css" type="text/css">

<!-- Recommended -->
<link rel="stylesheet" href="main.css">

<!-- Not recommended -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<!-- Recommended -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Formatting Rules

General Formatting

Use a new line for every block, list, or table element, and indent every such child element.

Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line.

<div>
  <p><em>Space</em>, the final frontier.</p>
</div>

<ul>
  <li>Moe
  <li>Larry
  <li>Curly
</ul>

HTML Quotation Marks

Use double ("") rather than single quotation marks ('') around attribute values.

<!-- Not recommended -->
<a class='button'>Sign in</a>

<!-- Recommended -->
<a class="button">Sign in</a>

Home

Style Guides

Features

Design Stuff

Mockups

Roadmap

Notes

Clone this wiki locally