Thẻ div trong HTML là một thẻ container (hộp chứa) dùng để tạo các nhóm các thành phần khác nhau trong một trang web. Nó có thể chứa các thành phần HTML khác nhau, chẳng hạn như các thẻ p, img, table, và các thẻ div khác. Nó không có tác dụng trình bày mặc định, nhưng có thể được sử dụng với các tài liệu CSS để tạo ra các hiệu ứng trình bày khác nhau.
Các bài viết liên quan
Các thuộc tính của div trong html
Các thuộc tính của thẻ div trong HTML bao gồm:
- class: cho phép bạn đặt một hoặc nhiều class cho thẻ div, để sử dụng với tài liệu CSS để tạo ra các hiệu ứng trình bày khác nhau.
- id: cho phép bạn đặt một id duy nhất cho thẻ div, để sử dụng với tài liệu CSS để tạo ra các hiệu ứng trình bày khác nhau hoặc javascript.
- style: cho phép bạn thiết lập các kiểu cho thẻ div trực tiếp trong thẻ.
- align: cho phép bạn canh lề nội dung của thẻ div.
- title: cho phép bạn thêm một chú thích vào thẻ div.
- lang: cho phép bạn xác định ngôn ngữ của nội dung trong thẻ div.
- dir: cho phép bạn xác định hướng của nội dung trong thẻ div.
- tabindex: cho phép bạn xác định vị trí của thẻ div trong lịch sử điều hướng của trình duyệt.
- draggable: cho phép bạn kéo và thả thẻ div.
Note: Các thuộc tính này không được hỗ trợ trên tất cả các trình duyệt.
Cách sử dụng thẻ div
Cách sử dụng thẻ div trong HTML là:
- Tạo một thẻ div bằng cách sử dụng cú pháp <div> và </div>
- Nhúng các thành phần HTML khác nhau giữa hai thẻ div, ví dụ như các thẻ p, img, table, và các thẻ div khác.
- Sử dụng các thuộc tính của div để đặt class, id, style, align, title, lang, dir, tabindex, draggable và các thuộc tính khác để tùy chỉnh trình bày và hành vi của thẻ div.
- Sử dụng tài liệu CSS để tùy chỉnh trình bày của thẻ div.
Ví dụ:
<div class="container">
<p>Nội dung trong hộp chứa</p>
<img src="image.jpg" alt="image">
<div class="inner-container">
<p>Nội dung trong hộp chứa con</p>
</div>
</div>Trong ví dụ trên, thẻ div được sử dụng để tạo một hộp chứa chung cho các thành phần khác nhau, bao gồm một thẻ p, một thẻ img và một thẻ div khác. Class “container” và “inner-container” được sử dụng để tùy chỉnh trình bày với tài liệu CSS.
Một vài ví dụ thẻ div trong html
Ví dụ 1: Tạo một hộp chứa chung cho một trang web
<div id="wrapper">
<header>
<h1>Trang web của tôi</h1>
<nav>
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
</header>
<section>
<h2>Giới thiệu về trang web</h2>
<p>Trang web này được tạo ra để chia sẻ thông tin về chủ đề xxxxx.</p>
</section>
<aside>
<h3>Tin tức liên quan</h3>
<ul>
<li>Tin tức 1</li>
<li>Tin tức 2</li>
<li>Tin tức 3</li>
</ul>
</aside>
<footer>
<p>Copyright © 2022 Trang web của tôi</p>
</footer>
</div>Ví dụ 2: Tạo các hộp chứa riêng biệt cho nội dung trong một trang
<div class="container">
<div class="box left">
<h3>Tiêu đề hộp chứa trái</h3>
<p>Nội dung hộp chứa trái</p>
</div>
<div class="box right">
<h3>Tiêu đề hộp chứa phải</h3>
<p>Nội dung hộp chứa phải</p>
</div>
</div>Ví dụ 3: Tạo một hộp chứa cho một hình ảnh
<div class="image-container">
<img src="image.jpg" alt="image">
<p>Chú thích hình ảnh</p>
</div>Trong các ví dụ trên, các thẻ div được sử dụng để tạo các hộp chứa cho nội dung trong trang web. Trong ví dụ 1, một thẻ div với id “wrapper” được sử dụng để tạo một hộp chứa chung cho toàn bộ trang web. Trong ví dụ 2, các thẻ div với class “container”, “box left” và “box right” được sử dụng để tạo các hộp chứa riêng biệt cho nội dung. Trong ví dụ 3, một thẻ div với class “image-container” được sử dụng để tạo một hộp chứa cho một hình ảnh. Các thẻ div có thể được sử dụng với các tài liệu CSS để tạo ra các hiệu ứng trình bày khác nhau.
