Mỗi thẻ (hay phần tử) trong HTML đều có chức năng và nhiệm vụ riêng. Trong đó, thẻ div được lập trình viên sử dụng khá phổ biến. Vậy cụ thể, thẻ div là gì và nó có tác dụng như thế nào trong HTML?
- Tìm hiểu thêm: Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style
1. Định nghĩa thẻ div là gì?
Thẻ div (division) được sử dụng để nhóm các phần tử HTML lại với nhau. Mỗi thẻ trong HTML có mục đích khác nhau. Ví dụ, thẻ <p> (paragraph) được sử dụng để chỉ định một đoạn văn bản, và thẻ <br> được sử dụng để ngắt đoạn văn bản trong HTML. Thẻ <div> đánh dấu một khối (block) bao gồm nhiều thẻ khác trong đó. Như tên gọi, thẻ <div> giúp tài liệu HTML được chia thành các phần riêng biệt.
Bạn đang xem: Div là gì? Cách dùng thẻ div trong HTML từ A đến Z
- Đọc thêm: Các thẻ HTML cơ bản được sử dụng trong thiết kế website
2. Tác dụng của thẻ div trong HTML
Thẻ div được sử dụng để nhóm các phần tử lại với nhau trong các khu vực của trang web. Các khu vực này bao gồm: header (nhóm nội dung ở đầu trang web), global navigation (liên kết giữa các trang trong website), page body (thân nội dung của trang), content (bao gồm text và hình ảnh của bài), sidebar (nội dung phụ chạy dọc hai bên trái phải trang web), footer (nhóm nội dung ở cuối trang web).
Ngoài ra, một số cấu trúc hoặc nhóm lớn bên trong chứa nhiều thẻ cũng nên sử dụng thẻ div để phân nhóm. Việc nhóm các cấu trúc lại bằng thẻ <div></div> sẽ giúp cho việc định dạng, điều khiển… dễ dàng hơn rất nhiều. Người dùng chỉ cần thêm hoặc giảm đặc tính bằng một dòng chứa thẻ div để thay đổi khối nội dung theo yêu cầu.
Hãy xem ví dụ dưới đây để hiểu rõ hơn về tác dụng của thẻ div trong HTML
Xem thêm : [Miễn Phí] Kếm tiền Online | app fancyme là gì – Xác minh – sentayho.com.vn
Kết quả của đoạn mã trên sẽ như sau
định nghĩa thẻ div là gì
tác dụng của thẻ div trong HTML
phân biệt sự khác nhau giữa thẻ span và thẻ div
Trong ví dụ trên, các dòng văn bản được nhóm lại thành một khối. Chúng có cùng định dạng kích cỡ chữ là 20 và màu chữ là đỏ. Nếu muốn thay toàn bộ khối này thành màu xanh dương, chỉ cần thay giá trị “red” trong mã bằng “blue” là được.
3. Phân biệt sự khác nhau giữa thẻ span và thẻ div
Xem thêm : Mục lục
Thẻ span và thẻ div có tác dụng nhóm các phần tử trong HTML, nên chúng thường bị nhầm lẫn trong sử dụng. Vậy cụ thể, sự khác biệt giữa hai thẻ span và div là gì?
Cụ thể, thẻ div nhóm các phần tử theo khối (block), tạo thành một khối. Trong khi đó, thẻ span nhóm các phần tử thành một hàng (inline), tạo thành nhóm nhỏ chứa hình ảnh, văn bản. Một cách đơn giản, thẻ span được sử dụng cho một nhóm nội dung đơn lẻ, trong khi thẻ div được sử dụng cho nhóm các khối (bao gồm nhiều nhóm nội dung).
4. Các thẻ không được sử dụng trong thẻ div là gì
Các thẻ không được phép nằm trong thẻ div gồm: <HTML></HTML>, <meta></meta>, <body></body>, <title></title>, <link></link>.
Bên cạnh đó, mặc dù có thể sử dụng, nhưng không nên sử dụng thẻ div cho nhóm nội dung inline.
Việc sử dụng thẻ div cho nhóm nội dung inline sẽ gây khó khăn trong việc phân biệt nội dung lớn và nội dung nhỏ. Nếu bạn sử dụng thẻ div cho các đoạn nội dung inline, đồng nghĩa với việc “dùng dao giết trâu mổ gà”.
Đó là định nghĩa về thẻ div và những lưu ý khi sử dụng thẻ div để nhóm nội dung. Trong quá trình lập trình HTML, hãy nhớ những thẻ không được sử dụng chung với thẻ div là gì để tối ưu quá trình tải trang web.
