Rate this post
Đối với các lập trình viên html mới bắt đầu, việc sai lầm trong việc lập trình là điều tất nhiên. Trong HTML, nếu các bạn không để ý, các bạn rất dễ gặp một số lỗi trong quá trình thiết kế html. Hôm nay hãy cùng websitehcm tìm hiểu về các sai lầm không nên có trong thiết kế html.
Các bài viết liên quan:
Các lỗi thường gặp trong quá trình lập trình html
Thiếu hoặc sai DOCTYPE
DOCTYPE cho các trình duyệt Web biết phiên bản HTML mà trang của bạn đang sử dụng. Về mặt kỹ thuật, nó đề cập đến Định nghĩa loại tài liệu (DTD) về cơ bản chỉ định các quy tắc cho phiên bản HTML đó.
DOCTYPE phải luôn là dòng đầu tiên của mã HTML của bạn và nó phân biệt chữ hoa chữ thường.
Trong HTML 4.01 có ba LOẠI TÀI LIỆU chính:
- The HTML 4.01 Strict DTD bao gồm tất cả các phần tử và thuộc tính không bị phản đối hoặc không xuất hiện trong các tài liệu bộ khung. Đối với các tài liệu sử dụng DTD này, hãy sử dụng khai báo loại tài liệu này:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd ">
- The HTML 4.01 Transitional DTD bao gồm mọi thứ trong HTML 4.01 Strict DTD cộng với các phần tử và thuộc tính không được dùng nữa (hầu hết đều liên quan đến trình bày trực quan). Đối với các tài liệu sử dụng DTD này, hãy sử dụng khai báo loại tài liệu này:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose. dtd ">
- HTML 4.01 Frameset DTD cũng bao gồm mọi thứ trong HTML 4.01 Transitional DTD. Đối với các tài liệu sử dụng DTD này, hãy sử dụng khai báo loại tài liệu này:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset. dtd "
Thiếu Character Encoding
Tất cả các trang Web phải xác định bộ ký tự mà chúng hiện đang sử dụng. Mặc dù các bộ ký tự khá kỹ thuật, chúng chỉ đơn giản là cho trình duyệt Web biết bộ ký tự nào được sử dụng trong trang.
Nếu một trang chứa các ký tự tiếng Anh được tìm thấy trên bàn phím điển hình sẽ có bộ ký tự khác với bộ ký tự sẽ hiển thị các ký tự tiếng Nhật. Mã hóa ký tự cho tác nhân người dùng (trình duyệt hoặc thiết bị hỗ trợ) biết loại dữ liệu nào cần đọc và hiển thị. Đối với hầu hết các trang web tiếng Anh, mã hóa ký tự sẽ được nhập vào trang web như sau:
<meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1">
- Thẻ meta này nên nằm trong các thẻ <head> và </head> của trang Web của bạn và không phân biệt chữ hoa chữ thường.
- http-equiv = “Content-Type” cho trình duyệt biết đây là loại thẻ meta nào (có một số loại).
- content = “text / html; cho biết đây là tài liệu html chỉ chứa văn bản. charset = ISO-8859-1 cho trình duyệt biết rằng trình duyệt đang sử dụng bộ ký tự ISO-8859-1 – xác định các ký tự tiếng Anh thông dụng. Bộ ký tự tiếng Anh thông dụng là windows-1252. Một trang web tiếng Nhật có thể có charset = shift_jis. Đây là danh sách các bộ ký tự phổ biến.
Unsupported tags và attributes
Việc sử dụng mã không phải là một phần của tiêu chuẩn HTML là không thích hợp. Chúng bao gồm các thẻ <BLINK> và <MARQUEE>, trong số các thẻ khác. Ngoài ra còn có nhiều thuộc tính của thẻ HTML mà nhiều trình duyệt sẽ nhận ra, nhưng đó không phải là một phần của tiêu chuẩn HTML.
Các thuộc tính thường được sử dụng không phù hợp là các thuộc tính trong thẻ <body> sửa đổi kích thước lề, chẳng hạn như <body marginwidth = “0”>.
Các thẻ và thuộc tính này thay đổi tùy theo phiên bản HTML mà bạn đang phát triển. Vì lý do khả năng truy cập và khả năng tương thích, tất cả chúng ta nên sử dụng ÍT NHẤT phiên bản HTML 4.01.
Để tìm hiểu xem trang của bạn có chứa các thẻ hoặc thuộc tính HTML không được hỗ trợ hay không, hãy xác thực nó tại Trình xác thực HTML của W3C. Nếu bạn không có DOCTYPE, thì nó sẽ không biết phiên bản HTML nào để xác thực trang của bạn.
HTML được định dạng không đúng
Những lỗi phổ biến nhất trong HTML thường chỉ là những sai lầm đơn giản của con người. Đây là danh sách HTML no-no’s:
- Thiếu dấu ngoặc kép cho các giá trị thuộc tính.
Mặc dù các phiên bản HTML cũ hơn không yêu cầu bạn bao quanh các giá trị bằng dấu ngoặc kép, nhưng các phiên bản tương lai (bao gồm cả XHTML) sẽ làm như vậy. Mặc dù bạn có thể tránh được lỗi này trong hầu hết các trình duyệt, nhưng bạn nên đặt dấu ngoặc kép xung quanh các giá trị.
Ví dụ về những điều KHÔNG nên làm:
<img src = myimage.gif> <font color = # FF00FF> <p style = font-face: arial, geneva>
- Thiếu thẻ đóng
Hầu hết các thẻ HTML đều có cả thẻ mở và thẻ đóng (tức là <b> và </b>). Nếu một nhãn thẻ hiện lên hoặc bao quanh bất kỳ nội dung nào khác, thì thẻ đó phải được đóng lại. Một ngoại lệ cho điều này là thẻ <p>. XHTML (mà chúng ta sẽ nói sau) yêu cầu đóng TẤT CẢ các thẻ. Tôi khuyên bạn nên đóng thẻ <p>, ngay cả khi nó không được yêu cầu ngay bây giờ. Điều này cũng giúp chỉnh sửa HTML của bạn dễ dàng hơn.
- Lồng các thẻ HTML không đúng cách.
Các thẻ HTML phải được đóng theo thứ tự ngược lại với thứ tự mà chúng đã được mở. Tôi thích vẽ các đường cong tưởng tượng từ việc khớp các thẻ mở và thẻ đóng. Nếu bất kỳ dòng nào cắt ngang, thì có thể bạn đã lồng không đúng cách.
Chính xác: Các dòng uốn cong đến các thẻ HTML phù hợp mà không giao nhau, cho biết cách lồng HTML thích hợp.
Không chính xác: Các dòng uốn cong đến các thẻ HTML phù hợp chéo nhau, cho biết việc lồng HTML không đúng cách.
Rất phổ biến mã không đúng khi lồng các danh sách (chẳng hạn như những danh sách mà bạn đang xem ngay bây giờ). Mọi <UL> hoặc <OL> lồng nhau phải được đặt trong một <LI> mẹ.
- Sử dụng thẻ HTML sai mục đích
Việc lạm dụng HTML phổ biến là sử dụng thẻ danh sách <UL> hoặc <OL> để mô phỏng thụt lề đoạn văn. Thẻ HTML chỉ nên được sử dụng cho mục đích chúng tôi
lại dự định. Thẻ danh sách nên được sử dụng cho danh sách, <BLOCKQUOTE> cho dấu ngoặc kép dài, v.v.
Table không phù hợp
Table là một thủ phạm phổ biến của HTML không phù hợp. Rất dễ dàng để mã bảng không chính xác và hầu hết các trình duyệt sẽ cho phép bạn xử lý nó. Các công nghệ hỗ trợ rất nghiêm ngặt về cấu trúc bảng phù hợp. Các lỗi bảng thường gặp là:
- Không đóng các thẻ <table>, <tr> hoặc <td> hoặc đóng chúng không đúng cách (xem ở trên)
- Chèn các <td> bên ngoài <tr>
- Tạo bảng với số lượng ô khác nhau (hoặc dải ô / dải ô) trong mỗi hàng
- Đặt bảng trong các phần tử nội tuyến, chẳng hạn như <b> hoặc <h1>
- Bao quanh các ô hoặc hàng trong bảng có thẻ định dạng văn bản (tức là <table> <b> <tr> <td> Tôi in đậm </td> </tr> </b> </table>)
- Bảng dữ liệu phải có chú thích, ngay sau thẻ mở bảng – <table> <caption> Dữ liệu từ Cuộc thi ăn Jello </caption> <tr> …
Thiếu ALT text
Tất cả các hình ảnh phải có thuộc tính alt. Kể từ phiên bản HTML 4.01, điều này là bắt buộc.
<img src = "image.gif" alt = "image description">
Title phải nằm trong <head>
Các thẻ <title>, <meta> và <style> phải nằm trong các thẻ <head> và </head>.
Thiếu thẻ </body> hoặc </html>
Sử dụng form không đúng cách
Thẻ biểu mẫu là thẻ cấp khối, nghĩa là nó bắt đầu một phần mới trên trang của bạn (giống như <h1> và <p> do). Đó là một sai lầm phổ biến khi sử dụng các thẻ form để bao quanh các phần nhỏ hơn trên trang của bạn. Để tránh việc form chèn một dòng trống khi nó bắt đầu. Điều này đặc biệt phổ biến trong các bảng.
Không đúng:
<table> <form> <tr> <td> ..... </td> </tr> </form> </table>
Đúng:
<form> <table> <tr> .... </tr> </table> </form>
align = absmiddle
Phần mở rộng HTML thường được sử dụng này không phải là HTML thích hợp cho thẻ img (tức là <img src = “image.gif” align = “absmiddle”>). Thuộc tính này được các trình duyệt chính hỗ trợ, nhưng nếu bạn muốn mã của mình chính xác, hãy sử dụng align = middle hoặc CSS để căn chỉnh văn bản vào giữa hình ảnh.
Thiếu script type
Các ngôn ngữ kịch bản như JavaScript và VBScript đang trở nên rất phổ biến. Các tiêu chuẩn HTML yêu cầu bạn xác định loại ngôn ngữ kịch bản đang được sử dụng. Hầu hết các tập lệnh đều bao gồm thuộc tính ngôn ngữ. Chỉ điều này là không đủ, bạn cũng phải bao gồm một thuộc tính loại. Trên thực tế, trong tương lai, thuộc tính ngôn ngữ sẽ được thay thế bằng thuộc tính type.
<script type = "text / javascript">
Thiếu <noscript>
Bất kỳ JavaScript nào thực hiện một chức năng hoặc xuất ra thông tin phải có thẻ <noscript> cung cấp một giải pháp thay thế hoặc giải thích cho những gì JavaScript thực hiện.
<script type = "text / javascript"> .... nội dung javascript ở đây ... </script> <noscript> <P> Truy cập dữ liệu <A href="https://websitehcm.com/data">. </A> </noscript>
Danh sách này có thể tiếp tục và tiếp tục. Cách tốt nhất để xác định những lỗi bạn đang mắc phải là xác thực trang của bạn. Một quan niệm sai lầm phổ biến về HTML thích hợp là nếu bạn sử dụng chương trình phát triển Web WYSIWYG để thiết kế trang của mình thì HTML của bạn sẽ tự động hợp lệ. Điều này là không đúng. Nhiều chương trình phát triển phổ biến sẽ tạo mã không phù hợp hoặc cho phép bạn có chức năng tạo mã không phù hợp. Luôn kiểm tra HTML của bạn để đảm bảo tính hợp lệ.
