Định dạng chuẩn và quy ước viết code trong HTML5

Thanh Huyen

Quy ước viết code của HTML

Các nhà lập trình web thường không thống nhất kiểu viết code và cú pháp khi sử dụng HTML. Vào 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 - ngôn ngữ đòi hỏi cú pháp được viết một cách đúng chuẩn nghiêm ngặt (well-formed).

HTML5 có cách thức viết tự do hơn, nên để trở thành một lập trình viên thông minh, bạn cần phải tự tạo cho mình thói quen viết code theo đúng chuẩn để người khác có thể dễ dàng hiểu và sử dụng code HTML của bạn.

Hơn thế nữa, trong tương lai, những bộ máy tìm kiếm và phân tích dạng như trình đọc XML có thể sẽ muốn đọc cá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 của các lập trình viên.

Hãy nhớ luôn giữ cho mã của bạn gọn gàng, sạch sẽ, và chính xác.

Sử dụng đúng DOCTYPE

Luôn luôn khai báo kiểu tài liệu DOCTYPE ở dòng đầu tiên trong đoạn code của bạn:

<!DOCTYPE html>

Nếu muốn có sự nhất quán với các thẻ bên dưới khác, bạn có thể sử dụng:

<!doctype html>

Viết thường cho tên các phần tử

HTML5 cho phép sử dụng kết hợp cả chữ hoa và chữ thường trong các tên phần tử.

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

Kết hợp cả chữ hoa và chữ thường sẽ gây rối mắt.
Các lập trình viên hay sử dụng chữ viết thường (giống chuẩn XHTML).
Viết thường nhìn đoạn code sẽ rõ ràng hơn.
Viết thường sẽ nhanh và dễ dàng hơn.

Không nên:

<SECTION> 
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</SECTION>
<Section> 
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</SECTION>

Nên:

<section>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</section>

Luôn đóng tất cả các phần tử HTML

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

Nhưng khuyến nghị bạn nên sử dụng thẻ đóng sau khi kết thúc phần tử.

Không nên:

<section>
<p>Quantrimang được cập nhật thường xuyên và liên tục.
<p>Quantrimang được cập nhật thường xuyên và liên tục.
</section>

Nên:

<section>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</section>

Đóng các phần tử HTML rỗng

Trong HTML5, phần tử rỗng có thể dùng thẻ đóng hoặc không.

Bạn có thể sử dụng một trong hai cách viết:

<meta charset="utf-8">
<meta charset="utf-8" />

Tuy nhiên, dấu gạch chéo đóng (/) là bắt buộc phải có trong XHTML và XML.

Nếu muốn những phần mềm đọc XML có thể hiểu được trang của bạn, bạn nên sử dụng thẻ đóng sau khi kết thúc phần tử.

Viết thường cho tên các thuộc tính

HTML5 cho phép sử dụng cả chữ hoa và chữ thường với tên thuộc tính. Tuy nhiên bạn nên sử dụng chữ thường vì:

Sử dụng cả chữ hoa và chữ thường nhìn rất lộn xộn
Các lập trình viên thường sử dụng các tên viết thường (như trong XHTML)
Viết thường nhìn đoạn code sẽ rõ ràng hơn.
Viết thường sẽ nhanh và dễ dàng hơn.

Không nên:

<div CLASS="menu">

Nên:

<div class="menu">

Sử dụng nháy kép cho các giá trị thuộc tính

HTML5 cho phép các giá trị thuộc tính không cần dấu ngoặc kép. Tuy nhiên tốt hơn hết bạn nên cho thêm dấu ngoặc kép vì:

Giá trị trong dấu ngoặc sẽ dễ đọc và dễ phân biệt hơn.
Bạn cần sử dụng dấu nháy kép nếu giá trị chứa dấu cách.

Không nên:

<table class=striped>
<table class=table striped>

Nên:

<table class="striped">

Thuộc tính hình ảnh

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ì.

Ngoài ra, luôn luôn khai báo chiều rộng và chiều cao hình ảnh. Nó sẽ làm trang web của bạn không bị nhấp nháy vì trình duyệt có thể dự trữ không gian cho hình ảnh trước khi tải.

