Tránh lạm dụng thẻ Div

Trên izwebz tôi có đăng một video về Sử dụng div đúng cách nhưng video đó vẫn chưa bao quát hết về cách sử dụng thẻ Div. Hơn nữa gần đây khi các bạn có gửi code nhờ tôi hướng dẫn qua email, thì tôi thấy rằng rất nhiều bạn vẫn chưa hiểu tường tận cách sử dụng thẻ div dẫn đến tình trạng lạm dụng thẻ div hoặc sử dụng nó chưa đúng cách.

Trong bài này tôi sẽ cố gắng giải thích rõ ràng hơn về thẻ div và đưa ra một số ví dụ mà bạn có thể thay vì dùng div thì dùng những thành phần Block Elements khác để thay thế. Nhưng có một nguyên tắc mà bạn có thể sử dụng khi viết code là một khi bạn phải sử dụng đến hơn 2 thẻ div cho một thành phần, thì bạn hãy nghĩ lại và xem xem có thực sự cần đến 2 thẻ div hay không?.

Nếu bây giờ bạn hỏi “vậy tại sao tôi không được sử dụng nhiều thẻ div?”. Sử dụng quá nhiều thẻ div hơn mức cần thiết thì bạn đã làm cho code HTML của mình không được “sạch đẹp”. Sau này có phải sửa chữa cũng khó khăn và khó quản lý. Đặc biệt khi bạn làm việc với nhóm mà khi họ nhìn vào code HTML của bạn viết mà không hiểu được ý đồ thiết kế của bạn hay các thành phần trên trang như thế nào. Viết code gọn gàng, mạch lạc, dễ đọc dễ hiểu là nguyên tắc hàng đầu mà tất cả các designer ngày càng muốn hoàn thiện mình.

Định nghĩa của thẻ Div

Thẻ div là một dạng Block-level Element nó giúp định dạng một phần của trang web. Cho nên người ta hay sử dụng thẻ div để định dạng cấu trúc cho trang web. Div đơn thuần chỉ là một thành phần trống, không nội dung, không ý nghĩa nếu nó không được khai báo trong CSS. Chính vì thế Div được sử dụng để định dạng một thành phần mà các thành phần Block Element khác không phù hợp. Khi những người mới học về định dạng trang web bằng Div họ có xu hướng sử dụng div nhiều hơn mức cần thiết và tôi gọi vui là “chủ nghĩa duy div”

Sử dụng ban đầu khó hơn Table

Khi mới làm quen với div, bạn nhận thấy nó khó sử dụng hơn Table rất nhiều. Bởi vì Table nó trực quan hơn và đặc biệt là khi bạn sử dụng những chương trình WYSIWYG thì thiết kế trang web giống như tạo bẳng trong Excel vậy. Nhưng để sử dụng được div theo ý muốn thì bạn phải có kinh nghiệm với CSS, phải biết và hiểu được sự giống và khác nhau giữa Block element và Inline Element, khi nào thì sử dụng float và khi nào thì sử dụng Absolute Position và làm cho giao diện tương thích với mọi trình duyệt.

Đặc biệt là khi bạn chưa hiểu sâu về CSS, khi làm giao diện với div bạn sẽ thấy các thành phần chạy không theo ý muốn và dễ dàng cảm thấy nản và bỏ cuộc. Nhất là khi bạn phải sử dụng div để tạo một giao diện phức tạp với nhiều thành phần khác nhau. Nhưng bạn cứ kiên trì làm giao diện từ nhỏ đến lớn, từ đơn giản đến phưc tạp. Mỗi khi bạn làm thành công một giao diện là bạn đã hiểu thêm một chút về div.

Lỗi thường gặp khi sử dụng div

Một vấn đề nghiêm trọng nhất khi sử dụng div là sử dụng quá nhiều thẻ div không cần thiết. Div chỉ nên được sử dụng là một dàng hộp chứa nội dung khi mà các thành phần block element khác không thể làm được. Khi code HTML của bạn lồng nhiều thẻ div vào với nhau, đó là lúc bạn nên xem lại code của mình có vấn đề. Mỗi khi bạn định thêm một thẻ div, hãy nghĩ lại lần nữa xem mình có thực sự cần nó không.

Hình tượng hóa một chút cho bạn dễ hiểu. Giả sử khi bạn làm giao diện cũng giống như bạn gói gém đồ đạc để chuyển nhà. Bạn muốn cho tất cả đồ đạc của mình vào hộp để di chuyển. Nhưng bạn muốn phần loại nó ra cho dễ quản lý. Sách bào vào một hộp, băng đĩa vào một hộp, chăn ga gối đệm vào một hộp, máy tính game vào một hộp v.v.. Như thế thì rất hợp lý và không ai có thể nói được gì. Nhưng tưởng tượng khi bạn gói hộp có id= Sách Vở bạn sẽ không gói từng quyển sách vào một hộp nhỏ chứ?.

Điều mà mọi người thường làm là cho hết tất cả sách vở vào hộp có id=sach_vo chứ không ai lại gói từng cuốn sách vào một hộp riêng rồi lại cho hết các hộp nhỏ này vào một hộp lớn. Như thế nó vừa khó quản lý, tốn kém thời gian, bày bừa nhà cửa, hao tốn tài nguyên .v.v

Tương tự khi sử dụng div. Khi bạn tạo một div với id=’banner’ thì bạn sẽ cho hết những gì liên quan đến banner vào trong thẻ div này. Tất cả những thứ như logo, Slogan, Navigation v.v.. sẽ nằm trong div này và các thành phần này không cần phải có div bao quanh từng thành phần nhỏ nữa.

Một vài ví dụ về cách lạm dụng thẻ div

Sử dụng quá nhiều thẻ div không cần thiết

div tags

Thay vào đó nếu sử dụng đúng cách bạn chỉ cần viết

div tags

Sử dụng sai mục đích

This is a header
This is the second header
Lorem ipsum dolor sit amet

Đúng cách phải là

This is a header

This is the second header

Lorem ipsum dolor sit amet

Sử dụng div thay thế cho dạng list

div tags

Đúng cách phải là

div tags
Một số trường hợp thẻ div không cần thiết

DÙNG THẺ DIV BAO QUANH UL

div tags

Trong khi có thể bỏ thẻ div id=’navigation’ đi không cần thiết

div tags

DÙNG THẺ DIV BAO QUANH FORM

div tags

Trong khi bạn cũng có thể lược bỏ thẻ div vẫn có thể style trong CSS như thường

div tags
Nguyên tắc khi sử dụng div

Đây là nguyên tắc rất quan trọng cho nên tôi muốn nhắc lại lần nữa. Mỗi khi sử dụng div bạn hãy nhớ đến ví dụ chuyển đồ ở trên. Nếu bạn không gói từng đồ riêng biệt trong từng hộp thì bạn cũng đừng bao các thành phần khác nhau trong một thẻ div riêng biệt. Thứ hai, mỗi khi bạn phải sử dụng đến thẻ div thứ hai trong cùng một thành phần, hãy tự hỏi mình xem nó có thực sự cần thiết hay không.


Tin mới hơn:
Tin cũ hơn: