Translations: English · বাংলা · Dansk · Deutsch · Español · فارسی · Français · Indonesia · 日本語 · 한국어 · Português (BR) · Română · Русский · Türkçe · Українська · Tiếng Việt · 简体中文 · 正體中文
Để các tài liệu HTML có khả năng bảo trì và mở rộng.
DOCTYPE là bắt buộc để kích hoạt chế độ no-quirks.
Tồi:
<html>
...
</html>
Tốt:
<!DOCTYPE html>
<html>
...
</html>
DOCTYPE không dành cho bất kỳ DTD (Document Type Declaration) nữa, hãy đơn giản sử dụng:
Tồi:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Tốt:
<!DOCTYPE html>
Bạn có chắc chắn mình muốn viết XHTML?
Tồi:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>
Tốt:
<!DOCTYPE html>
Nếu bạn viết một tài liệu HTML với định dạng UTF-8, hầu hết tất cả các ký tự (bao gồm cả Emoji) có thể được viết trực tiếp.
Tồi:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
Tốt:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
Những ký tự này nên được viết bằng các tham chiếu ký tự để không xảy ra lỗi ở tài liệu HTML.
Tồi:
<h1>The "&" character</h1>
Tốt:
<h1>The "&" character</h1>
Những ký tự này dễ bị hiểu sai thành ký tự khác. Và thông số kỹ thuật cũng không đảm bảo rằng một người có thể đọc được tên cho các ký tự này.
Tồi:
<p>This book can read in 1 hour.</p>
Tốt:
<p>This book can read in 1 hour.</p>
Một số ký tự không thể được sử dụng ngay lập tức sau khi ghi chú được mở hoặc được đóng lại.
Tồi:
<!--This section is non-normative-->
Tốt:
<!-- This section is non-normative -->
Tôi nghĩ bạn không biết một quy tắc của việc bỏ qua thẻ đóng.
Tồi:
<html>
<body>
...
Tốt:
<html>
<body>
...
</body>
</html>
Tính nhất quán là chìa khóa cho việc dễ đọc.
Tồi:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr />
Tốt:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr>
Không có lý do gì để làm điều này.
Tồi:
<h1 class=" title " >HTML Best Practices</h1>
Tốt:
<h1 class="title">HTML Best Practices</h1>
Nó cũng mang lại một sự nhất quán.
Tồi:
<a HREF="#general">General</A>
Tốt:
<a href="#general">General</a>
Cũng được:
<A HREF="#general">General</A>
Giống như trên.
Tồi:
<img alt="HTML Best Practices" src='/img/logo.jpg'>
Tốt:
<img alt="HTML Best Practices" src="/img/logo.jpg">
Các quy tắc định dạng kỳ dị của bạn sẽ làm người đọc bối rối.
Tồi:
<input name="q" type="search">
Tốt:
<input name="q" type="search">
Nó thật dễ dàng để viêt, phải không?
Tồi:
<audio autoplay="autoplay" src="/audio/theme.mp3">
Tốt:
<audio autoplay src="/audio/theme.mp3">
SVG và MathML có thể được sử dụng trực tiếp trong một tài liệu HTML.
Tồi:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>
Tốt:
<svg>
...
</svg>
Chúng tôi viết một tài liệu HTML.
Tồi:
<span lang="ja" xml:lang="ja">...</span>
Tốt:
<span lang="ja">...</span>
Một thẻ dài có thể rất phức tạp. Quy tắc đơn giản này sẽ giúp đọc một thẻ dài dễ dàng hơn.
Tồi:
<img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
Tốt:
<img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">
Một số phần tử có một ARIA role ngầm định trong một tài liệu HTML,
đừng chỉ định lại chúng.
Tồi:
<nav role="navigation">
...
</nav>
<hr role="separator">
Tốt:
<nav>
...
</nav>
<hr>
Thuộc tính lang sẽ giúp phiên dịch một tài liệu HTML.
Tồi:
<html>
Tốt:
<html lang="en-US">
Tiếng Nhật chỉ sử dụng ở Nhật bản. Vì thế mã quốc gia là không cần thiết.
Tồi:
<html lang="ja-JP">
Tốt:
<html lang="ja">
Một thuộc tính thích hợp có thể được trình duyệt xử lý đúng cách.
Tồi:
<span data-language="french">chemises</span>
...
<strong data-type="warning">Do not wash!</strong>
Tốt:
<span title="French"><span lang="fr">chemises</span></span>
...
<strong class="warning">Do not wash!</strong>
Giá trị của phần tử title được sử dụng bởi nhiều ứng dụng khác nhau
không chỉ là trình duyệt.
Tồi:
<head>
<meta charset="UTF-8">
</head>
Tốt:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
Một đường dẫn tương đối hoặc URL là an toàn hơn cho lập trình viên và người dùng.
Tồi:
<head>
...
<base href="/blog/">
<link href="hello-world" rel="canonical">
...
</head>
Tốt:
<head>
...
<link href="/blog/hello-world" rel="canonical">
...
</head>
Đây là một gợi ý về cách ứng dụng xử lý tài nguyên này.
Tồi:
<link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">
Tốt:
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">
Hầu hết các trình duyệt nạp /favicon.ico tự động và không đồng bộ.
Tồi:
<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
Tốt:
<!-- Place `favicon.ico` in the root directory. -->
Một đường dẫn yêu cầu mặc định cho biểu tượng cảm ứng đã bị thay đổi đột ngột.
Tồi:
<!-- Hey Apple! Please download `/apple-touch-icon.png`! -->
Tốt:
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
Một nhãn có thể đọc được bởi con người có thể giúp mọi người lựa chọn định dạng kiểu phù hợp.
Tồi:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet">
Tốt:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
Giá trị của thuộc tính href có thể được phân giải như một URL.
Tồi:
<section itemscope itemtype="http://schema.org/BlogPosting">
<meta content="https://example.com/blog/hello" itemprop="url">
...
</section>
Tốt:
<section itemscope itemtype="http://schema.org/BlogPosting">
<link href="/blog/hello" itemprop="url">
...
</section>
UTF-8 chưa phải là mặc định trên tất cả các trình duyệt.
Tồi:
<head>
<title>HTML Best Practices</title>
</head>
Tốt:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>
HTTP headers được chỉnh định bởi một máy chủ, hãy giữ nó đơn giản.
Tồi:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Tốt:
<meta charset="UTF-8">
Đặc tả yêu cầu mã hóa ký tự được chỉ định trong 1024 bytes đầu tiên của tài liệu.
Tồi:
<head>
<meta content="width=device-width" name="viewport">
<meta charset="UTF-8">
...
</head>
Tốt:
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
...
</head>
Với UTF-8, bạn sử dụng Emoji miễn phí.
Tồi:
<meta charset="Shift_JIS">
Tốt:
<meta charset="UTF-8">
Trong HTML, giá trị mặc định của thuộc tính type của style là text/css.
Tồi:
<style type="text/css">
...
</style>
Tốt:
<style>
...
</style>
Cách này dành cho các trình duyệt cũ.
Tồi:
<style>
<!--
...
-->
</style>
Tốt:
<style>
...
</style>
Đội khi phần tử script chặn việc dựng DOM.
Tồi:
<script src="/js/jquery.min.js"></script>
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/main.js"></script>
Tốt:
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
Cũng tốt:
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
<link href="/css/screen.css" rel="stylesheet">
Đôi khi phần tử body được trình duyệt bổ sung ở vị trí không mong muốn.
Tồi:
<html>
<head>
...
</head>
...
</html>
Tốt:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Phần tử này không được sử dụng quá nhiều.
Tồi:
<hgroup>
<h1>HTML Best Practices</h1>
<h2>For writing maintainable and scalable HTML documents.</h2>
</hgroup>
Tốt:
<h1>HTML Best Practices</h1>
<p>For writing maintainable and scalable HTML documents.</p>
Phần tử address là dành cho địa chỉ email, tài khoản mạng xã hôi, địa chỉ đường,
số điện thoại, hoặc cái gì đó mà bạn có thể liên lạc.
Tồi:
<address>No rights reserved.</address>
Tốt:
<address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
Dòng mới đầu tiên sẽ bị trình duyệt bỏ qua, nhưng dòng thứ hai trở đi sẽ được hiển thị.
Tồi:
<pre>
<!DOCTYPE html>
</pre>
Tốt:
<pre><!DOCTYPE html>
</pre>
Nội dung của phần tử blockquote là một trích dẫn, không phải một đoạn ký tự.
Tồi:
<blockquote>For writing maintainable and scalable HTML documents.</blockquote>
Tốt:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
Nội dung của phần tử blockquote là một trích dẫn.
Tồi:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
<p>— HTML Best Practices</p>
</blockquote>
Tốt:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<p>— HTML Best Practices</p>
Cũng tốt:
<figure>
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<figcaption>— HTML Best Practices</figcaption>
</figure>
Dònnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn dài thì quuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuá khó đọc.
Tồi:
<ul>
<li>General</li><li>The root Element</li><li>Sections</li>...
</ul>
Tốt:
<ul>
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ul>
Đôi khi những điểm đánh dấu được tham chiếu bởi nội dung ở gần. Nếu bạn thay đổi
điểm đánh dấu với thuộc tính type, bạn sẽ an toàn khi tham chiếu.
Tồi:
<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>
Tốt:
<body>
<ol type="I">
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ol>
</body>
Phần tử dl bị giới hạn vào một danh sách liên kết trong HTML.
Tồi:
<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>
Tốt:
<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>
Tài liệu không cho phép phần tử figcaption ở giữa phần tử figure.
Tồi:
<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>
Tốt:
<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>
Phần tử main có thể được sử dụng để bọc nội dung.
Tồi:
<div id="content">
...
</div>
Tốt:
<main>
...
</main>
Phần tử div là sự lựa chọn cuối cùng.
Tồi:
<div class="chapter">
...
</div>
Tốt:
<section>
...
</section>
Phần tử a có thể bao bọc hầu hết tất cả các phần tử (ngoại trừ các phần tử
tương tác như biểu mẫu và chính nó).
Tồi:
<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>
Tốt:
<a href="https://whatwg.org/">
<h1>WHATWG</h1>
<p>A community maintaining and evolving HTML since 2004.</p>
</a>
Nó sẽ buộc các trình duyệt tải xuống tài nguyên được liên kết vào bộ nhớ.
Tồi:
<a href="/downloads/offline.zip">offline version</a>
Tốt:
<a download href="/downloads/offline.zip">offline version</a>
Những gợi ý này giúp ứng dụng biết cách xử lý các liên kết đến tài nguyên.
Tồi:
<a href="/ja/pdf">Japanese PDF version</a>
Tốt:
<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
Văn bản liên kết nên là nhãn nếu nó liên kết đến tài nguyên.
Tồi:
<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
Tốt:
<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
Đây là sự nghiêm túc. Vì vậy, phần tử strong thích hợp hơn.
Tồi:
<em>Caution!</em>
Tốt:
<strong>Caution!</strong>
Những ngữ nghĩa của các phần tử này thì quá khó cho con người.
Tồi:
<i class="icon-search"></i>
Tốt:
<span class="icon-search" aria-hidden="true"></span>
Những dấu ngoặc kép được cung cấp bởi trình duyệt.
Tồi:
<q>“For writing maintainable and scalable HTML documents”</q>
Tốt:
<q>For writing maintainable and scalable HTML documents</q>
Cũng tốt:
“For writing maintainable and scalable HTML documents”
Không có cách nào khác để thể hiện sự mở rộng của nó.
Tồi:
<abbr>HBP</abbr>
Tốt:
<abbr title="HTML Best Practices">HBP</abbr>
Phần tử ruby không được hỗ trợ hoàn toàn trên các trình duyệt hiện đại.
Tồi:
<ruby>HTML<rt>えいちてぃーえむえる</ruby>
Tốt:
<ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
Khi thuộc tính datetime không hiển thị, định dạng nội dung của các phần tử time bị hạn chế.
Tồi:
<time>Dec 19, 2014</time>
Tốt:
<time datetime="2014-12-19">Dec 19, 2014</time>
Đây không phải là một cách chính thức, nhưng thông số kỹ thuật đề cập đến nó.
Tồi:
<code><!DOCTYPE html></code>
Tốt:
<code class="language-html"><!DOCTYPE html></code>
Việc lồng phần tử kdb là quá khó đối với con người.
Tồi:
<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
Tốt:
<kbd>Ctrl+F5</kbd>
Phần tử span là sự lựa chọn cuối cùng.
Tồi:
HTML <span class="best">Best</span> Practices
Tốt:
HTML <em>Best</em> Practices
Cần ngắt dòng nơi phần tử br được sử dụng.
Tồi:
<p>HTML<br>Best<br>Practices</p>
Tốt:
<p>HTML<br>
Best<br>
Practices</p>
Phần tử br không được sử dụng cho ngắt dòng, nó dùng để ngắt dòng nội dung.
Tồi:
<p><label>Rule name: <input name="rule-name" type="text"></label><br>
<label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
Tốt:
<p><label>Rule name: <input name="rule-name" type="text"></label></p>
<p><label>Rule description:<br>
<textarea name="rule-description"></textarea></label></p>
Các phần tử không thể bị tràn bởi các phần tử khác.
Tồi:
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
<p>Don’t trust!</p></del>
Tốt:
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
<del><p>Don’t trust!</p></del>
Sự hỗ trợ cho phần tử picture là chưa tốt.
Tồi:
<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>
Tốt:
<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>
Thuộc tính alt sẽ giúp cho những ai không thể xử lý hình ảnh hoặc việc tải hình ảnh bị vô hiệu hóa
Tồi:
<img src="/img/logo.png">
Tốt:
<img alt="HTML Best Practices" src="/img/logo.png">
Nếu hình ảnh là bổ sung, có tương tự nội dung tương tự ở gần đó.
Tồi:
<img alt="Question mark icon" src="/img/icon/help.png"> Help
Tốt:
<img alt="" src="/img/icon/help.png"> Help
Đôi khi bạn không biết văn bản nào là phù hợp với thuộc tính alt.
Tồi:
<img alt="CAPTCHA" src="captcha.cgi?id=82174">
Tốt:
<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.)
Ở đây có một số hạn chế trong nội dung của nó. Nên để trống thì luôn an toàn.
Tồi:
<iframe src="/ads/default.html">
<p>If your browser support inline frame, ads are displayed here.</p>
</iframe>
Tốt:
<iframe src="/ads/default.html"></iframe>
Đây là nội dung được trình bày với trình đọc màn hình.
Tồi:
<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>
Tốt:
<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>
Nội dung dự phòng là cần thiết cho những phần tử mới được giới thiệu trong HTML.
Tồi:
<video>
<source src="/mov/theme.mp4" type="video/mp4">
<source src="/mov/theme.ogv" type="video/ogg">
...
</video>
Tốt:
<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>
Những dòng dài thì khó cho việc quét.
Tồi:
<tr>
<td>General</td><td>The root Element</td><td>Sections</td>
</tr>
Tốt:
<tr>
<td>General</td>
<td>The root Element</td>
<td>Sections</td>
</tr>
Ở đây không có lý do gì để không làm điều đó.
Tồi:
<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>
Tốt:
<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>
Phần tử label giúp tập trung vào phần tử biểu mẫu.
Tồi:
<p>Query: <input name="q" type="text"></p>
Tốt:
<p><label>Query: <input name="q" type="text"></label></p>
Phần tử label có thể chứa một số phần tử biểu mẫu.
Tồi:
<label for="q">Query: </label><input id="q" name="q" type="text">
Tốt:
<label>Query: <input name="q" type="text"></label>
Với type thích hợp, một trình duyệt cung cấp những tính năng nhỏ cho phần tử input.
Tồi:
<label>Search keyword: <input name="q" type="text"></label>
Tốt:
<label>Search keyword: <input name="q" type="search"></label>
Nhãn mặc định cho nút gởi là không tiêu chuẩn hóa trên trình duyệt và ngôn ngữ.
Tồi:
<input type="submit">
Tốt:
<input type="submit" value="Search">
Nếu văn bản đầu vào không khớp cho thuộc tính parttern, thì giá trị của
thuộc tính title sẽ được hiển thị như một gợi ý.
Tồi:
<input name="security-code" pattern="[0-9]{3}" type="text">
Tốt:
<input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
Phần tử label là dành cho một nhãn, thuộc tính placeholder là dành cho một gợi ý ngắn.
Tồi:
<input name="email" placeholder="Email" type="text">
Tốt:
<label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
Dòng dài thì khó cho việc quét.
Tồi:
<datalist id="toc">
<option label="General"><option label="The root element"><option label="Sections">
</datalist>
Tốt:
<datalist id="toc">
<option label="General">
<option label="The root element">
<option label="Sections">
</datalist>
Với thuộc tính max, thuộc tính value có thể được viết ở định dạng dễ hiểu.
Tồi:
<progress value="0.5"> 50%</progress>
Tốt:
<progress max="100" value="50"> 50%</progress>
Với thuộc tính min và max, thuộc tính value có thể được viết ở một
định dạng dễ hiểu.
Tồi:
<meter value="0.5"> 512GB used (1024GB total)</meter>
Tốt:
<meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
Thông số kỹ thuật yêu cầu điều này.
Tồi:
<fieldset>
<p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
<legend>About "General"</legend>
</fieldset>
Tốt:
<fieldset>
<legend>About "General"</legend>
<p><label>Is this section useful?: <input name="usefulness-general" type="checkbox"></label></p>
...
</fieldset>
Trong HTML, giá trị mặc định của thuộc tính type của phần tử script
là text/javascript.
Tồi:
<script type="text/javascript">
...
</script>
Tốt:
<script>
...
</script>
Cách này dành cho các trình duyệt cũ.
Tồi:
<script>
/*<![CDATA[*/
...
/*]]>*/
</script>
Cũng tồi:
<script>
<!--
...
// -->
</script>
Tốt:
<script>
...
</script>
Thuộc tính async là tốt nhất cho cả tính đơn giản và hiệu suất.
Tồi:
<script>
var script = document.createElement("script");
script.async = true;
script.src = "//example.com/widget.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>
Tốt:
<script async defer src="https://example.com/widget.js"></script>
Thụt lề là quan trọng để dễ đọc.
Tồi:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Tốt:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Một đường dẫn tuyệt đối làm việc tốt hơn trên máy chủ cục bộ của bạn mà không cần kết nối internet.
Tồi:
<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>
Tốt:
<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>
Với giao thức, bạn có thể tải tài nguyên bên ngoài một cách tin cậy và an toàn.
Tồi:
<script src="//example.com/js/library.js">
Tốt:
<script src="https://example.com/js/library.js">