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
Equal Sign
Spaces around attribute equal signs must be avoided.
Bad
<input type = "text">Good
<input type="text">Attribute Content
Attribute content must be written in lowercase.
Bad
<meta charset="UTF-8">Good
<meta charset="utf-8">Attribute Case
Attribute must be written in lowercase.
Bad
<a HREF="#"></a>Good
<a href="#"></a>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>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>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>Empty
Tags must not be empty.
Bad
<a href="#"></a>Good
<a href="#">Home</a>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>