Không nên:

<img src="html5.gif">

Nên:

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Khoảng trắng và dấu bằng

HTML5 cho phép dấu cách đặt ở hai đầu dấu bằng.

<link rel = "stylesheet" href = "styles.css">

Nhưng khi viết liền sẽ tạo cảm giác dễ đọc 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 đó.

Vì thế hãy cố gắng tránh các dòng mã dài hơn 80 ký tự.

Dòng trống và lùi đầu dòng

Không thêm các dòng trống mà không có lý do.
Để dễ đọc, thêm dòng trống để tách các đoạn dài hoặc phân cách hợp lý giữa các thẻ.
Nên lùi đầu dòng một khoảng nhưng không nên sử dụng phím tab.
Không thêm dòng trống hoặc dấu cách khi không cần thiết.

Cách dòng và thụt lề như ví dụ dưới đây là không cần thiết:

 <body>

<h1>Chuyện Công nghệ</h1>

<h2>Giá Bitcoin hạ kịch sàn, thấp nhất trong năm</h2>

<p>
Tờ CNBC đưa tin đồng tiền ảo này giảm khoảng 9%,
xuống còn $5.640,36 và còn chưa có dấu hiệu dừng lại.
Tại thời điểm viết bài này, giá chỉ còn $5.307,52.
Đây là lần đầu tiên giá bitcoin giảm xuống dưới $6.000
từ khi nhận cú giáng kỉ lục hồi tháng 12 năm ngoái.
</p>

</body>

Nên viết như sau:

<body>

<h1>Chuyện Công nghệ</h1>

<h2>Giá Bitcoin hạ kịch sàn, thấp nhất trong năm/h2>
<p>Tờ CNBC đưa tin đồng tiền ảo này giảm khoảng 9%,
xuống còn $5.640,36 và còn chưa có dấu hiệu dừng lại.
Tại thời điểm viết bài này, giá chỉ còn $5.307,52.
Đây là lần đầu tiên giá bitcoin giảm xuống dưới $6.000
từ khi nhận cú giáng kỉ lục hồi tháng 12 năm ngoái.</p>

</body>

Ví dụ về bảng:

<table>
<tr>
  <th>Tên chuyên mục</th>
  <th>Giới thiệu</th>
</tr>
<tr>
  <td>Công nghệ</td>
<td>Giới thiệu</td>
</tr>
<tr>
<td>Khoa học</td>
<td>Giới thiệu</td>
</tr>
</table>

Vi dụ về danh sách:

<ol>
  <li>Làng Công nghệ</li>
  <li>Khoa học</li>
  <li>Cuộc sống</li>
</ol>

Thiếu thẻ <html> và <body>

Trong HTML5, thẻ <html> và thẻ <body> có thể bị bỏ qua.

Đoạn code dưới đây vẫn hoàn toàn hợp lệ

<!DOCTYPE html>
<head>
<title>Quantrimang</title>
</head>

<h1>Giới thiệu Quantrimang</h1>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>

Tuy nhiê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="vi-VN">

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.

Việc bỏ qua <html> hoặc <body> có thể làm hỏng DOM và phần mềm XML, có thể lỗi khi hiển thị trên trình duyệt cũ hơn (IE9).

Thiếu thẻ <head>

Trong chuẩn HTML5, thẻ <head> cũng có thể bị bỏ qua.

Theo mặc định, trình duyệt sẽ tự động thêm thẻ<head> trước thẻ <body>.

Bạn có thể giảm độ phức tạp của HTML, bằng cách bỏ qua thẻ <head>:

Ví dụ:

<!DOCTYPE html>
<html>
<title>Quantrimang</title>

<body>
<h1>Giới thiệu Quantrimang</h1>
<p>Quantrimang được cập nhật thường xuyên và liên tục.</p>
</body>

</html>

Tuy nhiên, tốt hơn hết bạn không nên bỏ qua thẻ <head>. 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.

