<p>Sentences used this time: <a href="https://github.com/hail2u/html-best-practices">https://github.com/hail2u/html-best-practices</a></p>
<hr />
<blockquote cite="https://github.com/hail2u/html-best-practices">
<h1 id="htmlbestpractices">HTML Best Practices</h1>
<p>For writing maintainable and scalable HTML documents</p>
<div>
<!-- Added code -->
<details class="_toc" open hidden>
<summary>Table of contents</summary>
</details>
<!-- / Added code -->
<h2 id="general">General</h2>
<h3>Start with DOCTYPE</h3>
<p>DOCTYPE is required for activating no-quirks mode.</p>
<p>Bad:</p>
<pre><code><html>
...
</html>
</code></pre>
<p>Good:</p>
<pre><code><!DOCTYPE html>
<html>
...
</html>
</code></pre>
<h3>Don't use legacy or obsolete DOCTYPE</h3>
<p>DOCTYPE is not for DTD anymore, be simple.</p>
<p>Bad:</p>
<pre><code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
</code></pre>
<p>Good:</p>
<pre><code><!DOCTYPE html>
</code></pre>
<h3>Don't use XML Declaration</h3>
<p>Are you sure you want to write XHTML?</p>
<p>Bad:</p>
<pre><code><?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
</code></pre>
<p>Good:</p>
<pre><code><!DOCTYPE html>
</code></pre>
<h3>Don't use character references as much as possible</h3>
<p>If you write an HTML document with UTF-8, almost all characters (including
Emoji) can be written directly.</p>
<p>Bad:</p>
<pre><code><p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
</code></pre>
<p>Good:</p>
<pre><code><p><small>Copyright c 2014 W3C<sup>R</sup></small></p>
</code></pre>
<h3>Escape <code>&</code>, <code><</code>, <code>></code>, <code>"</code>, and <code>'</code> with named character references</h3>
<p>These characters should escape always for a bug-free HTML document.</p>
<p>Bad:</p>
<pre><code><h1>The "&" character</h1>
</code></pre>
<p>Good:</p>
<pre><code><h1>The &quot;&amp;&quot; character</h1>
</code></pre>
<h3>Use numeric character references for control or invisible characters</h3>
<p>These characters are easily mistaken for another character. And also spec does
not guarantee to define a human readable name for these characters.</p>
<p>Bad:</p>
<pre><code><p>This book can read in 1 hour.</p>
</code></pre>
<p>Good:</p>
<pre><code><p>This book can read in 1&#xA0;hour.</p>
</code></pre>
<h3>Put white spaces around comment contents</h3>
<p>Some characters cannot be used immediately after comment open or before comment
close.</p>
<p>Bad:</p>
<pre><code><!--This section is non-normative-->
</code></pre>
<p>Good:</p>
<pre><code><!-- This section is non-normative -->
</code></pre>
<h3>Don't omit closing tag</h3>
<p>I think you don't understand a rule for omitting closing tag.</p>
<p>Bad:</p>
<pre><code><html>
<body>
...
</code></pre>
<p>Good:</p>
<pre><code><html>
<body>
...
</body>
</html>
</code></pre>
<h3>Don't mix empty element format</h3>
<p>Consistency is a key for readability.</p>
<p>Bad:</p>
<pre><code><img alt="HTML Best Practices" src="/img/logo.png">
<hr />
</code></pre>
<p>Good:</p>
<pre><code><img alt="HTML Best Practices" src="/img/logo.png">
<hr>
</code></pre>
<h3>Don't put white spaces around tags and attribute values</h3>
<p>There is no reason for doing this.</p>
<p>Bad:</p>
<pre><code><h1 class=" title " >HTML Best Practices</h1>
</code></pre>
<p>Good:</p>
<pre><code><h1 class="title">HTML Best Practices</h1>
</code></pre>
<h3>Don't mix character cases</h3>
<p>It gives a consistency also.</p>
<p>Bad:</p>
<pre><code><a HREF="#general">General</A>
</code></pre>
<p>Good:</p>
<pre><code><a href="#general">General</a>
</code></pre>
<p>Also Good:</p>
<pre><code><A HREF="#general">General</A>
</code></pre>
<h3>Don't mix quotation marks</h3>
<p>Same as above.</p>
<p>Bad:</p>
<pre><code><img alt="HTML Best Practices" src='/img/logo.jpg'>
</code></pre>
<p>Good:</p>
<pre><code><img alt="HTML Best Practices" src="/img/logo.jpg">
</code></pre>
<h3>Don't separate attributes with two or more white spaces</h3>
<p>Your weird formatting rule confuses someone.</p>
<p>Bad:</p>
<pre><code><input name="q" type="search">
</code></pre>
<p>Good:</p>
<pre><code><input name="q" type="search">
</code></pre>
<h3>Omit boolean attribute value</h3>
<p>It's easy to write, isn't it?</p>
<p>Bad:</p>
<pre><code><audio autoplay="autoplay" src="/audio/theme.mp3">
</code></pre>
<p>Good:</p>
<pre><code><audio autoplay src="/audio/theme.mp3">
</code></pre>
<h3>Omit namespaces</h3>
<p>SVG and MathML can be used directly in an HTML document.</p>
<p>Bad:</p>
<pre><code><svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
</code></pre>
<p>Good:</p>
<pre><code><svg>
...
</svg>
</code></pre>
<h3>Don't use XML attributes</h3>
<p>We write an HTML document.</p>
<p>Bad:</p>
<pre><code><span lang="ja" xml:lang="ja">...</span>
</code></pre>
<p>Good:</p>
<pre><code><span lang="ja">...</span>
</code></pre>
<h3>Don't mix <code>data-*</code>, Microdata, and RDFa Lite attributes with common attributes</h3>
<p>A tag string can be very complicated. This simple rule helps reading such tag
string.</p>
<p>Bad:</p>
<pre><code><img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
</code></pre>
<p>Good:</p>
<pre><code><img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">
</code></pre>
<h3>Prefer default implicit ARIA semantics</h3>
<p>Some elements have an ARIA <code>role</code> implicitly in an HTML document, don't specify them.</p>
<p>Bad:</p>
<pre><code><nav role="navigation">
...
</nav>
<hr role="separator">
</code></pre>
<p>Good:</p>
<pre><code><nav>
...
</nav>
<hr>
</code></pre>
<h2 id="therootelement">The root element</h2>
<h3>Add <code>lang</code> attribute</h3>
<p><code>lang</code> attribute will help translating an HTML document.</p>
<p>Bad:</p>
<pre><code><html>
</code></pre>
<p>Good:</p>
<pre><code><html lang="en-US">
</code></pre>
<h3>Keep <code>lang</code> attribute value as short as possible</h3>
<p>Japanese is only used in Japan. So country code is not necessary.</p>
<p>Bad:</p>
<pre><code><html lang="ja-JP">
</code></pre>
<p>Good:</p>
<pre><code><html lang="ja">
</code></pre>
<h3>Avoid <code>data-*</code> as much as possible</h3>
<p>An appropriate attribute can be handled properly by browsers.</p>
<p>Bad:</p>
<pre><code><span data-language="french">chemises</span>
...
<strong data-type="warning">Do not wash!</strong>
</code></pre>
<p>Good:</p>
<pre><code><span title="French"><span lang="fr">chemises</span></span>
...
<strong class="warning">Do not wash!</strong>
</code></pre>
<h2 id="documentmetadata">Document metadata</h2>
<h3>Add <code>title</code> element</h3>
<p>A value for <code>title</code> element is used by various application not only a browser.</p>
<p>Bad:</p>
<pre><code><head>
<meta charset="UTF-8">
</head>
</code></pre>
<p>Good:</p>
<pre><code><head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
</code></pre>
<h3>Don't use <code>base</code> element</h3>
<p>An absolute path or URL is safer for both developers and users.</p>
<p>Bad:</p>
<pre><code><head>
...
<base href="/blog/">
<link href="hello-world" rel="canonical">
...
</head>
</code></pre>
<p>Good:</p>
<pre><code><head>
...
<link href="/blog/hello-world" rel="canonical">
...
</head>
</code></pre>
<h3>Specify MIME type of minor linked resources</h3>
<p>This is a hint how application handles this resource.</p>
<p>Bad:</p>
<pre><code><link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">
</code></pre>
<p>Good:</p>
<pre><code><link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">
</code></pre>
<h3>Don't link to <code>favicon.ico</code></h3>
<p>Almost all browsers fetch <code>/favicon.ico</code> automatically and asynchronously.</p>
<p>Bad:</p>
<pre><code><link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
</code></pre>
<p>Good:</p>
<pre><code><!-- Place `favicon.ico` in the root directory. -->
</code></pre>
<h3>Add <code>apple-touch-icon</code> link</h3>
<p>A default request path for touch icon was changed suddenly.</p>
<p>Bad:</p>
<pre><code><!-- Hey Apple! Please download `/apple-touch-icon.png`! -->
</code></pre>
<p>Good:</p>
<pre><code><link href="/apple-touch-icon.png" rel="apple-touch-icon">
</code></pre>
<h3>Add <code>title</code> attribute to alternate stylesheets</h3>
<p>A human readable label helps people selecting proper stylesheet.</p>
<p>Bad:</p>
<pre><code><link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet">
</code></pre>
<p>Good:</p>
<pre><code><link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
</code></pre>
<h3>For URL, use <code>link</code> element</h3>
<p>A value of <code>href</code> attribute can be resolved as URL.</p>
<p>Bad:</p>
<pre><code><section itemscope itemtype="http://schema.org/BlogPosting">
<meta content="https://example.com/blog/hello" itemprop="url">
...
</section>
</code></pre>
<p>Good:</p>
<pre><code><section itemscope itemtype="http://schema.org/BlogPosting">
<link href="/blog/hello" itemprop="url">
...
</section>
</code></pre>
<h3>Specify document character encoding</h3>
<p>UTF-8 is not default in all browsers yet.</p>
<p>Bad:</p>
<pre><code><head>
<title>HTML Best Practices</title>
</head>
</code></pre>
<p>Good:</p>
<pre><code><head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
</code></pre>
<h3>Don't use legacy character encoding format</h3>
<p>HTTP headers should be specified by a server, be simple.</p>
<p>Bad:</p>
<pre><code><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</code></pre>
<p>Good:</p>
<pre><code><meta charset="UTF-8">
</code></pre>
<h3>Specify character encoding at first</h3>
<p>Spec requires the character encoding is specified within the first 1024 bytes of
the document.</p>
<p>Bad:</p>
<pre><code><head>
<meta content="width=device-width" name="viewport">
<meta charset="UTF-8">
...
</head>
</code></pre>
<p>Good:</p>
<pre><code><head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
...
</head>
</code></pre>
<h3>Use UTF-8</h3>
<p>With UTF-8, you are free to use Emoji.</p>
<p>Bad:</p>
<pre><code><meta charset="Shift_JIS">
</code></pre>
<p>Good:</p>
<pre><code><meta charset="UTF-8">
</code></pre>
<h3>Omit <code>type</code> attribute for CSS</h3>
<p>In HTML, default <code>type</code> attribute's value of <code>style</code> element is <code>text/css</code>.</p>
<p>Bad:</p>
<pre><code><style type="text/css">
...
</style>
</code></pre>
<p>Good:</p>
<pre><code><style>
...
</style>
</code></pre>
<h3>Don't comment out contents of <code>style</code> element</h3>
<p>This ritual is for the old browser.</p>
<p>Bad:</p>
<pre><code><style>
<!--
...
-->
</style>
</code></pre>
<p>Good:</p>
<pre><code><style>
...
</style>
</code></pre>
<h3>Don't mix tag for CSS and JavaScript</h3>
<p>Sometimes <code>script</code> element blocks DOM construction.</p>
<p>Bad:</p>
<pre><code><script src="/js/jquery.min.js"></script>
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/main.js"></script>
</code></pre>
<p>Good:</p>
<pre><code><link href="/css/screen.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
</code></pre>
<p>Also good:</p>
<pre><code><script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
<link href="/css/screen.css" rel="stylesheet">
</code></pre>
<h2 id="sections">Sections</h2>
<h3>Add <code>body</code> element</h3>
<p>Sometimes <code>body</code> element is complemented in unexpected position by a browser.</p>
<p>Bad:</p>
<pre><code><html>
<head>
...
</head>
...
</html>
</code></pre>
<p>Good:</p>
<pre><code><html>
<head>
...
</head>
<body>
...
</body>
</html>
</code></pre>
<h3>Forget about <code>hgroup</code> element</h3>
<p>This element is not used very much.</p>
<p>Bad:</p>
<pre><code><hgroup>
<h1>HTML Best Practices</h1>
<h2>For writing maintainable and scalable HTML documents.</h2>
</hgroup>
</code></pre>
<p>Good:</p>
<pre><code><h1>HTML Best Practices</h1>
<p>For writing maintainable and scalable HTML documents.</p>
</code></pre>
<h3>Use <code>address</code> element only for contact information</h3>
<p><code>address</code> element is for email address, social network account, street address,
telephone number, or something you can get in touch with.</p>
<p>Bad:</p>
<pre><code><address>No rights reserved.</address>
</code></pre>
<p>Good:</p>
<pre><code><address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
</code></pre>
<h2 id="groupingcontent">Grouping content</h2>
<h3>Don't start with newline in <code>pre</code> element</h3>
<p>A first newline will ignored in the browsers, but second and later are rendered.</p>
<p>Bad:</p>
<pre><code><pre>
&lt;!DOCTYPE html&gt;
</pre>
</code></pre>
<p>Good:</p>
<pre><code><pre>&lt;!DOCTYPE html&gt;
</pre>
</code></pre>
<h3>Use appropriate element in <code>blockquote</code> element</h3>
<p><code>blockquote</code> element's content is a quote, not a chunks of characters.</p>
<p>Bad:</p>
<pre><code><blockquote>For writing maintainable and scalable HTML documents.</blockquote>
</code></pre>
<p>Good:</p>
<pre><code><blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
</code></pre>
<h3>Don't include attribution directly in <code>blockquote</code> element</h3>
<p><code>blockquote</code> element's content is a quote.</p>
<p>Bad:</p>
<pre><code><blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
<p>? HTML Best Practices</p>
</blockquote>
</code></pre>
<p>Good:</p>
<pre><code><blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<p>? HTML Best Practices</p>
</code></pre>
<p>Also good:</p>
<pre><code><figure>
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<figcaption>? HTML Best Practices</figcaption>
</figure>
</code></pre>
<h3>Write one list item per line</h3>
<p>Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
line is hard toooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo read.</p>
<p>Bad:</p>
<pre><code><ul>
<li>General</li><li>The root Element</li><li>Sections</li>...
</ul>
</code></pre>
<p>Good:</p>
<pre><code><ul>
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ul>
</code></pre>
<h3>Use <code>type</code> attribute for <code>ol</code> element</h3>
<p>Sometimes marker referenced by the contents in the near. If you change marker
with <code>type</code> attribute, you will be safe to reference.</p>
<p>Bad:</p>
<pre><code><head>
<style>
.toc {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol class="toc">
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ol>
</body>
</code></pre>
<p>Good:</p>
<pre><code><body>
<ol type="I">
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ol>
</body>
</code></pre>
<h3>Don't use <code>dl</code> for dialogue</h3>
<p><code>dl</code> element is restricted to an association list in HTML.</p>
<p>Bad:</p>
<pre><code><dl>
<dt>Costello</dt>
<dd>Look, you gotta first baseman?</dd>
<dt>Abbott</dt>
<dd>Certainly.</dd>
<dt>Costello</dt>
<dd>Who's playing first?</dd>
<dt>Abbott</dt>
<dd>That's right.</dd>
<dt>Costello becomes exasperated.</dd>
<dt>Costello</dt>
<dd>When you pay off the first baseman every month, who gets the money?</dd>
<dt>Abbott</dt>
<dd>Every dollar of it.</dd>
</dl>
</code></pre>
<p>Good:</p>
<pre><code><p>Costello: Look, you gotta first baseman?</p>
<p>Abbott: Certainly.</p>
<p>Costello: Who's playing first?</p>
<p>Abbott: That's right.</p>
<p>Costello becomes exasperated.</p>
<p>Costello: When you pay off the first baseman every month, who gets the money?</p>
<p>Abbott: Every dollar of it.</p>
</code></pre>
<h3>Place <code>figcaption</code> element as first or last child of <code>figure</code> element</h3>
<p>Spec disallows <code>figcaption</code> element in the middle of <code>figure</code> element.</p>
<p>Bad:</p>
<pre><code><figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
</figure>
</code></pre>
<p>Good:</p>
<pre><code><figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
</figure>
</code></pre>
<h3>Use <code>main</code> element</h3>
<p><code>main</code> element can be used wrapping contents.</p>
<p>Bad:</p>
<pre><code><div id="content">
...
</div>
</code></pre>
<p>Good:</p>
<pre><code><main>
...
</main>
</code></pre>
<h3>Avoid <code>div</code> element as much as possible</h3>
<p><code>div</code> element is an element of last resort.</p>
<p>Bad:</p>
<pre><code><div class="chapter">
...
</div>
</code></pre>
<p>Good:</p>
<pre><code><section>
...
</section>
</code></pre>
<h2 id="textlevelsemantics">Text-level semantics</h2>
<h3>Don't split same link that can be grouped</h3>
<p><code>a</code> element can wrap almost all elements (except interactive elements like form
controls and <code>a</code> element itself).</p>
<p>Bad:</p>
<pre><code><h1><a href="https://whatwg.org/">WHATWG</a></h1>
<p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>
</code></pre>
<p>Good:</p>
<pre><code><a href="https://whatwg.org/">
<h1>WHATWG</h1>
<p>A community maintaining and evolving HTML since 2004.</p>
</a>
</code></pre>
<h3>Use <code>download</code> attribute for downloading a resource</h3>
<p>It will force browsers to download linked resource to the storage.</p>
<p>Bad:</p>
<pre><code><a href="/downloads/offline.zip">offline version</a>
</code></pre>
<p>Good:</p>
<pre><code><a download href="/downloads/offline.zip">offline version</a>
</code></pre>
<h3>Use <code>rel</code>, <code>hreflang</code>, and <code>type</code> attribute if needed</h3>
<p>These hints help applications to handle linked resources.</p>
<p>Bad:</p>
<pre><code><a href="/ja/pdf">Japanese PDF version</a>
</code></pre>
<p>Good:</p>
<pre><code><a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
</code></pre>
<h3>Clear link text</h3>
<p>Link text should be the label of its linked resource.</p>
<p>Bad:</p>
<pre><code><p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
</code></pre>
<p>Good:</p>
<pre><code><p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
</code></pre>
<h3>Don't use <code>em</code> element for warning or caution</h3>
<p>These are seriousness. So, <code>strong</code> element is more appropriate.</p>
<p>Bad:</p>
<pre><code><em>Caution!</em>
</code></pre>
<p>Good:</p>
<pre><code><strong>Caution!</strong>
</code></pre>
<h3>Avoid <code>s</code>, <code>i</code>, <code>b</code>, and <code>u</code> element as much as possible</h3>
<p>These elements' semantics is too difficult to humans.</p>
<p>Bad:</p>
<pre><code><i class="icon-search"></i>
</code></pre>
<p>Good:</p>
<pre><code><span class="icon-search" aria-hidden="true"></span>
</code></pre>
<h3>Don't put quotes to <code>q</code> element</h3>
<p>Quotes are provided by the browser.</p>
<p>Bad:</p>
<pre><code><q>“For writing maintainable and scalable HTML documents”</q>
</code></pre>
<p>Good:</p>
<pre><code><q>For writing maintainable and scalable HTML documents</q>
</code></pre>
<p>Also good:</p>
<pre><code>“For writing maintainable and scalable HTML documents”
</code></pre>
<h3>Add <code>title</code> attribute to <code>abbr</code> element</h3>
<p>There is no other way to represent its expansion.</p>
<p>Bad:</p>
<pre><code><abbr>HBP</abbr>
</code></pre>
<p>Good:</p>
<pre><code><abbr title="HTML Best Practices">HBP</abbr>
</code></pre>
<h3>Markup <code>ruby</code> element verbosely</h3>
<p><code>ruby</code> element support is not completed across the modern browsers.</p>
<p>Bad:</p>
<pre><code><ruby>HTML<rt>えいちてぃーえむえる</ruby>
</code></pre>
<p>Good:</p>
<pre><code><ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
</code></pre>
<h3>Add <code>datetime</code> attribute to non-machine-readable <code>time</code> element</h3>
<p>When <code>datetime</code> attribute does not present, the format of <code>time</code> element's
content is restricted.</p>
<p>Bad:</p>
<pre><code><time>Dec 19, 2014</time>
</code></pre>
<p>Good:</p>
<pre><code><time datetime="2014-12-19">Dec 19, 2014</time>
</code></pre>
<h3>Specify code language with <code>class</code> attribute prefixed with <code>language-</code></h3>
<p>This is not a formal way, but spec mentions this.</p>
<p>Bad:</p>
<pre><code><code>&lt;!DOCTYPE html&gt;</code>
</code></pre>
<p>Good:</p>
<pre><code><code class="language-html">&lt;!DOCTYPE html&gt;</code>
</code></pre>
<h3>Keep <code>kbd</code> element as simple as possible</h3>
<p>Nesting <code>kbd</code> element is too difficult to humans.</p>
<p>Bad:</p>
<pre><code><kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
</code></pre>
<p>Good:</p>
<pre><code><kbd>Ctrl+F5</kbd>
</code></pre>
<h3>Avoid <code>span</code> element as much as possible</h3>
<p><code>span</code> element is an element of last resort.</p>
<p>Bad:</p>
<pre><code>HTML <span class="best">Best</span> Practices
</code></pre>
<p>Good:</p>
<pre><code>HTML <em>Best</em> Practices
</code></pre>
<h3>Break after <code>br</code> element</h3>
<p>Line break should be needed where <code>br</code> element is used.</p>
<p>Bad:</p>
<pre><code><p>HTML<br>Best<br>Practices</p>
</code></pre>
<p>Good:</p>
<pre><code><p>HTML<br>
Best<br>
Practices</p>
</code></pre>
<h3>Don't use <code>br</code> element only for presentational purpose</h3>
<p><code>br</code> element is not for line breaking, it is for line breaks in the contents.</p>
<p>Bad:</p>
<pre><code><p><label>Rule name: <input name="rule-name" type="text"></label><br>
<label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
</code></pre>
<p>Good:</p>
<pre><code><p><label>Rule name: <input name="rule-name" type="text"></label></p>
<p><label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
</code></pre>
<h2 id="edits">Edits</h2>
<h3>Don't stride <code>ins</code> and <code>del</code> element over other elements</h3>
<p>Elements cannot overflow other elements.</p>
<p>Bad:</p>
<pre><code><p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
<p>Don't trust!</p></del>
</code></pre>
<p>Good:</p>
<pre><code><p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
<del><p>Don't trust!</p></del>
</code></pre>
<h2 id="embeddedcontent">Embedded content</h2>
<h3>Provide fallback <code>img</code> element for <code>picture</code> element</h3>
<p>The support of <code>picture</code> element is not good yet.</p>
<p>Bad:</p>
<pre><code><picture>
<source srcset="/img/logo.webp" type="image/webp">
<source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
<source srcset="/img/logo.jp2" type="image/jp2">
<source srcset="/img/logo.jpg" type="image/jpg">
</picture>
</code></pre>
<p>Good:</p>
<pre><code><picture>
<source srcset="/img/logo.webp" type="image/webp">
<source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
<source srcset="/img/logo.jp2" type="image/jp2">
<img src="/img/logo.jpg">
</picture>
</code></pre>
<h3>Add <code>alt</code> attrbute to <code>img</code> element if needed</h3>
<p><code>alt</code> attribute helps those who cannot process images or have image loading
disabled.</p>
<p>Bad:</p>
<pre><code><img src="/img/logo.png">
</code></pre>
<p>Good:</p>
<pre><code><img alt="HTML Best Practices" src="/img/logo.png">
</code></pre>
<h3>Empty <code>alt</code> attribute if possible</h3>
<p>If the image is supplemental, there is equivalent content somewhere in the near.</p>
<p>Bad:</p>
<pre><code><img alt="Question mark icon" src="/img/icon/help.png"> Help
</code></pre>
<p>Good:</p>
<pre><code><img alt="" src="/img/icon/help.png"> Help
</code></pre>
<h3>Omit <code>alt</code> attribute if possible</h3>
<p>Sometimes you don't know what text is suitable for <code>alt</code> attribute.</p>
<p>Bad:</p>
<pre><code><img alt="CAPTCHA" src="captcha.cgi?id=82174">
</code></pre>
<p>Good:</p>
<pre><code><img src="captcha.cgi?id=82174" title="CAPTCHA">
(If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)
</code></pre>
<h3>Empty <code>iframe</code> element</h3>
<p>There is some restriction in its content. Being empty is always safe.</p>
<p>Bad:</p>
<pre><code><iframe src="/ads/default.html">
<p>If your browser support inline frame, ads are displayed here.</p>
</iframe>
</code></pre>
<p>Good:</p>
<pre><code><iframe src="/ads/default.html"></iframe>
</code></pre>
<h3>Markup <code>map</code> element content</h3>
<p>This content presents to a screen reader.</p>
<p>Bad:</p>
<pre><code><map name="toc">
<a href="#general">General</a>
<area alt="General" coords="0, 0, 40, 40" href="#General"> |
<a href="#the_root_element">The root element</a>
<area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
<a href="#sections">Sections</a>
<area alt="Sections" coords="100, 0, 140, 40" href="#sections">
</map>
</code></pre>
<p>Good:</p>
<pre><code><map name="toc">
<p>
<a href="#general">General</a>
<area alt="General" coords="0, 0, 40, 40" href="#General"> |
<a href="#the_root_element">The root element</a>
<area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
<a href="#sections">Sections</a>
<area alt="Sections" coords="100, 0, 140, 40" href="#sections">
</p>
</map>
</code></pre>
<h3>Provide fallback content for <code>audio</code> or <code>video</code> element</h3>
<p>Fallback content is needed for newly introduced elements in HTML.</p>
<p>Bad:</p>
<pre><code><video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">
...
</video>
</code></pre>
<p>Good:</p>
<pre><code><video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">
...
<iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
</video>
</code></pre>
<h2 id="tabulardata">Tabular data</h2>
<h3>Write one cell per line</h3>
<p>Long lines are hard to scan.</p>
<p>Bad:</p>
<pre><code><tr>
<td>General</td><td>The root Element</td><td>Sections</td>
</tr>
</code></pre>
<p>Good:</p>
<pre><code><tr>
<td>General</td>
<td>The root Element</td>
<td>Sections</td>
</tr>
</code></pre>
<h3>Use <code>th</code> element for header cell</h3>
<p>There is no reason to avoid this.</p>
<p>Bad:</p>
<pre><code><table>
<thead>
<tr>
<td><strong>Element</strong></td>
<td><strong>Empty</strong></td>
<td><strong>Tag omission</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td><strong><code>pre</code></strong></td>
<td>No</td>
<td>Neither tag is omissible</td>
</tr>
<tr>
<td><strong><code>img</code></strong></td>
<td>Yes</td>
<td>No end tag</td>
</tr>
</tbody>
</table>
</code></pre>
<p>Good:</p>
<pre><code><table>
<thead>
<tr>
<th>Element</th>
<th>Empty</th>
<th>Tag omission</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>pre</code></th>
<td>No</td>
<td>Neither tag is omissible</td>
</tr>
<tr>
<th><code>img</code></th>
<td>Yes</td>
<td>No end tag</td>
</tr>
</tbody>
</table>
</code></pre>
<h2 id="forms">Forms</h2>
<h3>Wrap form control with <code>label</code> element</h3>
<p><code>label</code> element helps focusing form element.</p>
<p>Bad:</p>
<pre><code><p>Query: <input name="q" type="text"></p>
</code></pre>
<p>Good:</p>
<pre><code><p><label>Query: <input name="q" type="text"></label></p>
</code></pre>
<h3>Omit <code>for</code> attribute if possible</h3>
<p><code>label</code> element can contain some form elements.</p>
<p>Bad:</p>
<pre><code><label for="q">Query: </label><input id="q" name="q" type="text">
</code></pre>
<p>Good:</p>
<pre><code><label>Query: <input name="q" type="text"></label>
</code></pre>
<h3>Use appropriate <code>type</code> attribute for <code>input</code> element</h3>
<p>With appropriate <code>type</code>, a browser gives tiny features to the <code>input</code> element.</p>
<p>Bad:</p>
<pre><code><label>Search keyword: <input name="q" type="text"></label>
</code></pre>
<p>Good:</p>
<pre><code><label>Search keyword: <input name="q" type="search"></label>
</code></pre>
<h3>Add <code>value</code> attribute to <code>input type="submit"</code></h3>
<p>The default label for submit button is not standarized across the browser and
languages.</p>
<p>Bad:</p>
<pre><code><input type="submit">
</code></pre>
<p>Good:</p>
<pre><code><input type="submit" value="Search">
</code></pre>
<h3>Add <code>title</code> attribute to <code>input</code> element when there is <code>pattern</code> attribute</h3>
<p>If input text does not match to <code>pattern</code> attribute, the value of <code>title</code>
attribute will be display as a hint.</p>
<p>Bad:</p>
<pre><code><input name="security-code" pattern="[0-9]{3}" type="text">
</code></pre>
<p>Good:</p>
<pre><code><input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
</code></pre>
<h3>Don't use <code>placeholder</code> attribute for labeling</h3>
<p><code>label</code> element is for a label, <code>placeholder</code> attribute is for a short hint.</p>
<p>Bad:</p>
<pre><code><input name="email" placeholder="Email" type="text">
</code></pre>
<p>Good:</p>
<pre><code><label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
</code></pre>
<h3>Write one <code>option</code> element per line</h3>
<p>Long lines are hard to scan.</p>
<p>Bad:</p>
<pre><code><datalist id="toc">
<option label="General"><option label="The root element"><option label="Sections">
</datalist>
</code></pre>
<p>Good:</p>
<pre><code><datalist id="toc">
<option label="General">
<option label="The root element">
<option label="Sections">
</datalist>
</code></pre>
<h3>Add <code>max</code> attribute to <code>progress</code> element</h3>
<p>With <code>max</code> attribute, the <code>value</code> attribute can be written in an easy format.</p>
<p>Bad:</p>
<pre><code><progress value="0.5"> 50%</progress>
</code></pre>
<p>Good:</p>
<pre><code><progress max="100" value="50"> 50%</progress>
</code></pre>
<h3>Add <code>min</code> and <code>max</code> attribute to <code>meter</code> element</h3>
<p>With <code>min</code> and <code>max</code> attribute, the <code>value</code> attribute can be written in an easy
format.</p>
<p>Bad:</p>
<pre><code><meter value="0.5"> 512GB used (1024GB total)</meter>
</code></pre>
<p>Good:</p>
<pre><code><meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
</code></pre>
<h3>Place <code>legend</code> element as the first child of <code>fieldset</code> element</h3>
<p>Spec requires this.</p>
<p>Bad:</p>
<pre><code><fieldset>
<p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
<legend>About "General"</legend>
</fieldset>
</code></pre>
<p>Good:</p>
<pre><code><fieldset>
<legend>About "General"</legend>
<p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
</fieldset>
</code></pre>
<h2 id="scripting">Scripting</h2>
<h3>Omit <code>type</code> attribute for JavaScript</h3>
<p>In HTML, the default <code>type</code> attribute's value of <code>script</code> element is
<code>text/javascript</code>.
</p>
<p>Bad:</p>
<pre><code><script type="text/javascript">
...
</script>
</code></pre>
<p>Good:</p>
<pre><code><script>
...
</script>
</code></pre>
<h3>Don't comment out contents of <code>script</code> element</h3>
<p>This ritual is for the old browser.</p>
<p>Bad:</p>
<pre><code><script>
/*<![CDATA[*/
...
/*]]>*/
</script>
</code></pre>
<p>Also bad:</p>
<pre><code><script>
<!--
...
// -->
</script>
</code></pre>
<p>Good:</p>
<pre><code><script>
...
</script>
</code></pre>
<h3>Don't use script-injected <code>script</code> element</h3>
<p><code>async</code> attribute is the best for both simplicity and performance.</p>
<p>Bad:</p>
<pre><code><script>
var script = document.createElement("script");
script.async = true;
script.src = "//example.com/widget.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
</code></pre>
<p>Good:</p>
<pre><code><script async defer src="https://example.com/widget.js"></script>
</code></pre>
<h2 id="other">Other</h2>
<h3>Indent consistently</h3>
<p>Indentation is important for readability.</p>
<p>Bad:</p>
<pre><code><html>
<head>
...
</head>
<body>
...
</body>
</html>
</code></pre>
<p>Good:</p>
<pre><code><html>
<head>
...
</head>
<body>
...
</body>
</html>
</code></pre>
<h3>Use absolute path for internal links</h3>
<p>An absolute path works better on your localhost without internet connection.</p>
<p>Bad:</p>
<pre><code><link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>
</code></pre>
<p>Good:</p>
<pre><code><link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
...
<p>You can find more at <a href="/contact.html">contact page</a>.</p>
</code></pre>
<h3>Don't use protocol-relative URL for external resources</h3>
<p>With protocol, you can load external resources reliably and safely.</p>
<p>Bad:</p>
<pre><code><script src="//example.com/js/library.js">
</code></pre>
<p>Good:</p>
<pre><code><script src="https://example.com/js/library.js">
</code></pre>
</div>
<div>
<h2 id="contributors">Contributors</h2>
<ul>
<li><a href="https://github.com/hail2u">@hail2u_</a></li>
<li><a href="https://github.com/momdo">@momdo</a></li>
</ul>
<h2 id="translators">Translators</h2>
<ul>
<li><a href="https://github.com/costinlotreanu">@costinlotreanu</a></li>
<li><a href="https://github.com/edgar-avila">@edgar-avila</a></li>
<li><a href="https://github.com/kobyborali">@kobyborali</a></li>
<li><a href="https://github.com/m1nhnv">@m1nhnv</a></li>
<li><a href="https://github.com/mrcaidev">@mrcaidev</a></li>
<li><a href="https://github.com/naufalk25">@naufalk25</a></li>
<li><a href="https://github.com/oebelus">@oebelus</a></li>
<li><a href="https://github.com/sahilmaniyar">@sahilmaniyar</a></li>
<li><a href="https://github.com/shayanthenerd">@shayanthenerd</a></li>
<li><a href="https://github.com/sliderkh">@sliderkh</a></li>
<li><a href="https://github.com/stenbaek">@stenbaek</a></li>
<li><a href="https://github.com/techhtml">@techhtml</a></li>
<li><a href="https://github.com/umutphp">@umutphp</a></li>
<li><a href="https://github.com/victorchao996">@victorchao996</a></li>
<li><a href="https://github.com/wesleynepo">@wesleynepo</a></li>
<li><a href="https://github.com/zulkar29">@zulkar29</a></li>
</ul>
<h2 id="license">License</h2>
<p><a href="http://creativecommons.org/publicdomain/zero/1.0/">CC0</a></p>
</div>
</blockquote>html {
scroll-behavior: smooth;
}
body {
margin-block: 2rem;
margin-inline: max(2rem, 50% - 24rem);
}
hr {
border: none;
border-block-start: solid 1px;
color: inherit;
margin-block: 2rem;
margin-inline: 40%;
}
blockquote {
display: contents;
}
details._toc {
& {
border: solid 1px color-mix(in srgb, transparent, currentcolor 20%);
border-radius: 4px;
padding: 1rem;
position: relative;
}
& > * {
isolation: isolate;
}
& > summary {
& {
cursor: pointer;
}
&::before {
content: "";
position: absolute;
inset: 0;
}
}
/* Elements generated by JavaScript */
& > ol {
& {
counter-reset: toc-h2 toc-h3 toc-h4 toc-h5 toc-h6;
display: grid;
grid: auto-flow / repeat(5, auto) 1fr;
padding: 0;
}
& > li {
& {
display: grid;
grid: auto-flow / subgrid;
grid-column: 1 / -1;
margin: 0;
}
&::before {
text-align: end;
white-space: pre;
}
& > a:not(:hover, :focus-visible) {
text-decoration: none;
}
&.h2 {
& {
counter-increment: toc-h2;
counter-reset: toc-h3;
}
&::before {
content: counter(toc-h2) ". ";
grid-column: 1 / span 1;
}
& > a {
grid-column: 2 / span 5;
}
}
&.h3 {
& {
counter-increment: toc-h3;
counter-reset: toc-h4;
}
&::before {
content: counter(toc-h3) ". ";
grid-column: 2 / span 1;
}
& > a {
grid-column: 3 / span 4;
}
}
&.h4 {
& {
counter-increment: toc-h4;
counter-reset: toc-h5;
}
&::before {
content: counter(toc-h4) ". ";
grid-column: 3 / span 1;
}
& > a {
grid-column: 4 / span 3;
}
}
&.h5 {
& {
counter-increment: toc-h5;
counter-reset: toc-h6;
}
&::before {
content: counter(toc-h5) ". ";
grid-column: 4 / span 1;
}
& > a {
grid-column: 5 / span 2;
}
}
&.h6 {
& {
counter-increment: toc-h6;
}
&::before {
content: counter(toc-h6) ". ";
grid-column: 5 / span 1;
}
& > a {
grid-column: 6 / span 1;
}
}
}
}
/* / Elements generated by JavaScript */
}
((d) => {
const tocAll = d.querySelectorAll("details._toc[hidden]");
for (const toc of tocAll) {
const tocTargetAll = toc.parentNode.querySelectorAll(
"._toc~:is(h2,h3,h4,h5,h6),._toc~* :is(h2,h3,h4,h5,h6)"
);
if (!tocTargetAll.length) {
continue;
}
const tocList = d.createElement("ol");
for (const [index, tocTarget] of tocTargetAll.entries()) {
let tocTargetId;
if (tocTarget.id) {
tocTargetId = tocTarget.id;
} else {
tocTargetId =
`_${index + 1}_` + encodeURIComponent(tocTarget.textContent);
tocTarget.id = tocTargetId;
}
const tocItem = document.createElement("li");
tocItem.classList.add(tocTarget.tagName.toLowerCase());
tocItem.innerHTML = `<a href="#${tocTargetId}">${tocTarget.textContent}</a>`;
tocList.appendChild(tocItem);
}
toc.appendChild(tocList);
toc.hidden = false;
}
})(document);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.