Thẻ div cho phép bạn nhóm các tập hợp nội dung tương tự lại với nhau trên một trang web. Bạn cũng có thể sử dụng nó như một vùng chứa chung để liên kết các nội dung tương tự.
Trong bài viết này, Vietnix sẽ giải thích rõ cho bạn thẻ div là gì? Chỉ rõ cho bạn những thứ khác nhau mà bạn có thể làm với thẻ div, cách tạo khối cho nó. Đặc biệt là bạn sẽ biết được những trình duyệt nào hỗ trợ cho thẻ div. Hãy cùng Vietnix tìm hiểu nhé!
Thẻ div là gì?
Div (viết tắt của từ “division”) là thẻ được dùng để nhóm nhiều phần tử HTML lại với nhau. Mỗi một thẻ trong HTML đều có mục đích sử dụng khác nhau. Ví dụ như thẻ <p> (viết tắt của từ “paragraph”) được dùng để chỉ một đoạn văn bản nhất định; hoặc là thẻ <br> dùng để ngắt đoạn văn bản trong HTML. Thẻ <div> là thẻ dùng để đánh dấu một khối (block) gồm nhiều thẻ khác trong khối. Thẻ <div> giúp cho các tài liệu trong HTML được chia thành các phần riêng biệt.
Cú pháp thẻ div như sau:
<div> ... Nội dung bên trong </div>Hoặc bạn cũng có thể tạo nhiều thẻ div lồng nhau như sau:
<div> <div> <div> ... Nội dung bên trong </div> </div> </div>
Ý nghĩa và tác dụng của thẻ div trong HTML là gì?
Thẻ div trong HTML được dùng để tạo ra một khu vực kiểu block nào đó trên một website; hoặc dùng để gom nhóm và tập hợp các phần tử trên website vào một khu vực với thẻ <div>. Các khu vực đó bao gồm: header là nhóm nội dung ở đầu trang web, global navigation là liên kết giữa các trang trong website, page body là thân nội dung của trang, content là gồm text và hình ảnh của bài, sidebar là nội dung phụ chạy dọc hai bên trái phải trang web, footer sẽ là nhóm nội dung ở cuối trang web.
Ngoài ra, thẻ div còn được dùng để phân nhóm một số cấu trúc hoặc các khu vực lớn bên trong chứa nhiều thẻ. Việc nhóm các cấu trúc lại bằng thẻ <div> sẽ giúp cho quá trình định dạng, điều khiển,… nguyên cụm dễ dàng hơn nhiều. Người dùng chỉ cần thêm hoặc bớt đặc tính bằng một dòng có gắn thẻ div thì khối nội dung đó sẽ thay đổi theo như yêu cầu.
Cùng xem ví dụ mẫu dưới đây để hiểu rõ hơn tác dụng của thẻ div là gì trong HTML nhé:
<div style="front-size:12px; color:red"> <p> dinh nghia cua the div la gi </p> <p> tac dung cua the div trong HTML la gi </p> <p> phan biet su giong va khac nhau giua the span va the div </p> </div>Kết quả của đoạn code trên sẽ hiển thị như sau:
dinh nghia cua the div la gi
tac dung cua the div trong HTML la gi
phan biet su giong va khac nhau giua the span va the div
Trong ví dụ trên, nguyên cụm text gồm 3 dòng được nhóm lại với nhau. Chúng có chung định dạng cỡ chữ size 12 và màu chữ là đỏ. Nếu bạn muốn thay cả cụm 3 dòng này thành màu xanh dương hay bất kì màu nào khác, chỉ cần thay giá trị “red” trong câu lệnh bằng “blue” hoặc màu mà bạn muốn là được.
Cách tạo kiểu và khối giao diện với thẻ div trong HTML
Để có thể sử dụng một cách thành thạo thì bạn phải biết cách kết hợp với các thuộc tính CSS; để có thể tùy chỉnh phần hiển thị mặc định của thẻ div trong HTML. Vậy cách tạo kiểu và khối giao diện với thẻ div trong HTML là gì?
Thay đổi background cho thẻ div như thế nào?
Sử dụng thuộc tính background trong CSS để thay đổi background.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: yellow; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Thiết lập chiều cao và chiều rộng cho thẻ div như thế nào?
Để thay đổi được chiều cao và chiều rộng của thẻ div, bạn cần sử dụng thuộc tính height và width.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> div{ background: yellow; height: 300px; width: 400px; } </style> </head> <body> <div> CHÀO MỪNG BẠN ĐẾN VỚI THẺ DIV </div> </body> </html>Cách tạo kiểu văn bản bằng thẻ Div là gì?
Bạn có thể áp dụng các thuộc tính text-transform và text-decoration CSS trên thẻ div như sau:
<div class="text-properties"> <p>Div (viết tắt của từ “division”) là thẻ được dùng để nhóm nhiều phần tử HTML lại với nhau. Mỗi một thẻ trong HTML đều có mục đích sử dụng khác nhau.
</p> <p>Thẻ <div> là thẻ dùng để đánh dấu một khối (block) gồm nhiều thẻ khác trong khối. Thẻ <div> giúp các tài liệu HTML được chia thành các phần (khối) riêng biệt.
</p> </div>Tạo đường viền cho thẻ div như thế nào?
Để tạo đường viền thì bạn cần sử dụng thuộc tính border CSS nhé.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red }Thay đổi khoảng trống giữa nội dung và đường viền bằng thẻ div
Khi bạn chạy các ví dụ trên thì sẽ thấy nội dung bên trong thẻ div đặt sát đường viền. Bây giờ bạn có thể sử dụng thuộc tính padding trong CSS để tạo ra khoảng không giữa nội dung bên trong thẻ div với đường viền nhé!
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; }Đưa về bên trái hoặc bên phải với float như thế nào?
Thuộc tính float trong CSS sẽ giúp cho bạn canh trái hoặc canh phải cho thẻ div đó.
- float:left là canh trái.
- float:right là canh phải.
Canh trái
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:left }Canh phải
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float:right }Cách thiết lập canh giữa màn hình cho thẻ div là gì?
Nếu bạn muốn thẻ div hiển thị canh giữa so với hai bên lề thì hãy sử dụng thuộc tính margin để thực hiện nhé.
div{ background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; margin: 0px auto; }Trong đó:
- 0px: khoảng cách ở phía trên và phía dưới.
- Auto: khoảng cách tự động giữa bên trái và bên phải.
Nếu bạn đặt auto thì nó sẽ tự động canh giữa. Bạn có thể chạy ví dụ để xem kết quả như thế nào nhé.
Cách tạo hình vuông với thẻ div là gì?
Để tạo một hình vuông bằng thẻ div. Bạn thực hiện cú pháp như sau:
<div class="square"></div> body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; background-color: #f1f1f1; } .square { background-color: #2ecc71; width: 200px; height: 200px; }Tạo một vòng tròn với thẻ div
Để tạo hình tròn với thẻ <div> bạn có thể thực hiện cú pháp sau:
<div class="circle"></div> body { display: flex; align-items: center; justify-content: center; margin: 0 auto; height: 100vh; background-color: #f1f1f1; } .circle { background-color: #2ecc71; width: 200px; height: 200px; border-radius: 50%; }
Có những thẻ nào không được dùng bên trong thẻ div?
Những thể không được dùng bên trong thẻ div bao gồm: <HTML></HTML>, <meta></meta>, <body></body>, <title></title>, <link></link>.
Bên cạnh đó, tuy bạn có thể dùng, nhưng khi code HTML ra không nên dùng thẻ div cho nhóm inline. Bởi lẽ, việc sử dụng thẻ div cho những nhóm nội dung inline sẽ gây ra khó khăn cho trình duyệt; không phân biệt được đâu là nội dung lớn còn đâu là nội dung nhỏ.
Thẻ span và thẻ div khác nhau như thế nào?
Thẻ span và thẻ div đều có chung tác dụng là để nhóm các phần tử trong HTML. Do đó người dùng thường bị nhầm lẫn hai thẻ này. Vậy sự khác biệt giữa 2 thẻ span và div là gì? Cùng tìm hiểu với Vietnix nhé!
| Thẻ div | Thẻ span |
|---|---|
| Giúp gom các phần tử theo khối (block), nhóm các phần tử thành một khối.Tức là thẻ div dùng với các khối (gồm nhiều nhóm nội dung). | Giúp gom các phần tử một dòng (inline), nhóm các hình ảnh, văn bản thành một nhóm nhỏ. Tức là thẻ span dùng cho một nhóm nội dung đơn lẻ. |
Các trình duyệt hỗ trợ thẻ div
Những trình duyệt nào sẽ hỗ trợ cho thẻ div? Cùng Vietnix tìm hiểu thông qua bảng dưới đây nhé!
 Chrome |  IE |  Firefox |  Opera |  Safari |
Có thể thấy rằng các trình duyệt như: Chrome, IE, Firefox, Opera, Safari đều là những trình duyệt có hỗ trợ cho thẻ div.
>> Xem thêm: 5 bước tạo menu ngang trong HTML và CSS đơn giản
Lời kết
Trên đây là định nghĩa về thẻ div là gì, công dụng và cách tạo khối giao diện với thẻ <div> mà Vietnix muốn gửi đến bạn. Lưu ý trong quá trình code HTML, bạn cần phải nắm được những thẻ không dùng chung với thẻ div là gì để tránh những trục trặc, cũng như giúp cho quá trình tải trang web được tối ưu hơn nhé! Và chỉ có các trình duyệt như Chrome, IE, Firefox, Opera, Safari mới hỗ trợ cho thẻ div. Cảm ơn bạn đã theo dõi bài viết nhé!
thẻ div có ảnh hưởng nhiều đến trong seo không, tôi cảm nhận thấy khi ko dùng div thì bị tụt hạng từ khoá, điều đó có đúng không?
Hi bạn, không ảnh hưởng gì đâu bạn, bạn sử dụng thẻ
bình thường nhé!