HTML5 20.2 – Chuẩn viết code HTML và HTML5 (Phần 2)

0
94

Xin chào các bạn, bài số 20 trong series học HTML5 chúng ta sẽ cùng nhau đi tìm hiểu về những quy ước, quy tắc chuẩn để code HTML cũng như HTML5 nhé! Bài này thuộc phần 2 trong Bài 20.

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:

Tuy nhiên 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:

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ũ (như các phiên bản IE9).

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

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>

Để đả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:

<meta charset=”UTF-8″>

Chú thích chuẩn trong HTML

Với 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:

Với những chú thích dài, được viết trên nhiều dòng, bạn nên sử dụng cặp thẻ <!----> nằm riêng trên một dòng:

Những chú thích dài sẽ dễ nhìn hơn rất nhiều đúng không nào.

Style Sheets

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

Quy chuẩn code cú pháp CSS:

  • Đặ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 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ị.

thuoctinh: giatri;

  • Sử dụng dấu cách sau dấu phẩy. 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.

font-family: "Arial Black", Helvetica, sans-serif;

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

"Arial Black"

  • Đặ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 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ú 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):

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 à 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ự.

Kết luận

Viết chuẩn code tưởng như là đơn giản nhưng lại có rất nhiều vấn đề các bạn không để ý trong lúc code đúng không nào, nên rất hay mắc phải các lỗi code cơ bản. Các bạn nên lưu ý về vấn đề này nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây