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

0
156

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é!

Quy ước viết code HTML5 (coding convention)

Là 1 lập trình viên, không chỉ là bạn biết code, mà bạn còn phải code theo chuẩn nữa. Đã bao giờ bạn đặt câu hỏi hay thắc mắc rằng cách thức viết code của mình cũng như cú pháp sử dụng đã theo đúng chuẩn HTML?

Vào giữa khoảng những năm từ 2000 đến 2010, nhiều lập trình viên đã chuyển cách viết code từ HTML sang XHTML. Với XHTML đòi hỏi lập trình viên phải viết code đúng cú pháp 1 cách nghiêm ngặt, gọi là 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 nhé.

Cách viết code thông minh

Một điều bạn nên để ý trong khi code đó là sự thông minh sử dụng quy tắc viết code theo đúng chuẩn, viết sao cho 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.

1. Sử dụng đúng DOCTYPE

Khai báo DOCTYPE cũng là 1 vấn đề bạn cần lưu ý. Luôn khai báo ở dòng đầu tiên trong đoạn code của bạn:

Có thể khai báo viết thường nếu bạn muốn ddoognf nhất các thẻ khác trong code:

2. Sử dụng chữ thường cho tên phần tử HTML

HTML5 không phân biệt chữ hoa – chữ thường cho tên các phần tử. Nhưng tôi khuyên bạn nên sử dụng chữ thường cho tên các phần tử, vì:

  • Kết hợp cả chữ hoa và chữ thường sẽ không đẹp mắt, nhiều khi dẫn tới rối mắt trong lúc code.
  • Sử dụng chữ viết thường gần giống chuẩn XHTML hơn.
  • Viết thường nhìn đoạn code mạch lạc, rõ ràng hơn.
  • Viết chữ thường nhanh hơn.
Cách viết không tốt Cách viết rất không tốt Cách viết tốt
<SECTION> <p>This is a paragraph.</p> </SECTION> <Section> <p>This is a paragraph.</p> </SECTION> <section> <p>This is a paragraph.</p> </section>

3. 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 sử dụng thẻ đóng cho tất cả các phần tử. VD: thẻ <p>

Nhưng để code chuẩn, bạn nên sử dụng thẻ đóng cho các phần tử nhé.

Cách viết không tốt Cách viết tốt
<section> <p>This is a paragraph. <p>This is a paragraph. </section> <section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>

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

Có thể viết:

Hoặc:

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

5. Sử dụng chữ thường cho tên các thuộc tính

Giống tên thẻ, tên thuộc tính bạn cũng nên sử dụng chữ thường nhé. VD:

6. 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 dùng sẽ tạo một thói quen không tốt cho người lập trình, lập trình phải có tính đồng nhất nhất quán.
  • Để 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:

Ví dụ này sẽ chạy khi:

7. Thuộc tính trong thẻ 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 công cụ tìm kiếm có thể dễ dàng tìm được nội dung ảnh bạn định nói gì.

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.

alt=”HTML5″

width:100px; height:100px

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

Các khoảng trắng dấu cách có thể đặt 2 đầu dấu bằng:

=

=

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:

9. Tránh 1 dòng code quá dài

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

10. Lùi đầu dòng và cách dóng code

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

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

Ví dụ cách dòng không cần thiết:

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

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