Tránh lạm dụng thẻ Div trong thiết kế website

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?.

Tránh lạm dụng thẻ Div trong thiết kế website

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àycó 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ế 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.