Cách viết HTML tối ưu nhất

Để các tài liệu HTML có khả năng bảo trì và mở rộng.

Chung chung

Bắt đầu với DOCTYPE

DOCTYPE là bắt buộc để kích hoạt chế độ no-quirks.

Tồi:

html Copy

<html>
  ...
</html>

Tốt:

html Copy

<!doctype html>
<html>
  ...
</html>

Đừng sử dụng các khai báo DOCTYPE cũ hoặc đã lỗi thời

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:

html Copy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Tốt:

html Copy

<!doctype html>

Đừng sử dụng XML trong khai báo

Bạn có chắc chắn mình muốn viết XHTML?

Tồi:

html Copy

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!doctype html>

Tốt:

html Copy

<!doctype html>

Đừng sử dụng các tham chiếu ký tự càng nhiều càng tốt

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:

html Copy

<p>
  <small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small>
</p>

Tốt:

html Copy

<p>
  <small>Copyright © 2014 W3C<sup>®</sup></small>
</p>

Những ký tự `&`, `<`, `>`, `"` và `'` với tên tham chiếu ký tự

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:

html Copy

<h1>The "&" character</h1>

Tốt:

html Copy

<h1>The &quot;&amp;&quot; character</h1>

Sử dụng tham chiếu ký tự số cho những ký tự điều khiển hoặc những ký tự vô hình

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:

html Copy

<p>This book can read in 1 hour.</p>

Tốt:

html Copy

<p>This book can read in 1&#xA0;hour.</p>

Thêm khoảng trắng xung quanh nội dung ghi chú

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:

html Copy

<!--This section is non-normative-->

Tốt:

html Copy

<!-- This section is non-normative -->

Đừng bỏ qua thẻ đóng

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 Copy

<html>
  <body>
    ...
  </body>
</html>

Tốt:

html Copy

<html>
  <body>
    ...
  </body>
</html>

Đừng trộn lẫn định dạng phần tử trống

Tính nhất quán là chìa khóa cho việc dễ đọc.

Tồi:

html Copy

<img alt="HTML Best Practices" src="/img/logo.png" />
<hr />

Tốt:

html Copy

<img alt="HTML Best Practices" src="/img/logo.png" />
<hr />

Đừng thêm khoảng trắng vào xung quanh các thẻ và giá trị của các thuộc tính

Không có lý do gì để làm điều này.

Tồi:

html Copy

<h1 class=" title ">HTML Best Practices</h1>

Tốt:

html Copy

<h1 class="title">HTML Best Practices</h1>

Đừng trộn lẫn chữ hoa và chữ thường

Nó cũng mang lại một sự nhất quán.

Tồi:

html Copy

<a href="#general">General</a>

Tốt:

html Copy

<a href="#general">General</a>

Cũng được:

html Copy

<a href="#general">General</a>

Đừng trộn lẫn các dấu ngoặc kép

Giống như trên.

Tồi:

html Copy

<img alt="HTML Best Practices" src="/img/logo.jpg" />

Tốt:

html Copy

<img alt="HTML Best Practices" src="/img/logo.jpg" />

Đừng phân tách các thuộc tính bằng hai hoặc nhiều khoảng trắng

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:

html Copy

<input name="q" type="search" />

Tốt:

html Copy

<input name="q" type="search" />

Bỏ qua giá trị thuộc tính boolean

Nó thật dễ dàng để viêt, phải không?

Tồi:

html Copy

<audio autoplay="autoplay" src="/audio/theme.mp3"></audio>

Tốt:

html Copy

<audio autoplay src="/audio/theme.mp3"></audio>

Bỏ qua namespaces

SVG và MathML có thể được sử dụng trực tiếp trong một tài liệu HTML.

Tồi:

html Copy

<svg xmlns="http://www.w3.org/2000/svg">...</svg>

Tốt:

html Copy

<svg>...</svg>

Đừng sử dụng các thuộc tính XML

Chúng tôi viết một tài liệu HTML.

Tồi:

html Copy

<span lang="ja" xml:lang="ja">...</span>

Tốt:

html Copy

<span lang="ja">...</span>

Đừng trộn lẫn thuộc tính `data-*`, Microdata và RDFa Lite với các thuộc tính chung khác

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:

