Hướng dẫn định dạng và quy ước mã hóa HTML5
Quy ước mã hóa HTML Các nhà phát triển web thường không chắc chắn về cú pháp và cách mã hóa để sử dụng trong HTML. Từ năm 2000 đến năm 2010, nhiều nhà phát triển web đã chuyển đổi từ HTML sang XHTML. Với XHTML, các nhà phát triển đã buộc phải viết đúng và mã ...
Quy ước mã hóa HTML
Các nhà phát triển web thường không chắc chắn về cú pháp và cách mã hóa để sử dụng trong HTML. Từ năm 2000 đến năm 2010, nhiều nhà phát triển web đã chuyển đổi từ HTML sang XHTML.
Với XHTML, các nhà phát triển đã buộc phải viết đúng và mã “well-formed”. HTML5 không được hiệu quả khi xác nhận mã.
Việc sử dụng định dạng một cách nhất quán giúp người khác dễ hiểu hơn về HTML. Trong tương lai, các chương trình như trình đọc XML có thể đọc được HTML. Sử dụng cú pháp well-formed-“close to XHTML” có thể tiện lợi hơn.
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 loại tài liệu
Luôn khai báo kiểu tài liệu như là dòng đầu tiên trong tài liệu của bạn:
<!DOCTYPE html>
Nếu muốn có sự nhất quán với các thẻ chữ thường, bạn có thể sử dụng:
<!doctype html>
Sử dụng tên phần tử viết thường
HTML5 cho phép sử dụng cả chữ cái hoa và chữ thường trong tên phần tử. Tuy nhiên bạn nên sử dụng các tên phần tử chữ thường vì:
- Sử dụng cả chữ hoa và chữ thường nhìn rất lộn xộn
- Nhà phát triển thường sử dụng các tên viết thường (như trong XHTML)
- Chữ thường dễ nhìn hơn
- Chữ thường viết dễ hơn
Không khuyến nghị:
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
<Section>
<p>This is a paragraph.</p>
</SECTION>
Khuyến nghị:
<section>
<p>This is a paragraph.</p>
</section>
Đóng tất cả các phần tử HTML
rong 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 bạn nên đóng tất cả các phần tử HTML.
Không khuyến nghị
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Khuyến nghị
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</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.
<meta charset=”utf-8″>
hoặc
<meta charset=”utf-8″ />
Tuy nhiên, dấu gạch chéo đóng (/) là bị bắt buộc phải có trong XHTML và XML. Nếu nghĩ rằng phần mềm XML truy cập trang của bạn, bạn nên giữ dấu ngoặc kép.
Sử dụng tên thuộc tính viết thường
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
- Nhà phát triển thường sử dụng các tên viết thường (như trong XHTML)
- Chữ thường dễ nhìn hơn
- Chữ thường viết dễ hơn
Không khuyến nghị:
<div CLASS=”menu”>
Khuyến nghị:
<div class=”menu”>
Giá trị thuộc tính trích dẫn
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ì:
- Không nên sử dụng lẫn lộn các giá trị chữ hoa và chữ thường
- Giá trị 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 khoảng trắng
Không khuyến nghị (ví dụ đầu giá trị có chứa khoảng trắng)
<table class=table striped>
<table class=striped>
Khuyến nghị
<table class=”striped”>
Các thuộc tính ảnh
Luôn thêm thuộc tính “alt” vào hình ảnh. Thuộc tính này rất quan trọng khi ảnh không hiển thị vì một lý do nào đó. Ngoài ra, luôn luôn khai báo chiều rộng và chiều cao hình ảnh. Điều này làm giảm 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 khuyến nghị:
<img src=”html5.gif”>
Khuyến nghị:
<img src=”html5.gif” alt=”HTML5″ style=”awidth:128px;height:128px”>
Dấu cách và dấu bằng
HTML5 cho phép khoảng trống xung quanh các dấu bằng. Nhưng khi viết liền sẽ tạo cảm giác dễ đọc hơn.
Không khuyến nghị:
<link rel = “stylesheet” href = “styles.css”>
Khuyến nghị:
<link rel=”stylesheet” href=”styles.css”>
Tránh các đoạn mã dài
Khi sử dụng trình chỉnh sửa HTML, nút cuộn không thuận tiện để di chuyển sang phải và trái để đọc mã HTML. Vì thế cố gắng tránh các dòng mã dài hơn 80 ký tự.
Dòng trống và căn lề
Không thêm các dòng trống mà không có lý do. Để có thể đọc được, hãy thêm các dòng trống để tách các khối mã lớn hoặc hợp lý hơn. Đồng thời, bạn nên thụt lề một khoảng và không sử dụng phím tab.
Không sử dụng đường kẻ trống và dấu thụt lề nếu không cần thiết.
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>
Nên viết là:
<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ề bảng:
<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>
Loại bỏ thẻ <html> và <body>
Trong tiêu chuẩn HTML5, thẻ <html> và thẻ <body> có thể bị bỏ qua. Đoạn mã sau sẽ xác nhận là HTML5:
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head><h1>This is a heading</h1>
<p>This is a paragraph.</p>
Tuy nhiên tốt hơn hết bạn không nên bỏ qua thẻ <html> và <body>. Phần tử <html> là gốc tài liệu. Đó là nơi được đề nghị để xác định ngôn ngữ 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 ứng dụng khả năng truy cập (trình đọc màn hình) và các công cụ tìm kiếm. 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.
Loại bỏ thẻ <head>
Trong tiêu chuẩn HTML5, thẻ <head> cũng có thể bị bỏ qua. Theo mặc định, các trình duyệt sẽ thêm tất cả các phần tử trước <body>, thành phần <head> mặc định.
Bạn có thể giảm độ phức tạp của HTML, bằng cách bỏ qua thẻ <head>::
<!DOCTYPE html>
<html>
<title>Page Title</title><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body></html>
Tuy nhiên tốt hơn hết bạn không nên bỏ qua thẻ <head>.
Mô tả dữ liệu
Phần tử <title> được yêu cầu trong HTML5. Làm cho tiêu đề càng có ý nghĩa càng tốt:
<title>HTML5 Syntax and Coding Style</title>
Để đảm bảo giải thích chính xác và đúng chỉ mục của công cụ tìm kiếm, cả ngôn ngữ và mã hoá ký tự phải được xác định sớm trong tài liệu:
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>HTML5 Syntax and Coding Style</title>
</head>
Thiết lập Viewport
HTML5 giới thiệu một phương pháp để cho phép các nhà thiết kế web kiểm soát khung nhìn, thông qua thẻ <meta>.
Chế độ xem là vùng có thể nhìn thấy của người dùng trong một trang web. Nó khác với thiết bị và 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 thêm phần tử <meta> viewport dưới đây trong tất cả các trang web của bạn:
<meta name=”viewport” content=”awidth=device-awidth, initial-scale=1.0″>
Phần tử <meta> viewport cung cấp hướng dẫn của trình duyệt về cách kiểm soát kích thước và quy mô trang.
Phần awidth=device-awidth đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ khác nhau tùy thuộc vào thiết bị). Phần initial-scale=1.0 phần thiết lập mức độ 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ề trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:
Comment trong HTML
Comment ngắn nên được viết trên một dòng, như sau:
<!– This is a comment –>
Comment dài nhiều 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.
–>
Comment dài dễ nhìn hơn nếu chúng được thụt lùi hai khoảng trống.
Style Sheets
Sử dụng cú pháp đơn giản để kết nối với các định dạng (thuộc tính type là không cần thiết):
<link rel=”stylesheet” href=”styles.css”>
Các quy tắc 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 quy tắc dài nên đượ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 khung mở ra trên cùng một đường với bộ chọn
- Sử dụng một khoảng trắng trước khung mở
- Sử dụng hai khoảng trống để thụt lề
- 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 kép quanh giá trị nếu giá trị chứa dấu cách
- Đặt khung đóng trên một đường thẳng
- Tránh đường kẻ với trên 80 ký tự
Tải JavaScript bằng HTML
Sử dụng cú pháp đơn giản để tải 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 Thành phần HTML với JavaScript
Hậu quả của việc sử dụng các kiểu HTML “untidy”, có thể dẫn đến lỗi JavaScript. Hai câu lệnh JavaScript này sẽ cho kết quả khác nhau:
var obj = getElementById(“Demo”)
var obj = getElementById(“demo”)
Sử dụng tên thư mục viết thường
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”.
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” hoặc “london.jpg”.
Nếu sử dụng kết hợp các chữ hoa và chữ thường, bạn phải thật nhất quán. Nếu bạn chuyển từ một trường hợp không nhạy cảm đến một máy chủ nhạy cảm máy chủ, ngay cả những lỗi nhỏ sẽ phá vỡ web. Để tránh những vấn đề này, luôn sử dụng tên tập tin chữ thường.
Phần mở rộng của tệp tin
Các tệp HTML phải có đuôi .html hoặc .htm. Các tệp CSS nên có phần mở rộng .css. Các tệp JavaScript nên có đuôi .js.
Sự khác nhau giữa .htm và .html
Không có sự khác biệt giữa phần mở rộng .htm và .html. Cả hai sẽ được coi là HTML bởi bất kỳ trình duyệt web hoặc máy chủ web.
.htm: của các hệ thống DOS ban đầu, nơi hệ thống giới hạn các phần mở rộng đến 3 ký tự.
.html: của hệ điều hành Unix mà 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.w3schools.com/css/), máy chủ trả về tên tệp mặc định. Tên tệp mặc định phổ biến là index.html, index.htm, default.html và default.htm.
Nếu máy chủ của bạn chỉ được cấu hình với “index.html” làm tên tệp mặc định, tệp của bạn phải có tên “index.html” chứ không phải “index.htm”. Tuy nhiên, máy chủ có thể được cấu hình với nhiều tên tệp mặc định, và thông thường bạn có thể thiết lập nhiều tên 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ì nó không nên được sử dụng.
- Học lập trình front-end cơ bản với bootstrap 4/html5/css3
- Học lập trình front-end nâng cao qua Project thực tế
- Học thiết kế web với Photoshop, CSS theo kiểu SASS
- Học cách sử dụng Git_hub cho lập trình viên
- Học lập trình Back-end PHP theo mô hình MVC cơ bản
- Học lập trình Back-end PHP theo mô hình MVC nâng cao
- Học lập trình Cơ sở dữ liệu với AngularJS
- Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
- Combo lập trình front-end từ cơ bản – nâng cao
- Combo lập trình back-end từ cơ bản đến nâng cao
- Combo lập trình web với word press từ A-Z
