Tránh lạm dụng thẻ Div
- November 26, 2009
- 22 comments
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
Thay vào đó nếu sử dụng đúng cách bạn chỉ cần viết
Sử dụng sai mục đích
This is a headerThis is the second headerLorem 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
Đúng cách phải là
Một số trường hợp thẻ div không cần thiết
DÙNG THẺ DIV BAO QUANH UL
Trong khi có thể bỏ thẻ div id=’navigation’ đi không cần thiết
DÙNG THẺ DIV BAO QUANH FORM
Trong khi bạn cũng có thể lược bỏ thẻ div vẫn có thể style trong CSS như thường
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.
« Accordion Navigation jQuery & CSS
@thành: có thể IQ của bác “cao quá” nên bác mới thấy vậy. thân mến!
Bài viết loằng ngoằng và khó hiểu
cho em hỏi làm cách nào để inline cái này dc
Some text goes here
Some text goes here
Some text goes here
anh chỉ giáo cho em
thanks anh DW bài viết rất hay và bổ ích nhưng em vẫn có 1 số thắc mắc mong anh chỉ giáo ví dụ: mỗi 1 phần tử con trong phần header đều là 1 div và có 1 vị trí cố
định
anh có thể chỉ cho em cách làm đúng nhất để đặt từng thẻ div vào vị trí của nó cũng như thuộc tính position của từng div đc hok ạ
——————————————————————————————————————-
| | Menu | dang nhap |
| lo |_____________________________________| |
| go | | dang ky |
| | |________________|
| | Flash | gio | |
| | | hang |gio hang |
| | | 2 | 3 |
|____________|__________________________ __________|_______ |________|
‘
……………….
………
………
………
bài viết rất hay và bổ ích, thanks
Cho em hỏi ngoài lề 1 chút:
Em có 1 trang như sau:
1.
2.
3.
Thẻ body bao trùm 2 thẻ div con là “sidebar” và “rounded”. Div “rounded” là gồm 1 nội dung như bên này: http://hoangth.webdoanhnghiep.org/simple-ajax-website-jquery/demo.html. Khi nội dung từng pages ( trong rounded ) co giãn thì rounded có co giãn phù hợp nhưng div “body” lại hok co giãn. Làm cách nào cho div “body” cũng giãn theo
Cám ơn anh rất nhiều !
@Arch DeviL : Thấy bác nói thế chắc bác cũng là dân pro nhỉ, có gì chia sẻ cho a e với đi bác ^^
kiến thức về css của DW khá vững. Bài viết khá hay^^
Thanks a lot !
Bạn đang làm 1 việc hết sức ý nghĩa !
Hôm nay lang thang trên mạng tìm mấy câu trả lời cho mấy cái phần CSS mà em đang học thì tình cờ vào dc trang web này. Cảm ơn anh DW nhìu vì đã có những đoạn clip và bài viết rất hay và bổ ích.
Hy vọng anh sẽ tiếp tục cố gắng đê website ngày 1 phát triển và quan trọng hơn là những người cần tìm hiểu thêm như bọn em có 1 nơi thực sự để giải quyết những vấn đề trong học tập cũng như mở mang thêm kiến thức. Mà công nhân cách anh nói chuyện và diễn đạt các ván đề trong clip rất ấn tượng đó. hì
Cảm ơn anh DW nhìu!
Giờ thì em đã hiểu tại sao anh lại thích cái gọi là “thủ công” mà không dùng Dreamweaver rồi
Chỉ có một chữ hay
hay
tôi cứ thắc mắc về cái div này
giờ thì tôi đã hiểu
nhiều lúc tôi cũng không hiểu lắm về div và table khác nhau chổ nào
giờ thì thật sự đã hiểu
thanks warlock
Cảm ơn bạn bài viết rất hay. mình cũng công nhận là hay bị những lỗi này. Nhưng góp ý 1 chút về cách giải quyết ví dụ 1 cho trường hợp logo bên trái và slogan bên phải cùng 1 dòng thì không được có thể như vầy:
slogan 1slogan 2
cám ơn DW, nhưng câu 3 thì không phải vì mình cũng nói ý này nhưng anh ta nói đó là mặt nhình của code thôi, còn phần show thì nó có ý nghĩa gì đó
Mình mới đi phỏng vấn ở 1 công ty ở TP HCM và được hỏi những câu hỏi trên.
anh này cũng khả dễ tính nên khi mình khong trả lời được thì anh ấy cũng giải thích.
Do qua Run khi phỏng vấn nên mình chỉ nhớ được có câu 2: tại vì khi mình dùng div cho 1 bảng vi dụ 1 tram dòng, trăm cột thì div nó sẽ load từ từ và mình cảm thấy nanh (Khi kéo thanh trượt) còn table thì nó phải load lên 1 trăm dòng và trăng code đó rồi thì mới show cho nên rất chậm.
còn câu 1 và câu 3 thì không nhớ được vì Run quá
Nói đơn giản là Table chỉ nên được sử dụng khi cần biểu đạt dữ liệu dạng như Excel. Còn nếu bạn sử dụng table để thiết kế giao diện thì:
1. Code rất phức tạp và khó hiểu. Phải đọc hàng giờ mới hiểu được code.
2. Không có lợi cho SEO.
3. Load chậm hơn vì nhiều code hơn.
4. Quản lý khó hơn vì code quá rắc rối.
5. Giảm tính linh động của trang web nếu bạn phải sử dụng nhiều dạng Multi Media.
6. Giới hạn nhiều chức năng khác của trang web.
7. Sử dụng lẫn lộn thành phần trình bày và thành phần nội dung.
8. Trang web khó hiển thị ở các thiết bị di động như PDA và phone.
… còn nhiều lý do mà ta không nên sử dụng table lắm bạn ạ. Kể ra không hết!
Điều duy nhất mà table có lợi hơn div về mặt thiết kế giao diện là nó dễ sử dụng hơn lúc ban đầu vì nó trực quan hơn. Còn về mặt thực tiễn và sử dụng thì table không thể sử dụng để thiết kế giao diện.
Có một vài câu hỏi thế này, ai biết giải thích hộ:
1. Tại sao ta lại dùng div mà không dùng table ?
2. Dùng div ta có lợi gì so với dùng table (Trong khi viết, trong khi load file )
3. Table có lợi gì không so với dùng div.
thank các bạn
1.khi ta dug table load database se lau hon
2
Ngắn gọn một câu là “Hay”.
hihi mình cũng bị lỗi dùng nhiều div lúc mới học css,dùng table thì dễ hơn,nhưng khi dùng css rồi lại thấy thích(mặc dù mệt hơn)…thanks warclock,vì các bài tut giá trị nhé.