html Copy

<img
  alt="HTML Best Practices"
  data-height="31"
  data-width="88"
  itemprop="image"
  src="/img/logo.png"
/>

Tốt:

html Copy

<img
  alt="HTML Best Practices"
  src="/img/logo.png"
  data-width="88"
  data-height="31"
  itemprop="image"
/>

Ưu tiên các ngữ nghĩa ARIA mặc định ngầm

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:

html Copy

<nav role="navigation">...</nav>

<hr role="separator" />

Tốt:

html Copy

<nav>...</nav>

<hr />

Phần tử root

Copy

### Thêm một thuộc tính `lang`

Thuộc tính `lang` sẽ giúp phiên dịch một tài liệu HTML.

Tồi:
```html
    <html>

Tốt:

html Copy

<html lang="en-US"></html>

Giữ thuộc tính `lang` càng ngắn càng tốt

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 Copy

<html lang="ja-JP"></html>

Tốt:

html Copy

<html lang="ja"></html>

Tránh sử dụng `data-*` càng nhiều càng tốt

Một thuộc tính thích hợp có thể được trình duyệt xử lý đúng cách.

Tồi:

html Copy

<span data-language="french">chemises</span>
...
<strong data-type="warning">Do not wash!</strong>

Tốt:

html Copy

<span title="French"><span lang="fr">chemises</span></span>
...
<strong class="warning">Do not wash!</strong>

## Document metadata

Thêm phần tử `title`

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:

html Copy

<head>
  <meta charset="UTF-8" />
</head>

Tốt:

html Copy

<head>
  <meta charset="UTF-8" />
  <title>HTML Best Practices</title>
</head>

Đừng sử dụng thuộc tính `base`

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:

html Copy

<head>
  ...
  <base href="/blog/" />
  <link href="hello-world" rel="canonical" />
  ...
</head>

Tốt:

html Copy

<head>
  ...
  <link href="/blog/hello-world" rel="canonical" />
  ...
</head>

Chỉnh định kiểu MIME hoặc các tài nguyên liên kết phụ

Đây là một gợi ý về cách ứng dụng xử lý tài nguyên này.

Tồi:

html Copy

<link href="/pdf" rel="alternate" />
<link href="/feed" rel="alternate" />
<link href="/css/screen.css" rel="stylesheet" />

Tốt:

html Copy

<link href="/pdf" rel="alternate" type="application/pdf" />
<link href="/feed" rel="alternate" type="application/rss+xml" />
<link href="/css/screen.css" rel="stylesheet" />

Đừng liên kết đến `favico.ico`

Hầu hết các trình duyệt nạp /favicon.ico tự động và không đồng bộ.

Tồi:

html Copy

<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon" />

Tốt:

html Copy

<!-- Place `favicon.ico` in the root directory. -->

Thêm liên kết `apple-touch-icon`

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:

html Copy

<!-- Hey Apple! Please download `/apple-touch-icon.png`! -->

Tốt:

html Copy

<link href="/apple-touch-icon.png" rel="apple-touch-icon" />

Thêm thuộc tính `title` cho định dạng kiểu luân phiên

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:

html Copy

<link href="/css/screen.css" rel="stylesheet" />
<link href="/css/high-contrast.css" rel="alternate stylesheet" />

Tốt:

html Copy

<link href="/css/screen.css" rel="stylesheet" />
<link
  href="/css/high-contrast.css"
  rel="alternate stylesheet"
  title="High contrast"
/>

Với URL, sử dụng phần tử `link`

Giá trị của thuộc tính href có thể được phân giải như một URL.

Tồi:

html Copy

<section itemscope itemtype="http://schema.org/BlogPosting">
  <meta content="https://example.com/blog/hello" itemprop="url" />
  ...
</section>

Tốt:

html Copy

<section itemscope itemtype="http://schema.org/BlogPosting">
  <link href="/blog/hello" itemprop="url" />
  ...
</section>

Chỉ định mã hóa ký tự của tài liệu

UTF-8 chưa phải là mặc định trên tất cả các trình duyệt.

Tồi:

html Copy

<head>
  <title>HTML Best Practices</title>
</head>

Tốt:

html Copy

<head>
  <meta charset="UTF-8" />
  <title>HTML Best Practices</title>
</head>

Đừng sử dụng định dạng mã hóa ký tự cũ

HTTP headers được chỉnh định bởi một máy chủ, hãy giữ nó đơn giản.

Tồi:

html Copy

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Tốt:

html Copy

<meta charset="UTF-8" />

Chỉ định mã hóa ký tự vào đầu tài liệu

Đặ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:

html Copy

<head>
  <meta content="width=device-width" name="viewport" />
  <meta charset="UTF-8" />
  ...
</head>

Tốt:

html Copy

<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width" name="viewport" />
  ...
</head>

Sử dụng UTF-8

Với UTF-8, bạn sử dụng Emoji miễn phí.

Tồi:

html Copy

<meta charset="Shift_JIS" />

Tốt:

html Copy

<meta charset="UTF-8" />

Bỏ qua thuộc tính `type` cho CSS

Trong HTML, giá trị mặc định của thuộc tính type của style là text/css.

Tồi:

html Copy

<style type="text/css">
  ...
</style>

Tốt:

html Copy

<style>
  ...
</style>

Đừng ghi chú trong nội dung của phần tử `style`

Cách này dành cho các trình duyệt cũ.

Tồi:

html Copy

<style>
  <!--
    ...
    -->
</style>

Tốt:

html Copy

<style>
  ...
</style>

Đừng trộn lẫn thẻ cho CSS và JavaScript

Đội khi phần tử script chặn việc dựng DOM.

Tồi:

html Copy

<script src="/js/jquery.min.js"></script>
<link href="/css/screen.css" rel="stylesheet" />
<script src="/js/main.js"></script>

Tốt:

html Copy

<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" />

## Sections

Thêm thuộc tính `body`

Đôi khi phần tử body được trình duyệt bổ sung ở vị trí không mong muốn.

Tồi:

html Copy

<html>
  <head>
    ...
  </head>
  ...
</html>

Tốt:

html Copy

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Quên phần tử `hgroup` đi

Phần tử này không được sử dụng quá nhiều.

Tồi:

html Copy

<hgroup>
  <h1>HTML Best Practices</h1>
  <h2>For writing maintainable and scalable HTML documents.</h2>
</hgroup>

Tốt:

html Copy

<h1>HTML Best Practices</h1>
<p>For writing maintainable and scalable HTML documents.</p>

Chỉ sử dụng phần tử `address` cho thông tin liên lạc

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:

html Copy

<address>No rights reserved.</address>

Tốt:

html Copy

<address>
  Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a>
</address>

## Nhóm nội dung

Đừng quên bắt đầu với dòng mới trong phần tử `pre`

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:

html Copy

<pre>
    &lt;!DOCTYPE html&gt;
    </pre
>

Tốt:

html Copy

<pre>
&lt;!DOCTYPE html&gt;
    </pre
>

Sử dụng phần tử phù hợp trong `blockquote`

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:

html Copy

<blockquote>For writing maintainable and scalable HTML documents.</blockquote>

Tốt:

html Copy

<blockquote>
  <p>For writing maintainable and scalable HTML documents.</p>
</blockquote>

Đừng bao gồm sự chỉ định trong phần tử `blockquote`

Nội dung của phần tử blockquote là một trích dẫn.

Tồi:

html Copy

<blockquote>
  <p>For writing maintainable and scalable HTML documents.</p>

  <p>— HTML Best Practices</p>
</blockquote>

Tốt:

html Copy

<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>

Viết một danh sách trên mỗi dòng

Dònnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn
dài thì quuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuá khó đọc.

Tồi:

html Copy

<ul>
  <li>General</li>
  <li>The root Element</li>
  <li>Sections</li>
  ...
</ul>

Tốt:

html Copy

<ul>
  <li>General</li>
  <li>The root Element</li>
  <li>Sections</li>
  ...
</ul>

Sử dụng thuộc tính `type` cho phần tử `ol`

Đô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:

html Copy

<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:

html Copy

<body>
  <ol type="I">
    <li>General</li>
    <li>The root Element</li>
    <li>Sections</li>
    ...
  </ol>
</body>

Đừng sử dụng `dl` cho đoạn hội thoại

Phần tử dl bị giới hạn vào một danh sách liên kết trong HTML.

Tồi:

html Copy

    <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:

html Copy

<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 phần tử `figcaption` là phần tử đầu hoặc cuối của phần tử `figure`

Tài liệu không cho phép phần tử figcaption ở giữa phần tử figure.

Tồi:

html Copy

<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:

html Copy

<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>

Sử dụng phần tử `main`

Phần tử main có thể được sử dụng để bọc nội dung.

Tồi:

html Copy

<div id="content">...</div>

Tốt:

html Copy

<main>...</main>

Tránh sử dụng phần tử `div` càng nhiều càng tốt

Phần tử div là sự lựa chọn cuối cùng.

Tồi:

html Copy

<div class="chapter">...</div>

Tốt:

html Copy

<section>...</section>

## Ngữ nghĩa cấp độ văn bản

Đừng chia thành nhiều liên kết giống nhau mà có thể nhóm lại

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:

html Copy

<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:

html Copy

<a href="https://whatwg.org/">
  <h1>WHATWG</h1>

  <p>A community maintaining and evolving HTML since 2004.</p>
</a>

Sử dụng thuộc tính `download` cho việc tải một tài nguyên

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:

html Copy

<a href="/downloads/offline.zip">offline version</a>

Tốt:

html Copy

<a download href="/downloads/offline.zip">offline version</a>

Sử dụng thuộc tính `rel`, `hreflang` và `type` nếu cần

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:

html Copy

<a href="/ja/pdf">Japanese PDF version</a>

Tốt:

html Copy

<a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf"
  >Japanese PDF version</a
>

Làm sạch văn bản liên kết

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:

html Copy

<p>
  <a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view
  PDF version.
</p>

Tốt:

html Copy

<p>
  <a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also
  available.
</p>

Đừng sử dụng thuộc tính `em` cho cảnh báo hoặc thận trọng

Đây là sự nghiêm túc. Vì vậy, phần tử strong thích hợp hơn.

Tồi:

html Copy

<em>Caution!</em>

Tốt:

html Copy

<strong>Caution!</strong>

Tránh phần tử `s`, `i`, `b` và `u` càng nhiều càng tốt

Những ngữ nghĩa của các phần tử này thì quá khó cho con người.

Tồi:

html Copy

<i class="icon-search"></i>

Tốt:

html Copy

<span class="icon-search" aria-hidden="true"></span>

Đừng thêm dấu ngoặc kép trong phần tử `q`

Những dấu ngoặc kép được cung cấp bởi trình duyệt.

Tồi:

html Copy

<q>“For writing maintainable and scalable HTML documents”</q>

Tốt:

html Copy

<q>For writing maintainable and scalable HTML documents</q>

Cũng tốt: “For writing maintainable and scalable HTML documents”

Thêm thuộc tính `title` cho phần từ `abbr`

Không có cách nào khác để thể hiện sự mở rộng của nó.

Tồi:

html Copy

<abbr>HBP</abbr>

Tốt:

html Copy

<abbr title="HTML Best Practices">HBP</abbr>

Đánh dấu phần tử `ruby` dài dòng

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:

html Copy

<ruby>HTML<rt>えいちてぃーえむえる</rt></ruby>

Tốt:

html Copy

<ruby>HTML<rp>(</rp><rt>えいちてぃーえむえる</rt><rp>)</rp></ruby>

Thêm thuộc tính `datetime` vào phần từ `time` không thể đọc được bằng máy

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:

html Copy

<time>Dec 19, 2014</time>

Tốt:

html Copy

<time datetime="2014-12-19">Dec 19, 2014</time>

Chỉ định code languge với thuộc tính `class` có tiền tố `language-`

Đâ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:

html Copy

<code>&lt;!DOCTYPE html&gt;</code>

Tốt:

html Copy

<code class="language-html">&lt;!DOCTYPE html&gt;</code>

Giữ phần tử `kbd` càng đơn giản càng tốt

Việc lồng phần tử kdb là quá khó đối với con người.

Tồi:

html Copy

<kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>

Tốt:

html Copy

<kbd>Ctrl+F5</kbd>

Tránh sử dụng phần tử `span` càng nhiều càng tốt

Phần tử span là sự lựa chọn cuối cùng.

Tồi:

html Copy

HTML <span class="best">Best</span> Practices

Tốt:

html Copy

HTML <em>Best</em> Practices

Xuống dòng sau phần tử `br`

Cần ngắt dòng nơi phần tử br được sử dụng.

Tồi:

html Copy

<p>HTML<br />Best<br />Practices</p>

Tốt:

html Copy

<p>
  HTML<br />
  Best<br />
  Practices
</p>

Đừng sử dụng phần tử `br` cho mục đích trình bày

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:

html Copy

<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:

html Copy

<p>
  <label>Rule name: <input name="rule-name" type="text" /></label>
</p>
<p>
  <label
    >Rule description:<br />
    <textarea name="rule-description"></textarea>
  </label>
</p>

## Chỉnh sửa

Không lấn phần tử `ins` và `del` lên các phần tử khác

Các phần tử không thể bị tràn bởi các phần tử khác.

Tồi:

html Copy

    <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>

    <p>Don’t trust!</p></del>

Tốt:

html Copy

<p>
  For writing maintainable and scalable HTML documents.<del>
    And for mental stability.</del
  >
</p>

<del><p>Don’t trust!</p></del>

## Nội dung được nhúng

Cung cấp phần tử `img` dự phòng cho phần tử `picture`

Sự hỗ trợ cho phần tử picture là chưa tốt.

Tồi:

html Copy

<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:

html Copy

<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>

Thêm thuộc tính `alt` cho phần tử `img` nếu cần thiết

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:

html Copy

<img src="/img/logo.png" />

Tốt:

html Copy

<img alt="HTML Best Practices" src="/img/logo.png" />

Thuộc tính `alt` để trống nếu có thể

Nếu hình ảnh là bổ sung, có tương tự nội dung tương tự ở gần đó.

Tồi:

html Copy

<img alt="Question mark icon" src="/img/icon/help.png" /> Help

Tốt:

html Copy

<img alt="" src="/img/icon/help.png" /> Help

Bỏ qua thuộc tính `alt` nếu có thể

Đô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:

html Copy

<img alt="CAPTCHA" src="captcha.cgi?id=82174" />

Tốt:

html Copy

<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.)

Phần tử `iframe` rỗng

Ở đâ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:

html Copy

<iframe src="/ads/default.html">
  <p>If your browser support inline frame, ads are displayed here.</p>
</iframe>

Tốt:

html Copy

<iframe src="/ads/default.html"></iframe>

Đánh dấu nội dung phần tử `map`

Đây là nội dung được trình bày với trình đọc màn hình.

Tồi:

html Copy

<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:

html Copy

<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>

Cung cấp nội dung dự phòng cho phần tử `audio` hoặc `video`

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:

html Copy

<video>
  <source src="/mov/theme.mp4" type="video/mp4" />
  <source src="/mov/theme.ogv" type="video/ogg" />
  ...
</video>

Tốt:

html Copy

<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>

## Dữ liệu dạng bảng

Viết một ô trên một dòng

Những dòng dài thì khó cho việc quét.

Tồi:

html Copy

<tr>
  <td>General</td>
  <td>The root Element</td>
  <td>Sections</td>
</tr>

Tốt:

html Copy

<tr>
  <td>General</td>
  <td>The root Element</td>
  <td>Sections</td>
</tr>

Sử dụng phần tử `th` cho ô tiêu đề

Ở đây không có lý do gì để không làm điều đó.

Tồi:

html Copy

<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:

html Copy

<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>

## Biểu mẫu

Bao bọc biểu mẫu điều khiển với phần tử `label`

Phần tử label giúp tập trung vào phần tử biểu mẫu.

Tồi:

html Copy

<p>Query: <input name="q" type="text" /></p>

Tốt:

html Copy

<p>
  <label>Query: <input name="q" type="text" /></label>
</p>

Bỏ qua thuộc tính `for` nếu có thể

Phần tử label có thể chứa một số phần tử biểu mẫu.

Tồi:

html Copy

<label for="q">Query: </label><input id="q" name="q" type="text" />

Tốt:

html Copy

<label>Query: <input name="q" type="text" /></label>

Sử dụng thích hợp thuộc tính `type` cho phần tử `input`

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:

html Copy

<label>Search keyword: <input name="q" type="text" /></label>

Tốt:

html Copy

<label>Search keyword: <input name="q" type="search" /></label>

Thêm thuộc tính `value` cho `input type="submit`

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:

