HTML Style Guide

HTML5 Logo

HTML Style Guide

A style guide which helps you write better, performant, structured, scalable and maintainable HTML.

Anchor

External links

External links must have rel="noopener" and target="_blank" attribute.

Bad

<a href="path/to/external/file">External URL</a>

Good

<a href="path/to/external/file" rel="noopener" target="_blank">External URL</a>

Title attribute

Anchor must have title attribute.

Bad

<a href="#">Link</a>

Good

<a href="#" title="Description of anchor">Link</a>

Attribute

Attribute Content

Attribute content must be written in lowercase.

Bad

<meta charset="UTF-8">

Good

<meta charset="utf-8">

Attribute value

Attribute value must be wrapped in quotation marks.

Bad

<input type=text>

Good

<input type="text">

Boolean attribute

Boolean attribute values like checked, disabled and required are redundant and must be omitted.

Bad

<input type="text" required="required">

Good

<input type="text" required>

Attribute Case

Attribute must be written in lowercase.

Bad

<a HREF="#"></a>

Good

<a href="#"></a>

Equal Sign

Spaces around attribute equal signs must be avoided.

Bad

<input type = "text">

Good

<input type="text">

Comment

Comment marker

Single line comments must have space before and after comment markers.

Bad

<!--single line comment-->

Good

<!-- single line comment -->

Single line comment

Single line comment must be placed before tag.

Bad

<body> <!-- Single line comment -->

Good

<!-- Single line comment -->
<body>

Css

Inline Styles

Inline styles must be avoided.

Bad

<button style="background-color: #2980b9; color: #fff; display: inline-block; padding: 0.25em 1em;">Button</button>

Good

<style>
  .button {
    background-color: #2980b9;
    color: #fff;
    display: inline-block;
    padding: 0.25em 1em;
  }
</style>

<button class="button">Button</button>

Type

Style type="text/css" attribute must be ommitted.

Bad

<style type="text/css"></style>

Good

<style></style>

Document

Character encoding

Character encoding must be within the first 1024 bytes of the document.

Bad

<head>
  <title>Website</title>
  …
  <meta charset="utf-8">
</head>

Good

<head>
  <meta charset="utf-8">
  …
  <title>Website</title>
</head>

Encoding

Document must have utf-8 encoding.

Bad

<head>
  <title>Website</title>
  <meta charset="Shift_JIS">
</head>

Good

<head>
  <meta charset="utf-8">
  <title>Website</title>
</head>

Form

Input type

Input type must be specified.

Bad

<input>

Good

<input type="text">

General

Indentation

Tags must be indented using two spaces.

Bad

<html>
	<body>…</body>
</html>

Good

<html>
  <body>…</body>
</html>

Headline

Heading Hierarchy

Headlines must be places in hierarchical order.

Bad

<h2>Subheadline</h2>
<h1>Headline</h1>

Good

<h1>Headline</h1>
<h2>Subheadline</h2>

Image

Alt attribute

Image must have alt attribute.

Bad

<img src="path/to/image">

Good

<img src="path/to/image" alt="Description of image">

Dimensions

Image must have width and height attribute.

Bad

<img src="path/to/image">

Good

<img src="path/to/image" width="400" height="300">

Javascript

Event Handlers

Inline event handlers must be avoided.

Bad

<button onclick="foo()">Button</button>

Good

<button class="js-button">Button</button>

<script>
  document.querySelector('.js-button').addEventListener('click', foo);
</script>

External files

External JavaScript files must be loaded before closing </body> tag.

Bad

<html>
  <head>
    <script src="path/to/file.js"></script>
  </head>
  <body></body>
</html>

Good

<html>
  <head></head>
  <body>
    <script src="path/to/file.js"></script>
  </body>
</html>

Type

Script type="text/javascript" attribute must be ommitted

Bad

<script type="text/javascript"></script>

Good

<script></script>

Link

Protocol

Links to external resources must have a protocol specified.

Bad

<link href="//path/to/file.css" rel="stylesheet">

Good

<link href="https://path/to/file.css" rel="stylesheet">

Selector

ID / Class

Element ID / Class must be written in lowercase seperated by dashes starting with letter.

Bad

<div id="Color" class="#bada55">…</div>

Good

<div id="color" class="color-bada55">…</div>

String

Quotation Marks

Strings must be quoted using double quotes.

Bad

<a href='#'>Link</a>

Good

<a href="#">Link</a>

Tag

Closing tags

Optional closing tags like </body>, </li>, </p>, </td> or </th> must not be ommitted.

Bad

<html>
  <body>
    <ul>
      <li>List Item 1
      <li>List Item 2
      <li>List Item 3
    </ul>
</html>

Good

<html>
  <body>
    <ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>
  </body>
</html>

Empty

Tags must not be empty.

Bad

<a href="#"></a>

Good

<a href="#">Home</a>

Newline

Newline between tag name and content must be avoided.

Bad

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim magnam quas maxime harum, sint nesciunt nihil, molestiae, quos soluta inventore rem nemo sit quidem dolorum, sunt magni eos officia illum!
</p>

Good

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim magnam quas maxime harum, sint nesciunt nihil, molestiae, quos soluta inventore rem nemo sit quidem dolorum, sunt magni eos officia illum!</p>

Self-closing

Trailing slash in self-closing tag must be ommitted.

Bad

<img src="path/to/image" />

Good

<img src="path/to/image">

Tag Case

Tags must be written in lowercase.

Bad

<HTML></HTML>

Good

<html></html>

Tools

Resources