Với những lập trình viên, chắc hẳn đã quá quen với thẻ div trong html. Thẻ div cho phép tập hợp những nội dung tương tự với nhau ở trên một website. Vậy cụ thể div là gì và có nhiệm vụ thế nào? Hãy cùng tìm hiểu nhé qua bài viết dưới đây nhé.
Thẻ div là gì?
Div (viết tắt của từ "division") là một thẻ được dùng để nhóm các phần tử HTML lại với nhau. Mỗi một thẻ của HTML sẽ được sử dụng với một mục đích khác nhau. Chẳng hạn như thẻ <p> (viết tắt của từ "paragraph") được dùng để xác định một đoạn văn bản nhất định; hoặc thẻ <br> là thẻ dùng để ngắt đoạn văn bản trong HTML.
Vậy thẻ <div> được sử dụng để đánh dấu một khối (block) gồm nhiều thẻ có nội dung tương tự nhau trong khối. Bạn cũng có thể sử dụng thẻ div như một vùng chứa chung để liên kết các nội dung tương tự nhau. Thẻ <div> giúp các tài liệu trong HTML được chia thành nhiều phần riêng biệt.
Cú pháp của thẻ div như sau:
<div> .... Nội dung bên trong </div>
Ý nghĩa và tác dụng của thẻ div trong HTML là gì?
Thẻ div trong HTML được sử dụng để tạo ra khu vực kiểu block ở trên một website; hoặc dùng để tập hợp các phần tử trên website vào chung một khu vực với thẻ <div>. Những khu vực đó gồm:
- Header: là nhóm các nội dung ở đầu trang web
- Global navigation: là liên kết giữa các trang trong một website
- Page body: là thân nội dung trong website
- Content: bao gồm nội dung chữ và hình ảnh của bài viết
- Sidebar: là nội dung phụ chạy dọc ở hai bên bên trang web
- Footer: là nhóm các nội dung ở phía cuối website
Ngoài ra, thẻ div còn được sử dụng để phân loại các nhóm cấu trúc hoặc các khu vực lớn mà bên trong chứa nhiều thẻ. Việc nhóm các cấu trúc bằng thẻ <div> sẽ giúp quy trình định dạng, điều khiển,... nguyên cụm đơn giản hơn nhiều. Và người dùng chỉ cần thêm hoặc xóa bớt các đặc tính bằng một dòng có gắn thẻ div. Vậy thì khối nội dung đó cũng sẽ thay đổi theo như yêu cầu.
Cùng xem thử ví dụ sau đây để hiểu rõ hơn ý nghĩa của thẻ div trong HTML nhé:
<div style="front-size:12px; color:red"> <ul> <li>Khái niệm thẻ DIV trong HTML</li> <li>Cách dùng thẻ DIV</li> <li>Phân biệt DIV và SPAN</li> </ul> </div>
Kết quả của đoạn code trên sẽ hiển thị như sau:
- Khái niệm thẻ DIV trong HTML
- Cách dùng thẻ DIV
- Phân biệt DIV và SPAN
Ở ví dụ trên, cả cụm text gồm 3 dòng được nhóm lại với nhau và có cùng định dạng cỡ chữ size 12 và màu chữ là đỏ. Và nếu bạn muốn thay đổi cả cụm 3 dòng này thành màu xanh dương hoặc bất kỳ màu nào khác, thì chỉ cần thay giá trị "red" ở trong câu lệnh bằng "blue" hoặc màu mà bạn muốn.
Cách tạo kiểu và khối giao diện với thẻ div trong HTML
Thay đổi background cho thẻ div
Để thay đổi background, bạn có thể sử dụng thuộc tính background trong CSS.
<!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>
Kinh doanh không thể thiếu website! VPS giá rẻ cấu hình mạnh, hiệu năng cao tại Gofiber là một trong những giải pháp hữu hiệu nhất hiện nay dành cho website của bạn.
Tạo đường viền cho thẻ div
Để tạo đường viền thì bạn cần sử dụng thuộc tính border:
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 những ví dụ trên thì sẽ thấy phần nội dung bên trong thẻ div được đặt sát đường viền. Và bạn có thể dùng thuộc tính padding trong CSS để tạo ra khoảng trống giữa nội dung bên trong thẻ div và đường viền.
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
Tính năng float trong CSS sẽ cho phép 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.
Ví dụ về canh trái
div { background: yellow; height: 300px; width: 400px; border: solid 1px red; padding: 30px; float: left; }
Ví dụ về 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
Nếu bạn muốn thẻ div được canh giữa so với hai bên lề thì có thể sử dụng tính năng margin.
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ì thẻ div sẽ được tự động canh giữa.
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ể sử dụng, nhưng khi code HTML không nên dùng thẻ div cho nhóm inline. Bởi vì sẽ khiến quy trình trình duyệt khó hơn, không phân biệt đâu là nội dung lớn và đâu và nội dung nhỏ.
Thẻ span và thẻ div khác nhau như thế nào?
Không chỉ có div, mà thẻ span cũng được sử dụng để nhóm các phần tử trong HTML. Chính vì vậy, người dùng thường bị nhầm lẫn giữa 2 loại thẻ này. Vậy điểm khác nhau giữa thẻ span và thẻ div là gì?
Thẻ div có tác dụng nhóm các phần tử thành một khối (block). Tức là thẻ div dùng với các khối có nhiều nhóm nội dung. Còn thẻ span có khả năng nhóm các phân tử một dòng (inline), nhóm các hình ảnh và văn bản thành một nhóm nhỏ. Tức là thẻ span được sử dụng cho một nhóm các nội dung đơn lẻ.
Vậy là bạn viết này đã giới thiệu cho bạn định nghĩa về thẻ div và những lưu ý trong quá trình sử dụng để nhóm các loại nội dung. Trong quy trình code HTML, bạn nên hiểu rõ những thẻ không dùng chung với thẻ div là gì để tránh và giúp quá trình tải trang web mượt mà, tối ưu hơn. Và hiện tại, chỉ các một số trình duyệt như Chrome, Firefox, Opera mới hỗ trợ cho thẻ div.
Việc thiết kế một trang web bán hàng mang lại nhiều lợi ích cho trải nghiệm mua hàng của khách hàng. Một trang web tốt sẽ cung cấp thông tin chi tiết về sản phẩm, hình ảnh hấp dẫn, chức năng tìm kiếm sản phẩm, giỏ hàng và quy trình thanh toán đơn giản, thuận tiện và an toàn. Tìm hiểu về dịch vụ thiết kế website chuyên nghiệp của Gofiber.