html Copy

<input type="submit" />

Tốt:

html Copy

<input type="submit" value="Search" />

Thêm thuộc tính `title` cho phần tử `input` khi có thuộc tính `pattern`

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:

html Copy

<input name="security-code" pattern="[0-9]{3}" type="text" />

Tốt:

html Copy

<input
  name="security-code"
  pattern="[0-9]{3}"
  title="A security code is a number in three figures."
  type="text"
/>

Don’t use `placeholder` attribute for labeling Đừng sử dụng thuộc tính `placeholder` để gắn nhãn

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:

html Copy

<input name="email" placeholder="Email" type="text" />

Tốt:

html Copy

<label
  >Email: <input name="email" placeholder="john.doe@example.com" type="text"
/></label>

Viết một phần tử option trên một dòng

Dòng dài thì khó cho việc quét.

Tồi:

html Copy

<datalist id="toc">
  <option label="General"></option>
  <option label="The root element"></option>
  <option label="Sections"></option>
</datalist>

Tốt:

html Copy

<datalist id="toc">
  <option label="General"></option>
  <option label="The root element"></option>
  <option label="Sections"></option>
</datalist>

Thêm thuộc tính `max` cho phần tử `progress`

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:

html Copy

<progress value="0.5">50%</progress>

Tốt:

