Hướng dẫn và quy ước mã HTML(5)

HTML code conventions

Web developers often do not know the style and syntax of the code used in HTML.

Between 2000 and 2010, many web developers switched from HTML to XHTML.

Through XHTML, developers had to write valid 'well-formed' code.

HTML5 is a bit more lenient when validating code.

Through HTML5, you must create your ownBest Practices, Hướng dẫn phong cách và quy ước mã.

Thông minh và đảm bảo tương lai

Việc sử dụng phong cách gọn gàng và hợp lý của phong cách có thể giúp người khác dễ hiểu và sử dụng HTML của bạn hơn.

Trong tương lai, các chương trình như trình đọc XML có thể cần đọc HTML của bạn.

Sử dụng ngữ pháp 'tương tự XHTML' có định dạng tốt hơn.

Ghi chú:Vui lòng始终保持 phong cách của bạn thông minh, sạch sẽ, trong suốt và có định dạng tốt.

Vui lòng sử dụng loại tài liệu chính xác

Vui lòng luôn thông báo loại tài liệu đầu tiên trong dòng đầu tiên của tài liệu:

<!DOCTYPE html>

Nếu bạn luôn kiên trì sử dụng thẻ thường, bạn có thể sử dụng:

<!doctype html>

Vui lòng sử dụng tên phần tử thường

HTML5 cho phép sử dụng chữ thường và hoa trong tên phần tử.

Chúng tôi khuyến nghị sử dụng tên phần tử thường:

  • Tên hỗn hợp không tốt
  • Phát triển viên có thói quen sử dụng tên thường (ví dụ: trong XHTML)
  • Chữ thường dễ sạch hơn
  • Chữ thường dễ viết hơn

Không tốt lắm:

<SECTION> 
  <p>Đây là một đoạn văn.</p>
</SECTION>

Rất tệ:

<Section> 
  <p>Đây là một đoạn văn.</p>
</SECTION>

Cũng không tệ lắm:

<section> 
  <p>Đây là một đoạn văn.</p>
</section>

Tắt tất cả các phần tử HTML

Trong HTML5, bạn không cần phải tắt tất cả các phần tử (ví dụ: phần tử <p>).

Chúng tôi đề xuất tắt tất cả các phần tử HTML:

Nó trông không tốt:

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

Nó trông rất tốt:

<section>
  <p>Đây là một đoạn văn.</p>
  <p>Đây là một đoạn văn.</p>
</section>

Đóng phần tử HTML trống

Trong HTML5, việc đóng các phần tử trống là tùy chọn.

Được phép như thế này:

<meta charset="utf-8">

Cũng được phép như thế này:

<meta charset="utf-8" />

Dấu chéo (/) là bắt buộc trong XHTML và XML.

Nếu bạn mong muốn phần mềm XML truy cập trang web của bạn, việc duy trì thói quen này là một ý tưởng tốt.

Sử dụng tên thuộc tính viết thường

HTML5 cho phép tên thuộc tính hỗn hợp viết thường và viết hoa.

Chúng tôi khuyên bạn nên sử dụng tên thuộc tính viết thường:

  • Tên thuộc tính pha trộn không tốt
  • Nhà phát triển có thói quen sử dụng tên thuộc tính viết thường (ví dụ trong XHTML)
  • Tên thuộc tính viết thường nhìn trong sáng hơn
  • Tên thuộc tính viết thường dễ viết hơn

Nó trông không tốt:

<div CLASS="menu">

Nó trông rất tốt:

<div class="menu">

Giá trị thuộc tính với dấu ngoặc kép

HTML5 cho phép giá trị thuộc tính không có dấu ngoặc kép.

Chúng tôi khuyên bạn nên thêm dấu ngoặc kép vào giá trị thuộc tính:

  • Nếu giá trị thuộc tính chứa giá trị, thì phải sử dụng dấu ngoặc kép
  • Pha trộn phong cách样式 tuyệt đối không tốt
  • Giá trị trong dấu ngoặc kép dễ đọc hơn

Giá trị thuộc tính này không hợp lệ vì chứa khoảng trống:

<table class=table striped>

Cách này là hợp lệ:

<table class="table striped">

Thuộc tính bắt buộc

