Thứ Bảy, 24 tháng 8, 2013

Home » HTML và CSS » 10 Phương Pháp Viết HTML hợp lệ

10 Phương Pháp Viết HTML hợp lệ

By Unknown   Posted at  22:41   HTML và CSS No comments




Trong thiết kế website, việc viết mã HTML hợp lệ và đúng chuẩn là rất cần thiết, nhưng trong quá trình thiết kế sẽ không thể tránh khỏi một số lỗi không hợp lệ (invalid), ngay cả bản thân mình nhiều lúc vẫn mắc phải.

Bài viết này mình sẽ hướng dẫn các bạn một số phương pháp để viết mã HTML hợp lệ và đúng chuẩn, đặc biệt là các bạn mới tìm hiểu HTML.



Cách kiểm tra:

Để kiểm tra một đoạn mã HTML mình viết có hợp lệ hay không, bạn truy cập địa chỉ: http://validator.w3.org và tiến hành kiểm tra với các công cụ hệ thống cung cấp.

Nếu mã HTML của bạn hợp lệ sẽ nhận được thông báo Passed, ngược lại sẽ nhận được thông báo chi tiết các lỗi bạn cần chỉnh sửa


1. Luôn khai báo thành phần Strict DOCTYPE

Thành phần DOCTYPE được thêm vào đầu trong tài liệu HTML để tạo thành chuẩn web mới XHTML, những trang web không được khai báo thành phần DOCTYPE sẽ được cho là chuẩn web cũ (Lỗi thời) và không hợp lệ

Dưới đây là một thành phần DOCTYPE mẫu bạn có thể tham khảo:
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
Tham khảo thêm: http://groupfcwc.blogspot.com/2013/08/html-bai-12-cac-at-biet-phan-1.html
2. Luôn đặt giá trị cho tất cả các thuộc tính (Attribute) của các thẻ.

Khi khai báo thuộc tính của các thẻ, bạn buộc phải thêm giá trị cho thuộc tính đó mà không được phép bỏ trống.

Ví dụ:

Trường hợp sau đây sẽ không hợp lệ:
1<h2 title="">HTML validator</h2>
Để đoạn mã trên hợp lệ bạn phải khai báo giá trị cho  thuộc tính title
1<h2 title="HTML">HTML validator</h2>

3. Giá trị của các thuộc tính phải được đặt trong dấu ngoặc kép (“”)

Đối với chuẩn cũ bạn có thể viết như sau:
1<h2 title=first>HTML validator</h2>
Nhưng với chuẩn mới thì cách viết đó không còn hợp lệ, để hợp lệ bạn phải đặt giá trị của thuộc tính title trong dấu ngoặc kép.
1<h2 title="first">HTML validator</h2>

4. Luôn đặt thuộc tính alt cho thẻ <img>

Giá trị của thuộc tính Alt trong thẻ <img> sẽ được hiển thị thay thế khi link hình ảnh không tồn tại. Ngoài ra còn có tác dụng đối với SEO cho website.

Chuẩn XHTML bắt buộc bạn phải đặt thuộc tính Alt cho tất cả các hình ảnh trong trang web.

Ví dụ về thẻ <img> hợp lệ
1<img src="logo.gif" alt="Logo" />

5. Luôn đóng tất cả các thẻ

Việc quên đóng một thẻ nào đó sau khi mở không những không valid được HTML mà có thể còn làm giao diện của bạn hiển thị không đúng.

Đối với các cặp thẻ phải luôn có thẻ đóng

Ví dụ: <p> thì phải có </p>, <div> phải có </div>,…

Đối với các thẻ đơn thì phải có dấu / (slash) ở cuối

Ví dụ: <br />, <img />, <hr />…
6. Đóng đúng thứ tự các thẻ

HTML là ngôn ngữ logic, do đó bạn phải luôn đóng dúng thứ tự tất cả các thẻ từ trong ra ngoài. Trường hợp sau là cách đóng thẻ không hợp lệ:
1<p><span>HTML là gì?</p></span>
Cách viết đúng phải là:
1<p><span>HTML là gì?</span></p>

7. Đối với HTML List (ul, ol, li)

Thẻ <li> là phần tử của ul và ol, do đó thẻ <li> phải luôn được đặt trong cặp thẻ <ul> hoặc cặp thẻ <ol>.

8. Đặt đúng vị trí của các thành phần block và Inline

Có thể đặt các thành phần inline trong các thành phần block, như không thể đặt các thành phần Block trong trong các thành phần Inline

Cách viết sau sẽ được cho là không hợp lệ:
1<span>
2<p>HTML là gì?</p>
3</span>
Thành phần p là thành phần block, do đó không thể đặt trong thành phần span (Span là thành phần Inline).

Bạn có thể tìm hiểu thêm về các thành phần block và inline trong bài: Block và Inline.
9. Sử dụng mã để thay cho các ký tự đặc biệt

Khi bạn muốn hiển thị các ký tự đặc biệt như: <, >, &, …, thì trong HTML các ký tự đó phải được viết ở dạng mã:

Ví dụ muốn hiển thị > thì bạn phải thay thế bằng &gt;

< thay thế bằng &lt;

& thay thế bằng &amp;

….

10. Viết thường tất cả các tên thẻ

Mình rất nhiều lần bắt gặp một số trang web gặp lỗi này, đó là viết Hoa tên thẻ, ví dụ <B>Viết hoa tên thẻ</B>. Nếu bạn cũng có ý định đó thì xin hãy sửa chữa ngay lúc này, thứ nhất mất thời gian hơn (vì phải bật Caps Lock, hoặc nhấn thêm Shift), và điều quan trọng nhất là cách viết đó không hợp lệ. Xin nhớ nhé, hãy viết tên các thẻ HTML ở dạng chữ in thường.

11, Đối với thẻ <script>

Đối với thẻ <script> sử dụng thuộc tính type=”text/javascript” thay cho language=”javascript”
1<script type="text/javascript" >//Code here</script>

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 nhận xét:

Back to top ↑
Connect with Us

What they says

© 2013 abcdasdasd. WP Mythemeshop Converted by BloggerTheme9
Blogger templates. Proudly Powered by Blogger.