Phát triển Web
2012
88
www.izwebz.com Demon Warlock
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
