Quy ước Và Phong Cách Viết HTML5 - WebVN

Trang chủ » Chuẩn Html5 » Quy ước Và Phong Cách Viết HTML5 - WebVN

Có thể bạn quan tâm

« Bài TrướcBài Tiếp »

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

Luôn luôn giữ cho phong cách viết code của bạn thông minh, gọn gàng, sạch sẽ và đúng định dạng.

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ệ:

123 <SECTION><p>Đâylànộidung.</p></SECTION>

Cách viết rất tệ

123 <Section><p>Đâylànộidung.</p></SECTION>

Cách viết TỐT

123 <section><p>Đâylànộidung.</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ệ:

1234 <section><p>Đâylànộidung.<p>Đâylànộidung.</section>

Cách viết TỐT:

1234 <section><p>Đâylànộidung.</p><p>Đâylànộidung.</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:

123456789101112 <body> <h1>Những thành phốnổitiếng</h1> <h2>Tokyo</h2> <p>TokyolàthủđôcủaNhậtBản,trungtâmcủavùng thủđôTokyovàlàđôthịđông nhấttrênthếgiới.</p> </body>

Cách viết tốt hơn:

123456789 <body> <h1>Những thành phốnổitiếng</h1> <h2>Tokyo</h2><p>TokyolàthủđôcủaNhậtBản,trungtâmcủavùng thủđôTokyovàlàđôthịđông nhấttrênthếgiới.</p> </body>

Đối với bảng:

1234567891011121314 <table><tr><th>Tên</th><th>Miêutả</th></tr><tr><td>A</td><td>MiêutảvềA</td></tr><tr><td>B</td><td>MiêutảvềB</td></tr></table>

Đối với danh sách

12345 <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:

1234567 <!DOCTYPE html><head><title>Tiêuđềtrang</title></head> <h1>Đềmụclớn</h1><p>Nộidung 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:

12 <!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:

12345678910 <!DOCTYPE html><html><title>Tiêuđểtrang</title> <body><h1>Đềmụclớn</h1><p>Nộidung trang</p></body> </html>

Việc bỏ thẻ dường như không mấy quen thuộc với các lập trình viên. Chúng ta cần thời gian để làm quen với việc này.

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ápvàphongcách viếtmã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:

123456 <!DOCTYPE html><html lang="vi-VN"><head><meta charset="UTF-8"><title>Cúphápvàphongcách viếtmã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 <!--Đâylàmộtghi 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:

1234 <!--Đâylàvídụvềghi chúdài.Đâylàvídụvềghi chúdài.Đâylàvídụvềghi chúdài.Đâylàvídụvềghi chúdài.Đâylàvídụvềghi chúdài.Đâylà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:

123456 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.
Đặt dấu cách sau dấu phẩy hoặc dấu chấm phẩy là luật chung cho tất cả các loại văn bản.

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:

1234567891011121314 <!DOCTYPE html><html><body> <pid="Demo">Đâylànộidung1.</p><pid="demo">Đâylànộidung2.</p> <script>// Chỉ có đoạn nội dung 2 bị ghi đèdocument.getElementById("demo").innerHTML="XIN CHÀO.";</script> </body></html>

Demo

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.

« Bài TrướcBài Tiếp »

Từ khóa » Chuẩn Html5