HTML Style Guide


This page outlines the style guide for HTML pages in all jQuery projects. These rules apply to web sites, demo pages, inline examples, test pages, etc. Exceptions are allowed for pages that must violate the rules by their very nature, e.g., a page that tests XHTML.

link Doctype

Always use the minimal, versionless doctype.

1
<!doctype html>

link Language

Always define which language the page is written in.

1
<html lang="en">

link Encoding

Always define the character encoding. The encoding should be defined as early as possible.

1
<meta charset="utf-8">

link Elements and Attributes

All element and attribute names should be lowercase. Attribute values should be quoted. Optional closing tags should be included. Self-closing elements should not be closed. Optional attributes should be omitted. Always include html, head, and body tags.

  • No type or language attributes on script tags.
  • No type attribute on link or style tags.
1
2
3
4
<script src="..."></script>
<script></script>
<link rel="stylesheet" href="...">
<style></style>

link Indentation

Don't indent inside html, body, script, or style. Indent inside head and all other elements.

link Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample Page</title>
<link rel="stylesheet" href="/style.css">
<style>
body {
font-size: 100em;
}
</style>
<script src="/jquery.js"></script>
<script>
$(function() {
$( "p" ).text( $.fn.jquery );
});
</script>
</head>
<body>
<p>jQuery is awesome!<p>
</body>
</html>