Bài 34: Chuẩn viết code HTML và HTML5
Quy ước (coding convention) viết code HTML5
Là một lập trình viên có bao giờ bạn đặt ra câu hỏi liệu cách thức viết code cũng như cú pháp mà mình sử dụng liệu đã theo đúng chuẩn HTML?
Vào giữa khoảng thời gian từ năm 2000 đến 2010, nhiều lập trình viên đã chuyển cách viết từ HTML sang XHTML.
Với XHTML đòi hỏi các lập trình viên phải viết code đúng cú pháp một cách nghiêm ngặt (well-formed).
HTML5 có cách thức viết tự do hơn nên bạn cần phải tự tạo cho mình thói quen viết code theo đúng chuẩn.
Cách thức viết code một cách thông minh
Một điều dễ thấy trong sự thông minh của lập trình viên đó là họ sử dụng quy tắc viết code theo đúng chuẩn, chính vì thế người khác có thể dễ dàng hiểu và sử dụng code HTML của bạn.
Trong tương lai, những bộ máy tìm kiếm và phân tích có thể sẽ muốn đọc các trang HTML của bạn. Vì một trang web tốt 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”.
Sử dụng cú pháp gần với chuẩn XHTML sẽ là một lựa chọn thông minh của các lập trình viên.
Sử dụng đúng DOCTYPE
Luôn luôn khai báo DOCTYPE ở dòng đầu tiên trong đoạn code của bạn:
<!DOCTYPE html>Nếu bạn muốn đồng nhất các thẻ khác trong đoạn code, bạn có thể viết thường!
<!doctype html>Sử dụng chữ viết thường cho tên các phần tử
HTML5 cho phép bạn có thể sử dụng cả chữ hoa và chữ thường cho tên các phần tử.
Nhưng chúng tôi khuyên bạn nên sử dụng chữ viết thường cho tên các phần tử, bởi vì:
- Kết hợp cả chữ hoa và chữ thường sẽ không đẹp mắt.
- Các lập trình viên hay sử dụng chữ viết thường bởi rất giống chuẩn XHTML.
- Viết thường nhìn đoạn code sẽ rõ ràng hơn.
- Viết chữ thường sẽ nhanh và dễ dàng hơn.
Cách viết không tốt:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Cách viết rất không tốt:
<Section>
<p>This is a paragraph.</p>
</SECTION>
Cách viết tốt:
<section>
<p>This is a paragraph.</p>
</section>
Luôn sử dụng thẻ đóng cho tất cả các phần tử HTML
Trong HTML5, bạn không cần phải sử dụng thẻ đóng cho tất cả phần tử ( Ví dụ: thẻ <p>).
Nhưng chúng tôi khuyên bạn nên sử dụng thẻ đóng cho tất cả các phần tử:
Cách viết không tốt:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Cách viết tốt:
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Thẻ đóng rỗng cho các phần tử HTML
Trong HTML5, bạn có thể tùy ý đóng các phần tử rỗng.
Bạn có thể viết:
<meta charset="utf-8">
Bạn cũng có thể viết:
<meta charset="utf-8" />
Sử dụng dấu gạch chéo (/) là bắt buộc 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ưởng tốt nhất là giữ cả thẻ đóng của phần tử.
Sử dụng chữ thường cho tên các thuộc tính
HTML5 cho phép bạn có thể sử dụng cả chữ thường và chữ hoa cho tên các thuộc tính.
Nhưng chúng tôi khuyên bạn nên sử dụng chữ thường cho tên các thuộc tính:
- Kết hợp cả chữ hoa và chữ thường sẽ không đẹp mắt.
- Các lập trình viên hay sử dụng chữ viết thường bởi (rất giống chuẩn XHTML).
- Viết thường nhìn đoạn code sẽ rõ ràng hơn.
- Viết chữ thường sẽ nhanh và dễ dàng hơn.
Cách viết không tốt:
<div CLASS="menu">
Cách viết tốt:
<div class="menu">Sử dụng nháy kép cho các giá trị thuộc tính
HTML5 cho phép bạn gán giá trị cho các thuộc tính mà không cần dấu ngoặc.
Nhưng chúng tôi khuyên bạn nên sử dụng dấu nháy kép cho các giá trị thuộc tính:
- Bạn cần sử dụng dấu nháy kép nếu giá trị chứa dấu cách.
- Lúc dùng dấu nháy kép, lúc không điều này tạo một thói quen không tốt cho người lập trình.
- Để giá trị trong dấu ngoặc sẽ dễ đọc và phân biệt hơn.
Ví dụ dưới không chạy vì thuộc tính class chứa giá trị có khoảng trắng:
<table class=table striped>
Ví dụ này sẽ chạy khi:
<table class="table striped">
Thuộc tính image
Luôn sử dụng thuộc tính alt với các ảnh chèn vào trang web. Đây là việc rất quan trọng khi hình ảnh chèn không hiển thị và cũng là cách để các máy tìm kiếm có thể dễ dàng tìm được nội dung ảnh bạn định nói gì.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Nên xác định kích thước các bức ảnh. Nó sẽ không làm trang web của bạn bị nhấp nháy vì trình duyệt có thể giữ chỗ không gian cho bức ảnh trước khi nó được nạp.
<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 có thể đặt ở hai đầu dấu bằng
<link rel = "stylesheet" href = "styles.css">
Nhưng nếu không để khoảng trắng sẽ làm cho đoạn code của bạn dễ đọc và các thuộc tính trở nên rõ ràng hơn:
<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 trình soạn thảo 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 để có thể đọc hết dòng code đó. Điều này không hay 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 nên thêm dòng trống vào đoạn code nếu không cần thiết.
Để dễ đọc, thêm dòng trống để tách các đoạn code dài 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. Không nên sử dụng TAB
Khô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. Chúng không thực sự cần thiết để tách tất cả các phần tử:
Cách dòng và lùi đầu dòng như ví dụ dưới đây là không cần thiế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>
Cách viết tốt hơn:
<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ề Table:
<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:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
Các bạn có đặt ra câu hỏi nếu thiếu thẻ <html> và <body>?
Theo chuẩn HTML5, bạn có thể không cần sử dụng thẻ <html> và thẻ<body> .
Đoạn code dưới đây vẫn hoàn toàn hợp lệ trong HTML5
Ví 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 khuyên bạn không nên bỏ thẻ <html> và thẻ<body>.
Phần tử <html> là khung của trang. Trong đó bạn có thể khai báo ngôn ngữ mà bạn đang dùng trong trang:
<!DOCTYPE html>
<html lang="en-US">
Việc khai báo một ngôn ngữ rất quan trọng đối với các công cụ tìm kiếm và các ứng dụng khi truy cập trang web của bạn.
Bạn có thể bỏ qua thẻ <html> và <body> tuy nhiên nó có thể làm treo DOM và phần mềm XML
Việc bỏ qua thẻ <body> có thể khiến trang web của bạn gặp phải lỗi của các trình duyệt cũ( các phiên bản IE9).
Điều gì sẽ xảy ra nếu thiếu thẻ <head>?
Theo chuẩn HTML5, bạn có thể bỏ qua thẻ <head>.
Theo mặc định, trình duyệt sẽ tự động thêm thẻ<head> trước thẻ <body>.
Bạn có thể làm giảm việc phức tạp khi viết các các đoạn code HTML, bằng cách bỏ qua thẻ <head>:
Ví dụ:
<!DOCTYPE html>
<html>
<title>Page Title</title><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>Việc bỏ bớt các thẻ dường như không quen thuộc với các lập trình viên. Tuy nhiên chúng ta cần thời gian để làm quen với việc này.
Thẻ Meta
Phần tử <title> là bắt buộc phải có trong HTML5. Bạn hãy đặt tên tiêu đề càng ý nghĩa càng tốt:
<title>HTML5 Syntax and Coding Style</title>Để đảm bảo các công cụ tìm kiếm tìm trang của bạn một cách chuẩn xác, hãy thiết lập ngôn ngữ và các kí tự mã hóa mà trang sử dụng ở ngay những dòng đầu tiên của trang:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>HTML5 Syntax and Coding Style</title>
</head>Các chú thích trong HTML
Với các chú thích ngắn trên một dòng bạn nên sử dụng thẻ <!– ở đầu dòng và thẻ –> ở cuối dòng:
<!-- This is a comment -->Với các chú thích dài, được viết trên nhiều dòng, bạn nên sử dụng cặp thẻ <!– và –> nằm riêng trên một dòng:
<!--
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.
-->Những chú thích dài sẽ dễ nhìn hơn, nếu bạn lùi đầu dòng bằng 2 dấu cách.
Style Sheets
Bạn có thể sử dụng các 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):
<link rel="stylesheet" href="styles.css">Trong CSS, những đoạn code ngắn có thể gộp thành một dòng như thế này:
p.into {font-family: Verdana; font-size: 16em;}Những đoạn code dài nên được viết thành nhiều dòng:
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.
- Không nên sử dụng 80 ký tự trên cùng một dòng.
Thêm dấu cách phía sau dấu phẩy hoặc dấu chấm phẩy là quy tắc chung cho tất cả các loại văn bản.
Liên kết JavaScript trong HTML
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):
<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 “lộn xộn” 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ẽ tạo ra các kết quả khác nhau trong JavaScript:
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p id="Demo">This is paragraph 1.</p>
<p id="demo">This is paragraph 2.</p>
<script>
// Only paragraph 2 will be overwritten
document.getElementById("demo").innerHTML = "HELLO.";
</script>
</body>
</html>
Nếu có thể, hãy sử dụng các quy ước đặt tên giống nhau(như JavaScript) trong 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 chữ hoa và chữ thường với các 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 chữ hoa và chữ 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 trang web từ một máy chủ không phân biệt chữ hoa và chữ thường sang một máy chủ phân biệt chữ hoa và chữ thường, có thể dẫn tới một vài lỗi nhỏ khiến cho trang web của bạn xuất hiện lỗi.
Để tránh dẫn tới những lỗi này, hãy luôn sử dụng chữ 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.
Điểm khác biệt:
.htm là do “kế thừa” từ hệ điều hành DOS, khi mà phần mở rộng bị giới hạn là 3 ký tự.
.html là do “kế thừa” từ 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://timoday.edu.vn/html/), 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ì sử dụng một, thậm chí bạn có thể tự cấu hình tệp tin mặc định khi cần thiết.
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.
1 phản hồi
[…] các chuẩn trên các bạn cũng có thể kham khảo thêm: Chuẩn HTML Chuẩn C# Hay bài viết những tranh cãi về coding […]