×

Cách sử dụng thẻ <div> để tạo các khối nội dung trong HTML

Avatar of admin
admin 0 Views

Trong lập trình web, việc cấu trúc và tổ chức nội dung trang web là rất quan trọng để tạo ra trải nghiệm người dùng tốt và dễ quản lý mã nguồn. Một trong những công cụ phổ biến nhất để hoàn thành nhiệm vụ này là thẻ <div> trong HTML. Thẻ này cho phép các nhà phát triển tạo ra các khối nội dung riêng biệt và tổ chức trang web một cách có hệ thống.

Giới thiệu về thẻ <div>

Thẻ <div> là viết tắt của "division", có nghĩa là phần hoặc khối. Nó được sử dụng để tạo ra các khối không hiển thị gì đặc biệt trên trang web. Tuy nhiên, khi kết hợp với CSS (Cascading Style Sheets) và JavaScript, thẻ <div> trở nên hữu ích trong việc định dạng, bố trí và tạo hiệu ứng cho nội dung.

Cách sử dụng cơ bản thẻ <div>

Dưới đây là một ví dụ cơ bản về cách sử dụng thẻ <div>:

<div>
  Đây là một khối nội dung.
</div>

Trong đoạn mã trên, nội dung "Đây là một khối nội dung." nằm trong thẻ <div>. Thẻ này giúp bạn nhóm các phần tử HTML khác lại với nhau trong một khối duy nhất.

Tổ chức layout bằng thẻ <div>

Một trong những ứng dụng phổ biến nhất của thẻ <div> là tổ chức layout của trang web. Chẳng hạn, bạn có thể chia trang web thành các phần header, content, sidebar và footer như sau:

<div id="header">
  <h1>Đây là Header</h1>
</div>

<div id="content">
  <p>Đây là nội dung chính của trang web.</p>
</div>

<div id="sidebar">
  <p>Đây là Sidebar.</p>
</div>

<div id="footer">
  <p>Đây là Footer.</p>
</div>

Kết hợp với CSS

Một trong những điểm mạnh của thẻ <div> là khả năng kết hợp với CSS để tạo ra nhiều kiểu trang trí khác nhau. Bạn có thể sử dụng các thuộc tính CSS như background-color, padding, margin và border để thay đổi hình trạng và màu sắc của các khối nội dung.

<!DOCTYPE html>
<html>
<head>
  <style>
    #header {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 10px;
    }

    #content {
      width: 60%;
      float: left;
      padding: 20px;
    }

    #sidebar {
      width: 30%;
      float: right;
      padding: 20px;
    }

    #footer {
      background-color: #4CAF50;
      color: white;
      text-align: center;
      padding: 10px;
      clear: both;
    }
  </style>
</head>
<body>

<div id="header">
  <h1>Trang chủ</h1>
</div>

<div id="content">
  <p>Nội dung chính của trang web.</p>
</div>

<div id="sidebar">
  <p>Sidebar với các liên kết bổ sung.</p>
</div>

<div id="footer">
  <p>Footer thông tin</p>
</div>

</body>
</html>

Trong đoạn mã CSS ở trên, chúng ta đã sử dụng các thuộc tính để định dạng header, content, sidebar, và footer.

Kết hợp với JavaScript

Thẻ <div> cũng có thể được kết hợp với JavaScript để tạo ra các hiệu ứng tương tác, chẳng hạn như ẩn/hiện nội dung khi người dùng nhấp vào một nút.

<!DOCTYPE html>
<html>
<head>
  <style>
    #content {
      display: none; /* Ban đầu ẩn nội dung */
    }
  </style>
</head>
<body>

<button onclick="toggleContent()">Hiển thị / Ẩn nội dung</button>

<div id="content">
  <p>Nội dung ẩn/hiện khi nhấp nút.</p>
</div>

<script>
  function toggleContent(){
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
  }
</script>

</body>
</html>

Trong đoạn mã trên, một nút bấm được sử dụng để ẩn và hiện nội dung của thẻ <div> bằng JavaScript.

Kết luận

Thẻ <div> là một công cụ mạnh mẽ và linh hoạt trong HTML giúp các nhà phát triển web tổ chức và định dạng nội dung. Khi kết hợp với CSS và JavaScript, thẻ này còn trở nên hữu dụng hơn trong việc tạo ra các trang web đẹp mắt và tương tác. Qua các ví dụ trên, hy vọng bạn đã hiểu rõ hơn về cách sử dụng thẻ <div> trong việc cải thiện cấu trúc và trải nghiệm người dùng của trang web.

Comments

Bài viết liên quan