HTML5 doctype
Enforce standards mode and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.
<!DOCTYPE html>Language attribute
Always use a language attribute on the html tag to declare the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content.
<html lang="en">Declaring the language of the page is an accessibility win. It helps speech synthesis tools get the pronunciation right, helps the browser select language appropriate fonts, helps translation tools etc, etc. Read more on the W3 site.
IE compatibility
Specifiy the x-ua-compatible tag to encourage IE to render using it's latest rendering engine.
This is useful for minimising the chance of your layout getting screwed by compatibility mode, though it doesn't always work.
It needs to be included before all other tags except for the <title> and the other <meta> tags. Read more.
<meta http-equiv="x-ua-compatible" content="ie=edge">Mobile viewport
There are a number of ways to use the viewport meta tag, as documented in the Apple developer docs. For most cases you can just use the following:
<meta name="viewport" content="width=device-width, initial-scale=1">Syntax
- Use double quotes for HTML attribute values. E.g:
<div class="my-class"> - Use 4 spaces for indentation.
- Start block elements on a new line and properly indent child elements.
- Don't omit optional closing tags (e.g
</li>. - Use only lowercase.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1>Lorem ipsum</h1>
<p>Dolor sit amet</p>
<ul class="promo">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div> <!-- end .container -->
</body>
</html>Type attributes
No need to specify type attributes for stylesheets and scripts (as long as you are using css and javascript).
Specifying type attributes in this context is not necessary as HTML5 implies text/css and text/javascript as defaults. Even older browsers are fine with this.
<!-- Bad -->
<link rel="stylesheet" href="/main.css" type="text/css">
<!-- Good -->
<link rel="stylesheet" href="/main.css">Boolean attributes
From the HTML Living Standard:
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
<!-- Bad -->
<label><input type="checkbox" checked="true" disabled="disabled"> Cheese</label>
<!-- Good -->
<label><input type="checkbox" checked disabled> Cheese</label>