Hướng dẫn kiểu HTML

❮ Trước Kế tiếp ❯

Mã HTML nhất quán, sạch sẽ và gọn gàng giúp người khác đọc và hiểu mã của bạn dễ dàng hơn.

Dưới đây là một số hướng dẫn và mẹo để tạo mã HTML tốt.

Luôn khai báo loại tài liệu

Luôn khai báo loại tài liệu là dòng đầu tiên trong tài liệu của bạn.

Loại tài liệu chính xác cho HTML là:

<!DOCTYPE html>

Sử dụng tên phần tử chữ thường

HTML cho phép trộn chữ hoa và chữ thường trong tên phần tử.

Tuy nhiên, chúng tôi khuyên bạn nên sử dụng tên phần tử viết thường, bởi vì:

Việc trộn tên viết hoa và viết thường trông rất tệ
Các nhà phát triển thường sử dụng tên viết thường
Chữ thường trông gọn gàng hơn
Viết thường dễ viết hơn

Tốt:

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

Tồi tệ:

<BODY>
<P>This is a paragraph.</P>
</BODY>

Đóng tất cả các phần tử HTML

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

Tuy nhiên, chúng tôi thực sự khuyên bạn nên đóng tất cả các phần tử HTML, như sau:

Tốt:

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

Tồi tệ:

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

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

HTML cho phép trộn chữ hoa và chữ thường trong tên thuộc tính.

Tuy nhiên, chúng tôi khuyên bạn nên sử dụng tên thuộc tính chữ thường, bởi vì:

Việc trộn tên viết hoa và viết thường trông rất tệ
Các nhà phát triển thường sử dụng tên viết thường
Chữ thường trông gọn gàng hơn
Viết thường dễ viết hơn

Tốt:

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Tồi tệ:

<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

Luôn trích dẫn các giá trị thuộc tính

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

Tuy nhiên, chúng tôi khuyên bạn nên trích dẫn các giá trị thuộc tính, bởi vì:

Các nhà phát triển thường trích dẫn các giá trị thuộc tính
Các giá trị được trích dẫn dễ đọc hơn
Bạn PHẢI sử dụng dấu ngoặc kép nếu giá trị chứa khoảng trắng

Tốt:

Tồi tệ:

Rất tệ:

Điều này sẽ không hoạt động, vì giá trị chứa khoảng trắng:

Luôn chỉ định alt, chiều rộng và chiều cao cho Hình ảnh

Luôn chỉ định altthuộc tính cho hình ảnh. Thuộc tính này rất quan trọng nếu hình ảnh vì một lý do nào đó không thể hiển thị.

Ngoài ra, hãy luôn xác định widthvà heightcủa hình ảnh. Điều này làm giảm hiện tượng nhấp nháy, vì trình duyệt có thể dành dung lượng cho hình ảnh trước khi tải.

Tốt:

Tồi tệ:

Dấu cách và dấu bằng

HTML cho phép khoảng trắng xung quanh các dấu bằng. Nhưng không gian ít hơn sẽ dễ đọc hơn và nhóm các thực thể lại với nhau tốt hơn.

Tốt:

Tồi tệ:

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

Khi sử dụng trình soạn thảo HTML, KHÔNG thuận tiện khi cuộn sang phải và sang trái để đọc mã HTML.

Cố gắng tránh các dòng mã quá dài.

Dòng trống và thụt đầu dòng

Không thêm dòng trống, khoảng trắng hoặc thụt lề mà không có lý do.

Để dễ đọc, hãy thêm các dòng trống để phân tách các khối mã lớn hoặc hợp lý.

Để dễ đọc, hãy thêm hai khoảng cách thụt lề. Không sử dụng phím tab.

Tốt:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>

</body>

Tồi tệ:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>

<p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
</p>

</body>

Ví dụ về bảng tốt:

<table>
<tr>
    <th>Name</th>
    <th>Description</th>
</tr>
<tr>
    <td>A</td>
    <td>Description of A</td>
</tr>
<tr>
    <td>B</td>
    <td>Description of B</td>
</tr>
</table>

Ví dụ về danh sách tốt:

<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>

Không bao giờ bỏ qua phần tử <title>

Phần <title>tử này là bắt buộc trong HTML.

Nội dung của tiêu đề trang rất quan trọng đối với việc tối ưu hóa công cụ tìm kiếm (SEO)! Tiêu đề trang được sử dụng bởi các thuật toán của công cụ tìm kiếm để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.

Phần <title>tử:

xác định tiêu đề trong thanh công cụ của trình duyệt
cung cấp tiêu đề cho trang khi nó được thêm vào mục yêu thích
hiển thị tiêu đề cho trang trong kết quả của công cụ tìm kiếm

Vì vậy, hãy cố gắng đặt tiêu đề chính xác và có ý nghĩa nhất có thể:

<title>HTML Style Guide and Coding Conventions</title>

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

Trang HTML sẽ xác thực nếu không có thẻ <html>và <body>:

Thí dụ

<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