html Copy

<progress max="100" value="50">50%</progress>

Thêm thuộc tính `min` và `max` cho phần tử `meter`

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:

html Copy

<meter value="0.5">512GB used (1024GB total)</meter>

Tốt:

html Copy

<meter min="0" max="1024" value="512">512GB used (1024GB total)</meter>

Đặt phần tử `legend` như một phần tử con đầu tiên của phần tử `fieldset`

Thông số kỹ thuật yêu cầu điều này.

Tồi:

html Copy

<fieldset>
  <p>
    <label
      >Is this section useful?:
      <input name="usefulness-general" type="checkbox"
    /></label>
  </p>
  ...
  <legend>About "General"</legend>
</fieldset>

Tốt:

html Copy

<fieldset>
  <legend>About "General"</legend>
  <p>
    <label
      >Is this section useful?:
      <input name="usefulness-general" type="checkbox"
    /></label>
  </p>
  ...
</fieldset>

## Viết kịch bản

Bỏ qua thuộc tính `type` cho JavaScript

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:

html Copy

<script type="text/javascript">
  ...
</script>

Tốt:

html Copy

<script>
  ...
</script>

Đừng ghi chú trong nôi dung của phần tử `script`

Cách này dành cho các trình duyệt cũ.

Tồi:

html Copy

