HTML #1: 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 #2: 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 #3: Đó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 #4: 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 #5: 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

HTML #6: Sử dụng 'onclick'

Trước khi có jQuery, moootools hay các javascript framework khác thì đây là việc phổ biến. Nếu trình duyệt không hỗ trợ javascript thì người dùng sẽ không biết được chuyện gì sẽ xảy ra khi clik

Sử dụng sai:

<a href="#" onclick="popup();">Click Here</a>

Sử dụng đúng:

<a href="popup.html" rel="external">Click Here</a>

Và mã javascript (sử dụng với jQuery)

$('a[rel="external"]').click( function() {
    popUp($(this).attr('href'));
    return false;
});
    
function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,width=520,height=420');");
}

HTML #7: 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>&copy;, &amp; Stuff</p>

HTML #8: 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 class="header">Header Title</h1>

Và style cho header:

h1.Header{
    /*
    Mã CSS để ẩn text và hiện background
    */
}

HTML #9: 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 #1: 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 #2: 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 #3: 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 #4: 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