Viết mã HTML "sạch"
Nếu bạn đang học viết CSS hoặc bạn là người dùng thẻ <div> tràn lan trong file HTML thì bạn nên xem bài viết này. Bài viết hướng dẫn bạn cách sử dụng các thẻ khác của HTML và tối thiểu việc sử dụng thẻ <div>
Khi viết mã HTML "sạch", bạn & teamwork của mình sẽ tiết kiệm được nhiều thời gian hơn trong việc chỉnh sửa và gỡ lỗi.
1. Bỏ các thẻ <div> không cần thiết
Rất nhiều người sử dụng thẻ <div> bao ngoài thẻ <form> và <ul>. Phần lớn trường hợp việc này là không cần thiết, vì bạn có thể áp dụng các thuộc tính CSS vào các thẻ <form> và <ul> như dưới đây:
Với cùng một mã CSS, 2 đoạn HTML trên thể hiện trên trình duyệt là như nhau.
2. Dùng các thẻ khác thay thế
Khi viết mã HTML, bạn nên dùng các thẻ khác (như <h1> cho tiêu đề, <p> cho đoạn văn, <ul> cho list & menu...) thay vì chỉ dùng thẻ <div>. Khi trang web của bạn được xem trên một trình duyệt không hỗ trợ CSS, nó vẫn dễ hiểu.
Ví dụ với menu, nếu bạn dùng thẻ div, khi không đọc được CSS, người dùng sẽ rất khó để biết được đâu là menu cha, đâu là menu con.
3. Tối thiểu sử dụng thẻ <div>
Bạn có thể xem ví dụ, để thể hiện cùng 1 kiểu trên trình duyệt, tôi bỏ 2 thẻ <div> và thay vào đó một thẻ <span> & sửa mã CSS:
4. Định dạng mã HTML
Bạn nên định dạng mã HTML của mình sao cho dễ đọc và sửa lỗi. Nếu bạn dùng Adobe Dreamweaver, bạn có thể dễ dàng định dạng bằng cách chọn menu Commands > Apply Source Formatting
5. Comment
Khi bạn ghép code vào CMS (ví dụ theme cho Wordpress), file template chia thành rất nhiều file nhỏ như: index.php, sidebar.php, footer.php... bạn sẽ khó tìm được thẻ đóng. Vì thế bạn nên sử dụng comment cạnh thẻ đóng. Ví dụ khi tôi thấy <!-- /container --> tôi sẽ biết trên nó là thẻ đóng của <div id="container">
Theo Webdesignerwall