Hướng dẫn về phong cách HTML
Mã HTML nhất quán, rõ ràng 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ố nguyên tắc 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 ở 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 thành phần.
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 vì:
- Trộn tên chữ hoa và chữ thường trông xấu
- Các nhà phát triển thường sử dụng tên chữ thường
- Chữ thường trông sạch sẽ hơn
- Chữ thường dễ viết hơn
Tốt:
<body>
<p>This is a paragraph.</p>
</body>Xấu:
<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ụ phần tử <p> ).
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ư thế này:
Tốt:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>Xấu:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>Sử dụng tên thuộc tính chữ 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 vì:
- Trộn tên chữ hoa và chữ thường trông xấu
- Các nhà phát triển thường sử dụng tên chữ thường
- Chữ thường trông sạch sẽ hơn
- Chữ thường dễ viết hơn
Tốt:
<a href="https://www.example.com.vn/html/">Visit our HTML tutorial</a>Xấu:
<a HREF="https://www.example.com.vn/html/">Visit our HTML tutorial</a>Luôn trích dẫn 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 vì:
- Các nhà phát triển thường trích dẫn các giá trị thuộc tính
- 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 dấu cách
Tốt:
<table
class="striped">Xấu:
<table class=striped>Rất tệ:
Điều này sẽ không hoạt động vì giá trị chứa khoảng trắng:
<table class=table striped>Luôn chỉ định alt, chiều rộng và chiều cao cho hình ảnh
Luôn chỉ định thuộc tính alt cho hình ảnh. Thuộc tính này rất quan trọng nếu hình ảnh vì lý do nào đó không thể hiển thị được.
Ngoài ra, hãy luôn xác định width và height củ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:
<img
src="html5.gif" alt="HTML5" style="width:128px;height:128px">Xấu:
<img
src="html5.gif">Dấu cách và dấu bằng
HTML cho phép khoảng trắng xung quanh 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:
<link rel="stylesheet" href="styles.css">Xấu:
<link
rel = "stylesheet" href = "styles.css">Tránh dòng mã dài
Khi sử dụng trình soạn thảo HTML, việc cuộn sang phải và sang trái để đọc mã HTML KHÔNG thuận tiện.
Cố gắng tránh các dòng mã quá dài.
Dòng trống và thụt lề
Không thêm dòng trống, dấu cách 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 logic.
Để dễ đọc, hãy thêm hai dấu cách thụt đầu dòng. 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.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city
in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the
largest population centers in Europe.</p>
</body>Xấu:
<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.</p>
<h2>London</h2><p>London
is the capital city of England. It is the most populous city in the United
Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital
of France. The Paris area is one of the largest population centers in Europe.</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 tử <title> là bắt buộc trong HTML.
Nội dung của tiêu đề trang rất quan trọng để tối ưu hóa công cụ tìm kiếm (SEO)! Tiêu đề trang được thuật toán của công cụ tìm kiếm sử dụng để quyết định thứ tự khi liệt kê các trang trong kết quả tìm kiếm.
Phần tử <title> :
- xác định tiêu đề trên 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>?
Một trang HTML sẽ xác thực mà không cần thẻ <html> và <body> :
Ví dụ
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p> Hãy tự mình thử » Tuy nhiên, chúng tôi thực sự khuyên bạn nên luôn thêm thẻ <html> và <body> !
Việc bỏ qua <body> có thể gây ra lỗi trong các trình duyệt cũ hơn.
Việc 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ể được bỏ qua.
Trình duyệt sẽ thêm tất cả các phần tử trước <body> vào phần tử <head> mặc định.
Ví dụ
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Hãy tự mình thử » Tuy nhiên, chúng tôi khuyên bạn nên sử dụng thẻ <head> .
Đóng các phần tử HTML trống?
Trong HTML, việc đóng các phần tử trống là tùy chọn.
Cho phép:
<meta
charset="utf-8">Cũng được phép:
<meta charset="utf-8" />Nếu bạn mong muốn phần mềm XML/XHTML truy cập vào trang của mình, hãy giữ dấu gạch chéo đóng (/), vì nó được yêu cầu trong XML và XHTML.
Thêm thuộc tính lang
Bạn phải luôn bao gồm thuộc tính lang bên trong thẻ <html> để khai báo ngôn ngữ của trang Web. Điều này nhằm hỗ trợ các công cụ tìm kiếm và trình duyệt.
Ví 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> Hãy tự mình thử »Metadata
Để đảm bảo diễn giải đúng và lập chỉ mục chính xác cho công cụ tìm kiếm, cả ngôn ngữ và mã hóa ký tự <meta charset=" charset "> phải được xác định càng sớm càng tốt trong tài liệu HTML:
<!DOCTYPE html>
<html
lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>Cài đặt khung nhìn
Chế độ xem là khu vực hiển thị của người dùng trên trang web. Nó thay đổi tùy theo thiết bị - nó sẽ nhỏ hơn trên điện thoại di động so với trên màn hình máy tính.
Bạn nên bao gồm phần tử <meta> sau trong tất cả các trang web của mình:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Điều này cung cấp hướng dẫn cho trình duyệt 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 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 trình duyệt tải lần đầu tiên.
Dưới đây là ví dụ về một trang web không có thẻ meta khung nhìn và cùng một trang web có thẻ meta khung nhìn:
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 để thấy sự khác biệt.
Nhận xét HTML
Những bình luận ngắn nên được viết trên một dòng, như thế này:
<!-- This is a comment -->
Những bình luận dài hơn một dòng nên được viết như sau:
<!--
This is a long comment example. This is
a long comment example.
This is a
long comment example. This is a long comment example.
-->
Những bình luận dài sẽ dễ quan sát hơn nếu chúng được thụt vào bằng hai dấu cách.
Sử dụng tờ định kiểu
Sử dụng cú pháp đơn giản để liên kết đến các biểu định kiểu (thuộc tính type là không cần thiết):
<link rel="stylesheet" href="styles.css">
Các quy tắc CSS ngắn có thể được viết dưới dạng nén, như thế này:
p.intro {font-family:Verdana;font-size:16em;}Các quy tắc CSS dài phải được viết trên nhiều dòng:
body {
background-color: lightgrey;
font-family: "Arial
Black", Helvetica, sans-serif;
font-size: 16em;
color:
black;
}- Đặt dấu ngoặc mở trên cùng dòng với bộ chọn
- Sử dụng một khoảng trắng trước dấu ngoặc mở
- Sử dụng hai khoảng trống thụt đầu dòng
- Sử dụng dấu chấm phẩy sau mỗi cặp thuộc tính-giá trị, bao gồm cả cặp cuối cùng
- Chỉ sử dụng dấu ngoặc kép xung quanh các giá trị nếu giá trị chứa dấu cách
- Đặt dấu ngoặc đóng trên một dòng mới, không có dấu cách ở đầu
Đang tải JavaScript trong HTML
Sử dụng cú pháp đơn giản để tải các tập lệnh bên ngoài (thuộc tính type là không cần thiết):
<script src="myscript.js">
Truy cập các phần tử HTML bằng JavaScript
Việc sử dụng mã HTML "lộn xộn" có thể dẫn đến lỗi JavaScript.
Hai câu lệnh JavaScript này sẽ tạo ra các kết quả khác nhau:
Ví dụ
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML
= "Hello";
Hãy tự mình thử »Hãy truy cập Hướng dẫn về phong cách JavaScript .
Sử dụng tên tệp chữ thường
Một số máy chủ web (Apache, Unix) phân biệt chữ hoa chữ thường đối với tên tệp: "london.jpg" không thể được truy cập dưới dạng "London.jpg".
Các máy chủ web khác (Microsoft, IIS) không phân biệt chữ hoa chữ thường: "london.jpg" có thể được truy cập dưới dạng "London.jpg".
Nếu bạn sử dụng kết hợp chữ hoa và chữ thường, bạn phải lưu ý điều này.
Nếu bạn chuyển từ máy chủ không phân biệt chữ hoa chữ thường sang máy chủ phân biệt chữ hoa chữ thường, ngay cả những lỗi nhỏ cũng sẽ làm hỏng 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!
Phần mở rộng tệp
Các tệp HTML phải có phần mở rộng .html ( cho phép .htm ).
Các tệp CSS phải có phần mở rộng .css .
Các tệp JavaScript phải có phần mở rộng .js .
Sự khác biệt giữa .htm và .html?
Không có sự khác biệt giữa phần mở rộng tệp .htm và .html!
Cả hai sẽ được coi là HTML bởi bất kỳ trình duyệt web và máy chủ web nào.
Tên tệp mặc định
Khi URL không chỉ định tên tệp ở cuối (như "https://www.example.com.vn/"), máy chủ chỉ thêm tên tệp mặc định, chẳng hạn như "index.html", "index.htm", " default.html" hoặc "default.htm".
Nếu máy chủ của bạn chỉ được định cấu hình với "index.html" làm tên tệp mặc định thì tệp của bạn phải được đặt tên là "index.html" chứ không phải "default.html".
Tuy nhiên, máy chủ có thể được cấu hình với nhiều tên tệp mặc định; thông thường bạn có thể thiết lập bao nhiêu tên tệp mặc định tùy thích.