Hãy luôn sử dụng cho hình ảnh alt Thuộc tính. Thuộc tính này rất quan trọng khi hình ảnh không thể hiển thị.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Hãy luôn định nghĩa kích thước của hình ảnh. Điều này sẽ giảm thiểu hiện tượng chớp mắt, vì trình duyệt sẽ để lại không gian cho hình ảnh trước khi tải.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Khoảng trống và dấu bằng

Các khoảng trống hai bên dấu bằng là hợp lệ:

<link rel = "stylesheet" href = "styles.css">

Nhưng việc tinh gọn không gian trống dễ đọc hơn, But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

Tránh các dòng mã dài

Khi sử dụng trình chỉnh sửa HTML, việc cuộn trái phải để đọc mã HTML rất不方便.

Hãy尽量避免每行代码超过 80 个字符。

Dòng trống và dấu nhấn

Hãy tránh tăng thêm các dòng trống không có lý do.

Để tăng cường khả năng đọc, hãy thêm các dòng trống để phân隔 các khối mã lớn hoặc logic.

Để tăng cường khả năng đọc, hãy tăng thêm hai dấu cách để nhấn vào.

Hãy tránh sử dụng các dòng trống và dấu nhấn không cần thiết.

Không cần thiết:

<body>
  <h1>Thành phố nổi tiếng</h1>
  <h2>Tokyo</h2>
  <p>
    Tokyo là thủ đô của Nhật Bản, trung tâm của khu vực Tokyo lớn,
    và khu vực đô thị đông dân nhất thế giới.
    Nó là nơi đặt chính phủ Nhật Bản và Cung điện Hoàng gia,
    và nơi ở của gia đình hoàng gia Nhật Bản.
  </p>
</body>

Tốt hơn:

<body>
<h1>Thành phố nổi tiếng</h1>
<h2>Tokyo</h2>
<p>
Tokyo là thủ đô của Nhật Bản, trung tâm của khu vực Tokyo lớn,
và khu vực đô thị đông dân nhất thế giới.
Nó là nơi đặt chính phủ Nhật Bản và Cung điện Hoàng gia,
và nơi ở của gia đình hoàng gia Nhật Bản.
</p>
</body>

Ví dụ về bảng:

<table>
  <tr>
    <th>Tên</th>
    <th>Mô tả</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Mô tả của A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Mô tả của B</td>
  <tr>
</table>

Ví dụ về danh sách:

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

Bỏ qua <html> và <body>?

Trong tiêu chuẩn HTML5, thẻ <html> và <body> cũng có thể được bỏ qua.

Mã dưới đây được kiểm tra theo HTML5:

Ví dụ

<!DOCTYPE html>
<head>
  <title>Titile của trang</title>
</head>
<h1>Đây là một tiêu đề.</h1>
<p>Đây là một đoạn văn.</p>

Thử nghiệm trực tiếp

Chúng tôi không khuyến khích bỏ qua thẻ <html> và <body>.

Thẻ <html> là thẻ gốc của văn bản. Nó là vị trí lý tưởng để quy định ngôn ngữ của trang.

<!DOCTYPE html>
<html lang="en-US">

Đối với các ứng dụng dễ truy cập (trình đọc màn hình) và công cụ tìm kiếm, việc tuyên bố ngôn ngữ rất quan trọng.

Bỏ qua <html> hoặc <body> có thể gây ra sự cố cho phần mềm DOM và XML.

Bỏ qua <body> có thể gây ra lỗi trong trình duyệt cũ (IE9).

Bỏ qua <head>?

Trong tiêu chuẩn HTML5, thẻ <head> cũng có thể được bỏ qua.

Mặc định, trình duyệt sẽ thêm tất cả các yếu tố trước thẻ <body> vào thẻ <head> mặc định.

Bằng cách bỏ qua thẻ <head>, bạn có thể giảm độ phức tạp của HTML:

Ví dụ

<!DOCTYPE html>
<html>
<title>Titile của trang</title>
<body>
  <h1>Đây là một tiêu đề.</h1>
  <p>Đây là một đoạn văn.</p>
</body>
</html>

Thử nghiệm trực tiếp