<script>
  /*<![CDATA[*/
    ...
  /*]]>*/
</script>

Cũng tồi:

<script>
  <!--
    ...
  // -->
</script>

Tốt:

html Copy

<script>
  ...
</script>

Không sử dụng tập lệnh chèn cho phần tử `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:

html Copy

<script>
  var script = document.createElement('script')
  script.async = true
  script.src = '//example.com/widget.js'
  document.getElementsByTagName('head')[0].appendChild(script)
</script>

Tốt:

html Copy

<script async defer src="https://example.com/widget.js"></script>

## Khác

Thụt lề một cách nhất quán

Thụt lề là quan trọng để dễ đọc.

Tồi:

html Copy

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Tốt:

html Copy

<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

Sử dụng đường dẫn tuyệt đối cho các liên kết nội bộ

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:

html Copy

<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:

html Copy

<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>

Đừng sử dụng URL tương đối cho các tài nguyên bên ngoài

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:

html Copy

    <script src="//example.com/js/library.js">

Tốt:

html Copy

    <script src="https://example.com/js/library.js">

Cách viết HTML tối ưu nhất

Chung chung

Bắt đầu với DOCTYPE

Đừng sử dụng các khai báo DOCTYPE cũ hoặc đã lỗi thời

Đừng sử dụng XML trong khai báo

Đừng sử dụng các tham chiếu ký tự càng nhiều càng tốt

Những ký tự &, <, >, " và ' với tên tham chiếu ký tự

Sử dụng tham chiếu ký tự số cho những ký tự điều khiển hoặc những ký tự vô hình

Thêm khoảng trắng xung quanh nội dung ghi chú

Đừng bỏ qua thẻ đóng

Đừng trộn lẫn định dạng phần tử trống

Đừng thêm khoảng trắng vào xung quanh các thẻ và giá trị của các thuộc tính

Đừng trộn lẫn chữ hoa và chữ thường

Đừng trộn lẫn các dấu ngoặc kép

Đừng phân tách các thuộc tính bằng hai hoặc nhiều khoảng trắng

Bỏ qua giá trị thuộc tính boolean

Bỏ qua namespaces

Đừng sử dụng các thuộc tính XML

Đừng trộn lẫn thuộc tính data-*, Microdata và RDFa Lite với các thuộc tính chung khác

Ưu tiên các ngữ nghĩa ARIA mặc định ngầm

Phần tử root

Giữ thuộc tính lang càng ngắn càng tốt

Tránh sử dụng data-* càng nhiều càng tốt

Thêm phần tử title

Đừng sử dụng thuộc tính base

Chỉnh định kiểu MIME hoặc các tài nguyên liên kết phụ

Đừng liên kết đến favico.ico

Thêm liên kết apple-touch-icon

Thêm thuộc tính title cho định dạng kiểu luân phiên

Với URL, sử dụng phần tử link

Chỉ định mã hóa ký tự của tài liệu

Đừng sử dụng định dạng mã hóa ký tự cũ

Chỉ định mã hóa ký tự vào đầu tài liệu

Sử dụng UTF-8

Bỏ qua thuộc tính type cho CSS

Đừng ghi chú trong nội dung của phần tử style

Đừng trộn lẫn thẻ cho CSS và JavaScript

Thêm thuộc tính body

Quên phần tử hgroup đi

Chỉ sử dụng phần tử address cho thông tin liên lạc

Đừng quên bắt đầu với dòng mới trong phần tử pre

Sử dụng phần tử phù hợp trong blockquote

Đừng bao gồm sự chỉ định trong phần tử blockquote

Viết một danh sách trên mỗi dòng

Sử dụng thuộc tính type cho phần tử ol

Đừng sử dụng dl cho đoạn hội thoại

Đặt phần tử figcaption là phần tử đầu hoặc cuối của phần tử figure

Sử dụng phần tử main

Tránh sử dụng phần tử div càng nhiều càng tốt

Đừng chia thành nhiều liên kết giống nhau mà có thể nhóm lại

Sử dụng thuộc tính download cho việc tải một tài nguyên

Sử dụng thuộc tính rel, hreflang và type nếu cần

Làm sạch văn bản liên kết

Đừng sử dụng thuộc tính em cho cảnh báo hoặc thận trọng

Tránh phần tử s, i, b và u càng nhiều càng tốt

Đừng thêm dấu ngoặc kép trong phần tử q

Thêm thuộc tính title cho phần từ abbr

Đánh dấu phần tử ruby dài dòng

Thêm thuộc tính datetime vào phần từ time không thể đọc được bằng máy

Chỉ định code languge với thuộc tính class có tiền tố language-

Giữ phần tử kbd càng đơn giản càng tốt

Tránh sử dụng phần tử span càng nhiều càng tốt

Xuống dòng sau phần tử br

Đừng sử dụng phần tử br cho mục đích trình bày

Không lấn phần tử ins và del lên các phần tử khác

Cung cấp phần tử img dự phòng cho phần tử picture

Thêm thuộc tính alt cho phần tử img nếu cần thiết

Thuộc tính alt để trống nếu có thể

Bỏ qua thuộc tính alt nếu có thể

Phần tử iframe rỗng

Đánh dấu nội dung phần tử map

Cung cấp nội dung dự phòng cho phần tử audio hoặc video

Viết một ô trên một dòng

Sử dụng phần tử th cho ô tiêu đề

Bao bọc biểu mẫu điều khiển với phần tử label

Bỏ qua thuộc tính for nếu có thể

Sử dụng thích hợp thuộc tính type cho phần tử input

Thêm thuộc tính value cho input type="submit

Thêm thuộc tính title cho phần tử input khi có thuộc tính pattern

Don’t use placeholder attribute for labeling Đừng sử dụng thuộc tính placeholder để gắn nhãn

Những ký tự `&`, `<`, `>`, `"` và `'` với tên tham chiếu ký tự