Tuy nhiên, chúng tôi thực sự khuyên bạn nên luôn thêm các thẻ <html>và <body>!

Việc bỏ qua <body>có thể tạo ra lỗi trong các trình duyệt cũ hơn.

Bỏ qua <html>và <body> cũng có thể làm hỏng phần mềm DOM và XML.

Bỏ qua <head>?

Thẻ HTML <head> cũng có thể bị bỏ qua.

Các trình duyệt sẽ thêm tất cả các phần tử trước đây <body>vào một phần tử mặc định <head> .

Thí dụ

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Tuy nhiên, chúng tôi khuyên bạn nên sử dụng <head>thẻ.

Đóng Phần tử HTML trống?

Trong HTML, tùy chọn đóng các phần tử trống.

Cho phép:

Cũng được phép:

Nếu bạn muốn phần mềm XML / XHTML truy cập trang của mình, hãy giữ dấu gạch chéo đóng (/), vì nó bắt buộc phải có trong XML và XHTML.

Thêm thuộc tính lang

Bạn phải luôn bao gồm langthuộc tính bên trong <html>thẻ, để khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.

Thí dụ

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Metadata

Để đảm bảo diễn giải thích hợp và lập chỉ mục công cụ tìm kiếm chính xác, cả ngôn ngữ và mã hóa ký tự phải được xác định càng sớm càng tốt trong tài liệu HTML:<meta charset="charset">

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>

Đặt chế độ xem

Chế độ xem là vùng hiển thị của người dùng trên một trang web. Nó thay đổi theo thiết bị - nó sẽ nhỏ hơn trên điện thoại di động hơn là trên màn hình máy tính.

Bạn nên đưa <meta>phần tử sau vào tất cả các trang web của mình:

Điều này cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang.

Phần width=device-widthđặt chiều rộng của trang tuân theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị).

Phần initial-scale=1.0đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt.

Đây là ví dụ về một trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:

Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết bên dưới để xem sự khác biệt.

Không có thẻ meta chế độ xem

Với thẻ meta chế độ xem

Nhận xét HTML

Nhận xét ngắn nên được viết trên một dòng, như thế này:

Nhận xét kéo dài nhiều hơn một dòng, nên được viết như thế này:

Nhận xét dài sẽ dễ quan sát hơn nếu chúng được thụt vào trong hai khoảng trắng.

Sử dụng Trang tính Kiểu

Use simple syntax for linking to style sheets (the type attribute is not necessary):

Short CSS rules can be written compressed, like this:

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

Long CSS rules should be written over multiple lines:

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

Place the opening bracket on the same line as the selector
Use one space before the opening bracket
Use two spaces of indentation
Use semicolon after each property-value pair, including the last
Only use quotes around values if the value contains spaces
Place the closing bracket on a new line, without leading spaces

Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):

Accessing HTML Elements with JavaScript

Using "untidy" HTML code can result in JavaScript errors.

These two JavaScript statements will produce different results:

Example

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

Visit the JavaScript Style Guide.

Use Lower Case File Names

Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".

Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".

If you use a mix of uppercase and lowercase, you have to be aware of this.

If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!

To avoid these problems, always use lowercase file names!

File Extensions

HTML files should have a .html extension (.htm is allowed).

CSS files should have a .css extension.

JavaScript files should have a .js extension.

Differences Between .htm and .html?

There is no difference between the .htm and .html file extensions!

Both will be treated as HTML by any web browser and web server.

Default Filenames

When a URL does not specify a filename at the end (like "https://www.w3schools.com/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm".

If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".

However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.

❮ Previous Next ❯

Hướng dẫn HTML

Biểu mẫu HTML

Đồ họa HTML

HTML Media

API HTML

Ví dụ HTML

Tham chiếu HTML

Hướng dẫn kiểu HTML

Luôn khai báo loại tài liệu

Sử dụng tên phần tử chữ thường

Tốt:

Tồi tệ:

Đóng tất cả các phần tử HTML

Tốt:

Tồi tệ:

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

Tốt:

Tồi tệ:

Luôn trích dẫn các giá trị thuộc tính

Tốt:

Tồi tệ:

Rất tệ:

Luôn chỉ định alt, chiều rộng và chiều cao cho Hình ảnh

Tốt:

Tồi tệ:

Dấu cách và dấu bằng

Tốt:

Tồi tệ:

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

Dòng trống và thụt đầu dòng

Tốt:

Tồi tệ:

Ví dụ về bảng tốt:

Ví dụ về danh sách tốt:

Không bao giờ bỏ qua phần tử <title>

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

Thí dụ

Bỏ qua <head>?

Thí dụ

Đóng Phần tử HTML trống?

Cho phép:

Cũng được phép:

Thêm thuộc tính lang

Thí dụ

Metadata

Đặt chế độ xem

Nhận xét HTML

Sử dụng Trang tính Kiểu

Loading JavaScript in HTML

Accessing HTML Elements with JavaScript

Example

Use Lower Case File Names

File Extensions

Differences Between .htm and .html?

Default Filenames