Thẻ <title>

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>Định dạng chuẩn và quy ước viết code trong HTML5</title>

Để đảm bảo giải thích chính xác và đúng chỉ mục với các công cụ tìm kiếm khi muốn tìm trang web của bạn, 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:

<!DOCTYPE html>
<html lang="vi-VN">
<head>
<meta charset="UTF-8">
<title>Định dạng chuẩn và quy ước mã hóa trong HTML5</title>
</head>

Cài đặt chế độ xem

HTML5 đã giới thiệu một phương pháp giúp cho các nhà thiết kế web kiểm soát chế độ xem thông qua thẻ <meta>.

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

Phần tử <meta> viewport hướng dẫn cho trình duyệt cách kiểm soát kích thước và tỷ lệ của trang. Vì vậy, bạn nên sử dụng

phần tử <meta> viewport trong tất cả các trang web của mình:

<!DOCTYPE html>
<html lang=”vi-VN”>
<head>
<meta charset=”UTF-8″>
<title>Định dạng chuẩn và quy ước mã hóa trong HTML5</title>
</head>

Các chú thích trong HTML

Comment ngắn nên được viết trên một dòng, như sau:

<!-- Phần giới thiệu về Quantrimang -->

Comment dài nhiều dòng nên được viết như sau:

<!--
Phần giới thiệu về Quantrimang. Phần giới thiệu về Quantrimang.
Phần giới thiệu về Quantrimang. Phần giới thiệu về Quantrimang.
-->

Những chú thích dài sẽ dễ nhìn hơn nếu bạn lùi đầu dòng bằng hai 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 CSS (không cần thiết phải sử dụng thuộc tính type):

<link rel="stylesheet" href="styles.css">

Các đoạn code ngắn có thể được viết lại trên một dòng, như sau:

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

Các đoạn code dài viết trên nhiều dòng, như sau:

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 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 đó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 quá 80 ký tự trên cùng một dòng.

Liên kết JavaScript trong HTML

Bạn có thể sử dụng các cú pháp đơn giản để liên kết với JavaScript (không cần thiết phải sử dụng thuộc tính type):

<script src="myscript.js">

Truy cập các thành phần HTML bằng JavaScript

Hậu quả của việc sử dụng các kiểu HTML không đúng chuẩ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:

var obj = getElementById("Demo")
var obj = getElementById("demo")

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 thư mục

Một số máy chủ web (Apache, Unix) phân biệt chữ hoa chữ thường với tên tập tin: "london.jpg" không thể truy cập là "London.jpg".

Nhưng có những máy chủ web (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.

Vì vậy, nếu bạn sử dụng kết hợp giữa chữ hoa và chữ thường, bạn phải cực kỳ nhất quán để tránh xảy ra lỗi khi chuyển máy chủ.

Để 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.

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 nhau 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. Cả hai sẽ được coi là HTML khi làm việc với bất kỳ trình duyệt và máy chủ nào.

.htm: của các hệ điều hành DOS ban đầu, nơi hệ thống giới hạn phần mở rộng là 3 ký tự.
.html: của hệ điều hành Unix, không có giới hạn này.

Sự khác biệt về kỹ thuật

Khi URL không chỉ định tên tệp (như https://www.quantrimang.com/html/), máy chủ sẽ tự động trả về tên tệp 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, máy chủ có thể được cấu hình với nhiều tệp tin mặc định, và thông thường bạn có thể thiết lập nhiều tập tin mặc định nếu cần.

Dù sao, phần mở rộng đầy đủ cho các tập tin HTML là .html, và không có lý do gì mà bạn không sử dụng tên này.

Tạm vậy thôi. Hãy trở thành một lập trình viên thông minh bằng cách thức viết code gọn gàng, sạch sẽ và đúng chuẩn định dạng như này nhé.

Chúc bạn thành công!

Xem thêm:

Bài trước: Semantic Element (Yếu tố ngữ nghĩa) trong HTML5

Bài tiếp: Phần tử Canvas trong HTML5

Thứ Ba, 27/08/2019 08:23

5 ★ 7 👨 8.114