-
Notifications
You must be signed in to change notification settings - Fork 0
/
html.html
168 lines (157 loc) · 8.38 KB
/
html.html
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
---
layout: default
title: HTML
description: Standards for writing consistent, flexible, and sustainable markup within the Galaxy.
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512">
<title>HTML5 logo</title>
<path fill="#fff" d="M200.662,266.676H256v-42.92h-59.169L200.662,266.676z M88.686,111.982l30.47,341.74l136.762,37.966 l136.891-37.948l30.507-341.758H88.686z M366.694,431.981L256,462.668v-43.494l-0.067,0.02l-85.858-23.835l-6.004-67.298h42.075 l3.116,34.914l46.68,12.607l0.059-0.019V308.59h-93.669l-11.306-126.749H256v-41.914h136.766L366.694,431.981z"/>
<path opacity="0.8" fill="#fff" d="M307.592,308.59H256v66.974l46.728-12.613L307.592,308.59z M256,139.927v41.914h104.975 l-3.754,41.915H256v42.92h97.406l-11.499,128.683L256,419.174v43.494l110.694-30.687l26.071-292.055H256z"/>
<g opacity="0.2">
<polygon fill="#fff" points="256,181.841 151.025,181.841 162.331,308.59 256,308.59 256,266.676 200.662,266.676 196.831,223.756 256,223.756 "/>
<polygon fill="#fff" points="256,375.563 255.941,375.582 209.262,362.975 206.146,328.061 164.07,328.061 170.074,395.358 255.933,419.193 256,419.174 "/>
</g>
</svg>'
---
<section class="section" id="syntax">
<h2>Syntax</h2>
<div class="grid">
<div class="col">
<ul>
<li>Lowercase all tags, attributes, including the doctype.</li>
<li>Use tabs with four spaces</li>
<li>Nested elements should be indented once (1 tab).</li>
<li>Always use double quotes, never single quotes, on attributes.</li>
<li>Include a trailing slash in self-closing elements—even though the <a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 spec</a> says they're optional.</li>
<li>Include all closing tags, even optional ones (e.g. <code></li></code> or <code></body></code>).</li>
</ul>
</div>
<div class="col">
{% highlight html %}{% include html/syntax.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="doctype">
<h2>HTML5 doctype</h2>
<div class="grid">
<div class="col">
<p>Enforce <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">standards mode</a> and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.</p>
</div>
<div class="col">
{% highlight html %}{% include html/doctype.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="lang">
<h2>Language attribute</h2>
<div class="grid">
<div class="col">
<p>From the HTML5 spec:</p>
<blockquote>
<p>Authors are encouraged to specify a lang attribute on the root html element, giving the document's language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.</p>
</blockquote>
<p>Read more about the <code>lang</code> attribute <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-element">in the spec</a>. Head to Sitepoint for a <a href="https://www.sitepoint.com/iso-2-letter-language-codes/">list of language codes</a>.</p>
</div>
<div class="col">
{% highlight html %}{% include html/lang.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="ie-compatibility-mode">
<h2>IE compatibility mode</h2>
<div class="grid">
<div class="col">
<p>Internet Explorer supports the use of a document compatibility <code><meta></code> tag to specify what version of IE the page should be rendered as. Unless circumstances require otherwise, it's most useful to instruct IE to use the latest supported mode with <strong>edge mode</strong>.</p>
<p>For more information, <a href="https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do">read this awesome Stack Overflow article</a>.</p>
</div>
<div class="col">
{% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="encoding">
<h2>Character encoding</h2>
<div class="grid">
<div class="col">
<p>Quickly and easily ensure proper rendering of your content by declaring an explicit character encoding. When doing so, you may avoid using character entities in your HTML, provided their encoding matches that of the document (generally UTF-8).</p>
</div>
<div class="col">
{% highlight html %}{% include html/encoding.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="style-script">
<h2>CSS and JavaScript includes</h2>
<div class="grid">
<div class="col">
<p>Per HTML5 spec, typically there is no need to specify a <code>type</code> when including CSS and JavaScript files as <code>text/css</code> and <code>text/javascript</code> are their respective defaults.</p>
<h4>HTML5 spec links</h4>
<ul>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-link-element">Using link</a></li>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/semantics.html#the-style-element">Using style</a></li>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/scripting-1.html#the-script-element">Using script</a></li>
</ul>
</div>
<div class="col">
{% highlight html %}{% include html/style-script.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="practicality">
<h2>Practicality over purity</h2>
<p>Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.</p>
</section>
<section class="section" id="attribute-order">
<h2>Attribute order</h2>
<div class="grid">
<div class="col">
<p>HTML attributes should come in this particular order for easier reading of code.</p>
<ul>
<li><code>class</code></li>
<li><code>id</code>, <code>name</code></li>
<li><code>data-*</code></li>
<li><code>for</code>, <code>href</code>, <code>src</code>, <code>type</code>, <code>value</code></li>
<li><code>alt</code>, <code>title</code></li>
<li><code>aria-*</code>, <code>role</code></li>
</ul>
<p>Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.</p>
</div>
<div class="col">
{% highlight html %}{% include html/attribute-order.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="boolean-attributes">
<h2>Boolean attributes</h2>
<div class="grid">
<div class="col">
<p>A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement.</p>
<p>For further reading, consult the <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-microsyntaxes.html#boolean-attributes">WhatWG section on boolean attributes</a>:</p>
<blockquote>
<p>The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.</p>
</blockquote>
<p>If you <em>must</em> include the attribute's value, and <strong>you don't need to</strong>, follow this WhatWG guideline:</p>
<blockquote>
<p>If the attribute is present, its value must either be the empty string or [...] the attribute's canonical name, with no leading or trailing whitespace.</p>
</blockquote>
<p><strong>In short, don't add a value.</strong></p>
</div>
<div class="col">
{% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="reducing-markup">
<h2>Reducing markup</h2>
<div class="grid">
<div class="col">
<p>Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:</p>
</div>
<div class="col">
{% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %}
</div>
</div>
</section>
<section class="section" id="javascript">
<h2>JavaScript generated markup</h2>
<p>Writing markup in a JavaScript files makes the content harder to find, harder to edit, and less performant. Avoid it whenever possible. The exception is when writing out markup in React as it requires JSX in its component architecture. The rules above still apply when writing markup outside the normal confines of HTML.</p>
</section>