Đừng trộn lẫn thuộc tính `data-*`, Microdata và RDFa Lite với các thuộc tính chung khác

Giữ thuộc tính `lang` càng ngắn càng tốt

Tránh sử dụng `data-*` càng nhiều càng tốt

Thêm phần tử `title`

Đừng sử dụng thuộc tính `base`

Đừng liên kết đến `favico.ico`

Thêm liên kết `apple-touch-icon`

Thêm thuộc tính `title` cho định dạng kiểu luân phiên

Với URL, sử dụng phần tử `link`

Bỏ qua thuộc tính `type` cho CSS

Đừng ghi chú trong nội dung của phần tử `style`

Thêm thuộc tính `body`

Quên phần tử `hgroup` đi

Chỉ sử dụng phần tử `address` cho thông tin liên lạc

Đừng quên bắt đầu với dòng mới trong phần tử `pre`

Sử dụng phần tử phù hợp trong `blockquote`

Đừng bao gồm sự chỉ định trong phần tử `blockquote`

Sử dụng thuộc tính `type` cho phần tử `ol`

Đừng sử dụng `dl` cho đoạn hội thoại

Đặt phần tử `figcaption` là phần tử đầu hoặc cuối của phần tử `figure`

Sử dụng phần tử `main`

Tránh sử dụng phần tử `div` càng nhiều càng tốt

