Quy ước và phong cách viết HTML5
Quy ước cách viết HTML5 Bạn có bao giờ tự hỏi: liệu phong cách viết mã cũng như cú pháp mà mình sử dụng trong HTML đã thực sự theo đúng chuẩn hay chưa? Từ năm 2000 đến 2010, rất nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML. Tại sao? Vì XHTML giúp các lập trình viên phải viết ...
Quy ước cách viết HTML5
Bạn có bao giờ tự hỏi: liệu phong cách viết mã cũng như cú pháp mà mình sử dụng trong HTML đã thực sự theo đúng chuẩn hay chưa?
Từ năm 2000 đến 2010, rất nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML. Tại sao? Vì XHTML giúp các lập trình viên phải viết mã một cách hợp lệ và chính xác.
HTML5 có cách viết tự do hơn nên bạn phải tự xây dựng và rèn cho mình một phong cách viết mã theo đúng chuẩn.
Viết mã một cách thông minh
Một hiệu quả dễ thấy của những lập trình viên thông minh là người khác có thể dễ dàng hiểu và sử dụng (đối với các bộ máy phân tích) mã HTML của họ.
Như tổ chức web thế giới W3C đã định nghĩa một trang web có ý nghĩa là một trang web “Cho phép dữ liệu được chia sẻ và tái sử dụng trên các ứng dụng, các doanh nghiệp và cộng đồng”. Trong tương lai, những bộ máy tìm kiếm và phân tích có thể sẽ muốn đọc trang HTML của bạn. Sử dụng cú pháp gần với chuẩn XHTML sẽ là một lựa chọn thông minh.
Thao khảo: XHTML và HTML
Sử dụng đúng DOCTYPE
Luôn khai báo doctype ở dòng đầu tiên của trang:
|
1 |
<!DOCTYPE html> |
Nếu bạn muốn đồng nhất với các thẻ khác trong trang, bạn có thể sử dụng cách viết thường:
|
1 |
<!doctype html> |
Viết thường tên các thẻ
HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thẻ.
Chúng tôi khuyến khích bạn viết thường tên các thẻ, bởi vì:
- Kết hợp cả viết thường và viết hoa là cách viết rất tệ
- Viết thường gần nhất với chuẩn XHTML
- Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
- Viết thường dễ viết hơn
Cách viết tệ:
|
1 2 3 |
<SECTION> <p>Đây là nội dung.</p> </SECTION> |
Cách viết rất tệ
|
1 2 3 |
<Section> <p>Đây là nội dung.</p> </SECTION> |
Cách viết TỐT
|
1 2 3 |
<section> <p>Đây là nội dung.</p> </section> |
Luôn sử dụng thẻ đóng
Trong HTML5, bạn không cần sử dụng thẻ đóng cho tất cả các thẻ (ví dụ thẻ <p>).
Nhưng, chúng tôi khuyến khích bạn nên sử dụng thẻ đóng:
Cách viết tệ:
|
1 2 3 4 |
<section> <p>Đây là nội dung. <p>Đây là nội dung. </section> |
Cách viết TỐT:
|
1 2 3 4 |
<section> <p>Đây là nội dung.</p> <p>Đây là nội dung.</p> </section> |
Đóng thẻ rỗng
Trong HTML5, bạn có thể tùy ý đóng những thẻ rỗng (thẻ rỗng là những thẻ không có thẻ đóng).
Bạn được phép viết:
|
1 |
<meta charset="utf-8"> |
và cũng được phép viết như thế này:
|
1 |
<meta charset="utf-8" /> |
Dấu gạch chéo (/) là bắt buộc nếu bạn sử dụng thẻ trong XHTML và XML.
Nếu bạn muốn những phần mềm đọc XML có thể hiểu được trang của bạn, tốt nhất là hãy sử dụng cách đóng thẻ.
Viết thường tên các thuộc tính
HTML5 cho phép bạn có thể kết hợp cả viết thường và viết hoa tên các thuộc tính.
Chúng tôi khuyến khích bạn viết thường tên các thuộc tính, bởi vì:
- Kết hợp cả viết thường và viết hoa là cách viết rất tệ
- Viết thường gần nhất với chuẩn XHTML
- Viết thường nhìn mã nguồn sẽ gọn gàng và rõ ràng hơn
- Viết thường dễ viết hơn
Cách viết nhìn rất xấu:
|
1 |
<div CLASS="menu"> |
Nhìn thoáng, gọn gàng:
|
1 |
<div class="menu"> |
Sử dụng ngoặc cho giá trị thuộc tính
HTML5 cho phép bạn viết giá trị thuộc tính mà không cần dấu ngoặc.
Chúng tôi khuyến khích bạn nên sử dụng dấu ngoặc cho giá trị thuộc tính:
- Bạn phải sử dụng dấu ngoặc nếu giá trị thuộc tính có chứa dấu cách
- Lúc dùng ngoặc, lúc không dùng ngoặc không phải là một phong cách tốt
- Những giá trị trong ngoặc dễ đọc và dễ phân biệt hơn
Trong ví dụ dưới đây, thuộc tính class sẽ không hoạt động như mong muốn do giá trị có chứa dấu cách
|
1 |
<table class=table striped> |
Cách viết đúng
|
1 |
<table class="table striped"> |
Thuộc tính trong thẻ <img>
Luôn sử dụng thuộc tính alt khi bạn chèn ảnh vào website. Điều này rất quan trọng nếu ảnh không thể hiển thị vì một lý do nào đó.
|
1 |
<img src="html5.gif" <strong>alt="HTML5"</strong> style="awidth:128px;height:128px"> |
Luôn quy định kích cỡ khi sử dụng ảnh. Nó sẽ không làm website của bạn bị co dãn trong quá trình tải trang do trình duyệt đã dành sẵn không gian cho ảnh trước đó.
|
1 |
<img src="html5.gif" alt="HTML5" <strong>style="awidth:128px;height:128px"</strong>> |
Bạn có thể sử dụng dấu cách ở 2 đầu dấu bằng:
|
1 |
<link rel = "stylesheet" href = "styles.css"> |
Nhưng nếu không sử dụng dấu cách sẽ làm cho mã nguồn dễ dọc hơn và các thuộc tính trở nên tách bạch, rõ ràng hơn:
|
1 |
<link rel="stylesheet" href="styles.css"> |
Tránh code dài trên một dòng
Khi bạn sử dụng một công cụ lập trình HTML, nếu có một dòng code quá dài bạn sẽ phải trượt thanh cuốn sang phải hoặc sang trái để xem hết. Điều này không thuận tiện chút nào.
Hãy cố gắng tránh những dòng code dài hơn 80 ký tự.
Lùi đầu dòng và cách dòng
Không thêm dòng trống vào mã nguồn nếu không cần thiết.
Để dễ đọc, chỉ thêm dòng trống để tách các khối code lớn hoặc phân cách hợp lý giữa các thẻ.
Để dễ đọc, bạn có thể sử dụng 2 dấu cách để lùi đầu dòng.
Đừng thêm dòng trống hoặc dấu cách khi không cần thiết, nhất là khi gặp những dòng code ngắn hoặc những đoạn code liên quan đến nhau.
Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiết:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> <h1>Những 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 vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới. </p> </body> |
Cách viết tốt hơn:
|
1 2 3 4 5 6 7 8 9 |
<body> <h1>Những 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 vùng thủ đô Tokyo và là đô thị đông nhất trên thế giới.</p> </body> |
Đối với bảng:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <th>Tên</th> <th>Miêu tả</th> </tr> <tr> <td>A</td> <td>Miêu tả về A</td> </tr> <tr> <td>B</td> <td>Miêu tả về B</td> </tr> </table> |
Đối với danh sách
|
1 2 3 4 5 |
<ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol> |
Thiếu thẻ <html> và <body>?
Trong chuẩn HTML5, bạn có thể không cần dùng thẻ <html> và thẻ <body>.
Đoạn mã nguồn dưới đây hoàn toàn hợp lệ trong HTML5:
|
1 2 3 4 5 6 7 |
<!DOCTYPE html> <head> <title>Tiêu đề trang</title> </head> <h1>Đề mục lớn</h1> <p>Nội dung trang</p> |
Chúng không không khuyến khích bạn bỏ thẻ <html> và thẻ <body>.
Thẻ <html> là thẻ gốc của trang, bạn có thể sử dụng để khai báo ngôn ngữ trang đang dùng:
|
1 2 |
<!DOCTYPE html> <html lang="vi-VN"> |
Việc khai báo ngôn ngữ rất quan trọng đối với các bộ máy tìm kiếm và các ứng dụng khi truy cập website của bạn.
Việc bỏ thẻ <html> và <body> có thể thể làm treo DOM và phần mềm XML.
Thiếu thẻ <body> có thể gây ra lỗi trong những trình duyệt cũ (như IE9).
Thiếu thẻ <head>?
Trong chuẩn HTML5, bạn có thể không cần dùng thẻ <head>.
Mặc định, trình duyệt sẽ tự động thêm thẻ <head> trước thẻ <body>.
Bạn có thể bỏ thẻ <head> để giảm sự phức tạp khi viết mã HTML:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <title>Tiêu để trang</title> <body> <h1>Đề mục lớn</h1> <p>Nội dung trang</p> </body> </html> |
Thẻ bổ trợ
<title> là thẻ bắt buộc trong HTML5. Hãy đặt tiêu đề trang ý nghĩa nhất có thể:
|
1 |
<title>Cú pháp và phong cách viết mã HTML5</title> |
Để đảm bảo các bộ máy tìm kiếm hiểu trang của bạn một cách chuẩn xác, hãy thiết lập ngôn ngữ và bộ mã hóa ký tự mà trang sử dụng ở ngay những dòng đầu tiên của trang:
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html lang="vi-VN"> <head> <meta charset="UTF-8"> <title>Cú pháp và phong cách viết mã HTML5</title> </head> |
Ghi chú trong HTML
Với những ghi chú ngắn chỉ trên một dòng, bạn chỉ việc sử dụng <!– ở đầu dòng và thẻ –> ở cuối dòng:
|
1 |
<!-- Đây là một ghi chú --> |
Với những ghi chú dài, được viết trên nhiều dòng, bạn phải đặt cặp thẻ <!– và –> riêng trên 1 dòng:
|
1 2 3 4 |
<!-- Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ
Có thể bạn quan tâm
0
|
