Sử dụng thẻ div đúng cách

Như các bạn đã biết Div là thẻ rất quan trọng trong thiết kế giao diện. Nó được sử dụng để thay thế hoàn toạn định dạng bảng trước đây. Tuy nhiên khi mới bắt đầu làm việc với CSS, chúng ta có xu hướng lạm dụng thẻ Div. Đôi khi vì muốn tạo được một thành phần nào đó mà bạn có thể sử dụng thẻ div nhiều hơn mức cần thiết. Trong bài này sẽ hướng dẫn bạn cách sử dụng thẻ div đúng cách và “tiết kiệm” nhất. 

Như các bạn thấy, Hình số 1 tôi sử dụng nhiều div và hình thứ 2 tôi chỉ sử dụng 1 thẻ div. Các bạn thấy sao, có giống nhau không?

Và đây là code hình số 1:
HTML:

<div id="wrapper">
<div id="top"> 
<h1>this is a box</h1> 
</div><!--End #top -->
<div id="middle"> 
<p>Này anh, em thích nước ngọt lắm đấy. Em thích cầm cả chai, đưa lên miệng tu mà chẳng cần rót ra ly, hình như uống như vậy ngon hơn, đậm hơn vì em biết anh hay uống như thế. Nếu ai đó tặng em cả thùng nước ngọt chắc em sẽ vui lắm nhưng em vẫn thích hơn nếu ai đó mang tặng "bụng" nước ngọt cho em. Em sẽ ngồi sau, nhí nhố nói cười và chọt vào cái bụng đó mỗi khi anh chọc quê làm em không biết phải nói sao...</p> </div><!--End #middle --> <div id="bottom"> <p>Sử dụng nhiều div</p>
</div><!--End #bottom -->
</div><!--End #wrapper -->

CSS:

*{margin: 0; padding: 0;}
#wrapper{ border: 1px solid black; width: 550px; margin: 30px auto; background: #ededed; } 
h1{ font-size: 20px; color: orange; } 
#top{ background: #dedede; padding:10px; } 
#middle{ margin:10px; } 
#bottom{ background: #dedede; padding:10px; }

Và đây là code hình số 2:
HTML:

<div id="container"> 
<h1>This is a box</h1>
<p>Này anh, em thích nước ngọt lắm đấy. Em thích cầm cả chai, đưa lên miệng tu mà chẳng cần rót ra ly, hình như uống như vậy ngon hơn, đậm hơn vì em biết anh hay uống như thế. Nếu ai đó tặng em cả thùng nước ngọt chắc em sẽ vui lắm nhưng em vẫn thích hơn nếu ai đó mang tặng "bụng" nước ngọt cho em. Em sẽ ngồi sau, nhí nhố nói cười và chọt vào cái bụng đó mỗi khi anh chọc quê làm em không biết phải nói sao...</p> 
<p class="bot">Sử dụng ít thẻ div</p> 
</div><!--End #container -->

CSS:

#container{ border: 1px solid black; width: 550px; margin: 30px auto; background: #ededed; } 
#container h1{ font-size: 20px; color: orange; background: #dedede; padding:10px; } 
#container P{ margin:10px; }
#container P.bot{ background: #dedede; padding:10px; margin: 0px; }

Các bạn thấy 2 đoạn code này thế nào?
- Như chúng ta đã thấy đoạn code thứ 2 ngắn gọn hơn, dễ quản lý hơn đúng không?
Nhân đây tôi cũng mong các bạn nhớ rằng trước khi mình thiết kế 1 cái box nào thì trước hết mình hãy xem nó có thật sự cần sử dụng div hay không? Tôi không nói rằng không được sử dụng thẻ div, nếu chỗ nào các bạn thấy thật sự cần thì các bạn vẫn sử dụng bình thường.
- Tôi chỉ nói vậy thôi, mong các bạn hiểu và có những đoạn code thật tối ưu và hiệu quả!