Sử dụng thuộc tính `download` cho việc tải một tài nguyên

Sử dụng thuộc tính `rel`, `hreflang` và `type` nếu cần

Đừng sử dụng thuộc tính `em` cho cảnh báo hoặc thận trọng

Tránh phần tử `s`, `i`, `b` và `u` càng nhiều càng tốt

Đừng thêm dấu ngoặc kép trong phần tử `q`

Thêm thuộc tính `title` cho phần từ `abbr`

Đánh dấu phần tử `ruby` dài dòng

Thêm thuộc tính `datetime` vào phần từ `time` không thể đọc được bằng máy

Chỉ định code languge với thuộc tính `class` có tiền tố `language-`

Giữ phần tử `kbd` càng đơn giản càng tốt

Tránh sử dụng phần tử `span` càng nhiều càng tốt

Xuống dòng sau phần tử `br`

Đừng sử dụng phần tử `br` cho mục đích trình bày

Không lấn phần tử `ins` và `del` lên các phần tử khác

Cung cấp phần tử `img` dự phòng cho phần tử `picture`

Thêm thuộc tính `alt` cho phần tử `img` nếu cần thiết

Thuộc tính `alt` để trống nếu có thể

Bỏ qua thuộc tính `alt` nếu có thể

Phần tử `iframe` rỗng

Đánh dấu nội dung phần tử `map`

Cung cấp nội dung dự phòng cho phần tử `audio` hoặc `video`

Sử dụng phần tử `th` cho ô tiêu đề

Bao bọc biểu mẫu điều khiển với phần tử `label`

Bỏ qua thuộc tính `for` nếu có thể

Sử dụng thích hợp thuộc tính `type` cho phần tử `input`

Thêm thuộc tính `value` cho `input type="submit`

Thêm thuộc tính `title` cho phần tử `input` khi có thuộc tính `pattern`

Don’t use `placeholder` attribute for labeling Đừng sử dụng thuộc tính `placeholder` để gắn nhãn

Thêm thuộc tính `max` cho phần tử `progress`

Thêm thuộc tính `min` và `max` cho phần tử `meter`

Đặt phần tử `legend` như một phần tử con đầu tiên của phần tử `fieldset`

Bỏ qua thuộc tính `type` cho JavaScript

Đừng ghi chú trong nôi dung của phần tử `script`

Không sử dụng tập lệnh chèn cho phần tử `script`