Dưới đây là các lỗi thường gặp khi viết mã HTML & CSS mà bạn cần chú ý để có thể validate HTML và CSS
HTML – Sai DOCTYPE
DOCTYPE sẽ nói cho trình duyệt loại mã HTML mà trang web sử dụng, ở HTML 4.01 có 3 loại DOCTYPE chính:
- HTML 4.01 Strict
- HTML 4.01 Transitional
- HTML 4.01 Frameset
Bạn có thể tìm hiểu thêm về DOCTYPE trên w3schools
HTML – Sử dụng id giống nhau
Trên một trang web, class có thể dùng nhiều lần nhưng bạn chỉ được dùng id cho 1 element riêng. Điều này đặc biệt quan trọng khi áp dụng javascript, ajax.
Sử dụng sai:
<div id="idabc">Information</div> <div id="idabc">Other information</div>
Sử dụng đúng:
<div id="infomation">Information</div> <div id="otherinfo">Other information</div>
HTML – Đóng thẻ không đúng thứ tự
Việc đóng thẻ đúng thứ tự là rất quan trọng, ví dụ thẻ div chỉ được đóng sau khi tất cả các thẻ trong nó đóng
Sử dụng sai:
<div><strong>Information</div></strong>
Sử dụng đúng:
<div><strong>Information</strong></div>
HTML – Viết hoa các tags
Bạn sẽ không validate được mã HTML của mình nếu viết như sau
<DIV></DIV>
HTML – Sử dụng style ngay trên thẻ (inline style)
Sử dụng style ngay trong thẻ HTML bao giờ cũng nhanh hơn việc đưa chúng vào file CSS riêng, nhưng việc đó làm cho bạn rất vất vả khi thay đổi các thẻ giống nhau và khó gỡ lỗi
<a href="link.html" style="color: #000; text-decoration: none;">link name</a>
HTML – Sử dụng các kí tự đặc biệt
Hãy chắc chắn rằng bạn sử dụng ký tự đặc biệt đúng cách trong mã HTML vì không phải lúc nào trình duyệt cũng có thể hiểu và xử lý chúng
Sử dụng sai:
<p> ©, & Stuff</p>
Sử dụng đúng:
<p>©, & Stuff</p>
HTML – Sử dụng header là ảnh
Khi trong thiết kế có những font không có trong hệ thống, thì bạn cũng không nên dùng như sau:
<img src="Header.jpg" alt="Header title" />
Cách sử dụng đúng phải là kết hợp với CSS:
<h1>Header Title</h1>
Và style cho header:
h1.Header{ /* Mã CSS để ẩn text và hiện background */ }
HTML – Không có thuộc tính alt
Tại sao phải thêm alt vào trong thẻ img khi không hề có khác biệt? Alt sẽ giúp người đọc xem được thông tin về ảnh khi họ không tải được ảnh đó, nó còn giúp các bộ máy tìm kiếm hiểu bức ảnh hơn (SEO)
Sử dụng sai:
<img src="image.jpg" />
Sử dụng đúng:
<img src="image.jpg" alt="image alt tag" />
CSS – Không sử dụng cách viết tắt
border-top:1px solid #00f; border-right:1px solid #00f; border-bottom:1px solid #00f; border-left:1px solid #00f;
Khi cả 4 border như nhau, tại sao bạn không dùng:
border:1px solid #00f;
CSS – Sử dụng đơn vị cho giá trị bằng 0
Bạn không cần phải điền đơn vị cho các giá trị bằng 0 vì 0px, 0pt, 0em đều bằng nhau.
/* Thay vì */ padding:0px 0px 5px 0px; /* Bạn nên dùng */ padding:0 0 5px 0;
CSS – Sử dụng mã màu
Bạn có thể khai báo dùng màu ‘white’, ‘black’, ‘red’… nhưng tốt nhất hãy cho trình duyệt biết chính xác màu hiển thị bằng cách sử dụng mã màu. Và với các mã màu lặp lại như #ffffff, #000000 bạn cũng có thể viết tắt thành #fff hoặc #000
color: #000; color: #e6a; /* Tương đương với màu #ee66aa */
CSS – Sử dụng sai Position
Khi bạn mới bắt đầu học CSS thì position khá khó hiểu. Bạn có thể sử dụng: static, relative, absolute và fixed. Giá trị mặc định của position là static. Bạn có thể xem cách sử dụng chi tiết tại w3school