Trước đây, để thiết kế giao diện (layout) cho website người ta phải sử dụng bảng (table). Nhưng khi sử dụng table, code html chúng ta viết rất dài khiến website load chậm, và có thể xảy ra các đoạn mã thừa không cần thiết. Quan trọng, nếu sử dụng table thì các công cụ tìm kiếm như google rất khó đọc website của chúng ta. Chính vì những hạn chế đó mà khái niệm thẻ div đã ra đời, và thẻ div đã trở thành một công cụ không thể thiếu trong lập trình website hiện nay.
Thẻ div trong html là gì?
Hiểu đơn giản: thẻ <div> là khung hình chữ nhật có chiều rộng và chiều cao.
Về định nghĩa:
- Div viết tắt của cụm từ division.
- Là khối dữ liệu không có màu và trong suốt, có hình dạng giống như hình chữ nhật có chiều rộng chiều cao.
- Nếu thẻ <div> không kết hợp với css mà chỉ đứng 1 mình thì nó sẽ không có ý nghĩa hay tác dụng gì cả.
Thẻ div dùng để làm gì?
Chúng ta sẽ dùng thẻ div kết hợp với các thuộc tính css để xây dựng bố cục website.
Dưới đây là một trong những bố cục website đơn giản nhất.
Lợi ích khi sử dụng thẻ <div>
Div sẽ làm cho website load nhanh hơn do chúng ta sử dụng mã html ngắn gọn hơn, ít dư thừa hơn so với table.
Khả năng phát triển, thay đồi, sữa chữa website nhanh hơn. Chỉ cần chỉnh sửa CSS thì mọi đối tượng trên trang đều thay đổi.
Div dễ tương tác với các công cụ tìm kiếm và thuận tiện hơn cho việc làm SEO.
Cách viết thẻ <div>
Chúng ta sẽ bắt đầu tìm hiểu cách xây dựng bố cục như hình trên.
Đầu tiên, tạo file vidu.html và viết thẻ div có chữ banner như sau
Tiếp tục, tạo file style.css, viết cho thẻ div này độ rộng, độ cao bằng thuộc tính width và height.
Save lại và hiển thị đoạn code trên lên trình duyệt, các bạn chỉ thấy được chữ banner chứ không thấy được thẻ div đâu. Lý do là bởi vì thẻ div là khối dữ liệu không có màu sắc. Nếu muốn thấy được nó như thế nào thì các bạn phải thêm vào file css thuộc tính background.
Hiển thị lại một lần nữa, chắc các bạn đã nhận ra thẻ div có hình dáng như thế nào khi hiển thị lên website.
Xem hướng dẫn chi tiết trong video .
tham khảo Địa chỉ này