Ghi chú:Đối với nhà phát triển web, việc bỏ qua thẻ là không quen thuộc. Việc xây dựng quy tắc đòi hỏi thời gian.

Metadata

Thẻ <title> là bắt buộc trong HTML5. Hãy tạo tiêu đề có ý nghĩa nếu có thể.

<title>HTML5 Syntax and Coding Style</title>

Để đảm bảo giải thích chính xác và chỉ số tìm kiếm của công cụ tìm kiếm, hãy định nghĩa ngôn ngữ và mã hóa ký tự trong tài liệu sớm nhất có thể:

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

Chú thích HTML

Ghi chú ngắn nên được viết trong một dòng, và thêm một khoảng trống sau <!-- và trước -->:

<!-- This is a comment -->

Ghi chú dài, chia thành nhiều dòng, nên được viết riêng trong dòng khác nhau bằng <!-- và -->:

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

Ghi chú dài hơn dễ dàng quan sát hơn nếu chúng được lùi hai khoảng trống.

Biểu mẫu phong cách

Hãy sử dụng ngữ pháp đơn giản để liên kết biểu mẫu phong cách (thuộc tính type không bắt buộc):

<link rel="stylesheet" href="styles.css">

Các quy tắc ngắn có thể được nén thành một dòng, như thế này:

p.into {font-family:"Verdana"; font-size:16em;}

Các quy tắc dài nên được chia thành nhiều dòng:

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • Dấu mở ngoặc và chọn器 nằm trên cùng một dòng
  • Sử dụng một khoảng trống trước dấu mở ngoặc
  • Sử dụng khoảng trống hai ký tự để nhúng
  • Sử dụng dấu hai chấm và một khoảng trống giữa thuộc tính và giá trị
  • Sử dụng khoảng trống sau mỗi dấu phẩy hoặc dấu chấm phẩy
  • Sử dụng dấu chấm phẩy sau mỗi cặp giá trị thuộc tính (bao gồm cả cặp cuối cùng)
  • Chỉ sử dụng dấu ngoặc kép để bao quanh giá trị khi giá trị chứa khoảng trống
  • Đặt dấu đóng ngoặc vào dòng mới, không cần thêm khoảng trống trước đó
  • Tránh để mỗi dòng vượt quá 80 ký tự

Ghi chú:Thêm khoảng trống sau dấu phẩy hoặc dấu chấm phẩy là quy tắc chung của tất cả các loại viết.

Tải JavaScript trong HTML

Vui lòng sử dụng ngữ pháp đơn giản để tải mã script外部 (không cần thuộc tính type):

<script src="myscript.js">

Truy cập các phần tử HTML bằng JavaScript

Hậu quả của việc sử dụng HTML phong cách "bất cẩn" có thể dẫn đến lỗi JavaScript.

Cả hai câu lệnh JavaScript này sẽ tạo ra kết quả khác nhau:

var obj = getElementById("Demo")
var obj = getElementById("demo")

Thử nghiệm trực tiếp

Nếu có thể, hãy sử dụng cùng một quy ước đặt tên trong HTML (với JavaScript).

Vui lòng truy cập hướng dẫn phong cách JavaScript.

Sử dụng tên tệp viết thường

Hầu hết các máy chủ web (Apache, Unix) phân biệt chữ hoa thường và chữ thường trong tên tệp:

Không thể truy cập London.jpg bằng london.jpg.

Các máy chủ web khác (Microsoft, IIS) không phân biệt chữ hoa thường và chữ thường:

Có thể truy cập London.jpg bằng london.jpg hoặc London.jpg.

Nếu sử dụng hỗn hợp chữ hoa thường và chữ thường, bạn phải duy trì sự nhất quán cao.

Nếu bạn chuyển từ máy chủ không phân biệt chữ hoa thường sang máy chủ phân biệt chữ hoa thường, những lỗi nhỏ này sẽ phá hủy trang web của bạn.

Để tránh những vấn đề này, hãy luôn sử dụng tên tệp viết thường (nếu có thể).

Phần mở rộng tệp

Tên tệp HTML nên sử dụng phần mở rộng .html(thay vì .htm)

Tệp CSS nên sử dụng phần mở rộng .css.

Tệp JavaScript nên sử dụng phần mở rộng .js.