WebVN Cộng đồng web Việt Nam
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="width: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="width:128px;height:128px"</strong>> |
Dấu cách và dấu bằng
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ụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. Đây là ví dụ về ghi chú dài. --> |
Những ghi chú dài sẽ dễ nhìn hơn nếu bạn thụt lùi đầu dòng bằng 2 dấu cách.
CSS
Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin CSS (không cần thiết phải sử dụng thuộc tính type):
|
1 |
<link rel="stylesheet" href="styles.css"> |
Trong CSS, những đoạn ngắn có thể gộp thành một dòng như thế này:
|
1 |
p.into {font-family: Verdana; font-size: 16em;} |
Những đoạn dài nên được viết thành nhiều dòng:
|
1 2 3 4 5 6 |
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; } |
- Đặt dấu mở ngoặc trên cùng dòng với thẻ cần trang trí.
- Sử dụng một dấu cách trước dấu ngoặc mở.
- Sử dụng 2 dấu cách để lùi đầu dòng các thuộc tính bên trong.
- Sử dụng dấu 2 chấm và một dấu cách để tách biệt phần thuộc tính và giá trị.
- Sử dụng dấu cách sau 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 “thuộc tính/giá trị”.
- Chỉ sử dụng dấu ngoặc cho giá trị nếu trong giá trị có chứa dấu cách.
- Đặt dấu ngoặc đóng ngoặc ở một dòng riêng biệt, phía trước không có dấu cách.
- Tránh sử dụng 80 ký tự trên cùng một dòng.
JavaScript
Bạn có thể sử dụng cú pháp đơn giản để liên kết với tệp tin JavaScript (không cần thiết phải sử dụng thuộc tính type):
|
1 |
<script src="myscript.js"> |
Truy cập vào các thành phần HTML bằng JavaScript
Hậu quả của việc sử dụng những kiểu HTML “bừa bãi” có thể dẫn đến các lỗi khi sử dụng JavaScript.
Ở ví dụ dưới đây cho thấy, cách đặt tên khác nhau sẽ có cách truy cập khác nhau trong JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body> <p id="Demo">Đây là nội dung 1.</p> <p id="demo">Đây là nội dung 2.</p> <script> // Chỉ có đoạn nội dung 2 bị ghi đè document.getElementById("demo").innerHTML = "XIN CHÀO."; </script> </body> </html> |
Viết thường tên các tệp tin
Hầu hết các máy chủ web (Apache, Unix) phân biệt viết hoa, viết thường khi truy cập tên tệp tin:
Một ảnh là london.jpg không thể truy cập được với tên là London.jpg.
Những máy chủ web khác (Microsoft, IIS) không phân biệt viết hoa, viết thường:
london.jpg có thể truy cập bằng tên London.jpg hoặc london.jpg.
Nếu bạn chuyển website từ một máy chủ không phân biệt viết hoa-viết thường sang một máy chủ phân biệt viết hoa-viết thường, có thể dẫn tới một vài lỗi nhỏ khiến cho website của bạn bị hỏng.
Để tránh dẫn tới những lỗi này, hãy luôn sử dụng viết thường cho tên tệp tin (nếu có thể).
Phần mở rộng của tệp tin
Các tệp tin HTML nên có phần mở rộng là .html (hoặc .htm).
Các tệp tin CSS nên có phần mở rộng là .css
Các tệp tin JavaScript nên có phần mở rộng là .js
Sự khác biệt giữa .htm và .html
Không có sự khác biệt nào giữa hai phần mở rộng .htm và .html. Trình duyệt và máy chủ sẽ làm việc với cả 2 phần mở rộng như là một trang HTML.
.htm là do “di truyền” từ hệ điều hành DOS đời đầu, khi mà phần mở rộng bị giới hạn là 3 ký tự.
.html là do “di truyền” của hệ điều hành Unix không bị giới hạn 3 ký tự.
Khác biệt về mặt kỹ thuật
Khi bạn truy cập vào một địa chỉ mà không có tên tệp tin (ví dụ https://webvn.com/), website sẽ tự động hiển thị tệp tin mặc định. Tệp tin mặc định phổ biến là index.html, index.htm, default.html và default.htm.
Nếu website của bạn đã được cấu hình tên tệp tin mặc định là “index.html”, bạn phải đặt tên tệp tin là “index.html”, không được đặt là “index.htm.”
Tuy nhiên, thông thường các website sẽ được cấu hình nhiều tệp tin mặc định thay vì một, thậm chí bạn có thể tự cấu hình bao nhiêu tệp tin mặc định mình muốn.
Dù vậy, phần mở rộng đầy đủ của một tệp tin HTML là .html và không có lý do gì để bạn không sử dụng phần mở rộng này.
Thanks ad nhiều bài viết hay quá…