Thẻ div trong HTML: Định nghĩa và Tổng hợp cách sử dụng

Nội dung bài viết

Thẻ div trong HTML là một trong những thẻ được sử dụng nhiều nhất để nhóm các nội dung tương tự lại với nhau trên một trang web và hoạt động như một vùng chứa có thể định dạng bằng CSS. Bạn có thể dễ dàng sử dụng thẻ div với nhiều mục đích khác nhau và định dạng kiểu dáng cho chúng. Vậy cách sử dụng thẻ div trong HTML như thế nào?

Đọc bài viết bên dưới để được tìm hiểu rõ hơn về:

Định nghĩa và khi nào cần sử dụng thẻ div trong HTML
Cách sử dụng thẻ div trong định dạng HTML cơ bản
Thẻ Div và thẻ Span có sự khác nhau như thế nào

Định nghĩa thẻ div trong HTML

Trong HTML, thẻ <div> là vùng chứa cấp khối chung cho các phần tử khác và là một phần tử đặc biệt được sử dụng để phân chia một phần nội dung trong tài liệu HTML. Thẻ <div> thường dùng CSS để thiết lập các đặc tính như id và class.

Thẻ <div> thường được đặt trong phần nội dung <body> của tập tài liệu HTML.

<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;    
  text-align: center;
}
</style>
</head>
<body>

<h1>Ví dụ về thẻ div trong HTML</h1>

<div class="myDiv">
  <h2>Tìm hiểu định nghĩa, cách sử dụng và sự khác biệt của thẻ Div</h2>
  <p>Định nghĩa thẻ div là gì?</p>
</div>

<p>Cách sử dụng thẻ div như thế nào?</p>

</body>
</html>

Kết quả hiển thị của ví dụ trên:

Khi nào cần sử dụng thẻ div trong HTML?

Thẻ <div> thường được sử dụng để thực hiện một số việc khác nhau trên trang web, chủ yếu là trong thiết kế bố cục web và các kỹ thuật CSS.

Bố cục web: Sử dụng thẻ <div> để nhóm các nội dung tương tự lại với nhau để có thể tạo kiểu một cách dễ dàng. Bạn có thể tập hợp tiêu đề, điều hướng hay chân trang trong một thẻ <div> riêng lẻ để chúng có thể được định dạng giống nhau.
Tạo kiểu bằng CSS: Thẻ DIV không có định dạng mặc định nhưng bạn có thể sử dụng CSS để tạo nhiều kiểu dáng khác nhau theo ý muốn như màu sắc, kích thước, vị trí,…
Phù hợp với nhiều thiết bị: Thẻ DIV giúp tạo ra các trang web phù hợp với nhiều thiết bị khác nhau, từ máy tính để bàn đến điện thoại thông minh và máy tính bảng.

Chẳng hạn, để tạo một vòng tròn bằng thẻ <div>, bạn sẽ đặt chiều cao và chiều rộng bằng nhau trong CSS, sau đó đặt bán kính đường viền là 50%.

<div class="circle"></div>
<style>
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%;
    }

</style>

Kết quả hiển thị:

Tổng hợp một số ví dụ về cách sử dụng thẻ div trong HTML

Thẻ <div> với thuộc tính lang

Thẻ <div> thường được sử dụng để thêm kiểu dáng hoặc đánh dấu semantic (ngữ nghĩa) chung cho một nhóm các phần tử liên tiếp. Bạn có thể sử dụng <div> cùng thuộc tính xác định ngôn ngữ lang để thiết lập ngôn ngữ trong một phần của trang web.

Giả sử như ngôn ngữ mặc định của văn bản trên trang web là tiếng Việt nhưng một phần nhỏ lại bằng ngôn ngữ khác. Để đánh dấu phần này trên trang web, bạn chỉ cần đặt các phần tử bên trong thẻ <div>, sau đó thêm thuộc tính lang và cài đặt thành ngôn ngữ bạn muốn. Ví dụ như:

<article lang="vn">

<p>ITviec Blog - Trang thông tin phát triển sự nghiệp IT của bạn</p>

<div lang="en">
  <p>ITviec Blog - Information page to develop your IT career</p>
</div>

</article>

Điều này sẽ giúp bạn dễ dàng thiết lập ngôn ngữ cho một phần nội dung mà bạn mong muốn, những nội dung bên ngoài thẻ <div> vẫn sẽ theo ngôn ngữ mặc định.

Thẻ <div> với thuộc tính class

Để thay đổi định dạng của trang web, bạn sẽ sử dụng thêm thuộc tính id hoặc class và sử dụng bộ chọn tương ứng với CSS.

Giả sử bạn muốn tạo kiểu cho một tiêu đề và đoạn văn cụ thể trên trang, giữ nguyên phần còn lại. Bạn sẽ gói tiêu đề và đoạn riêng lẻ trong phần tử <div>, sau đó đặt thuộc tính class. Trong phần đầu của tài liệu HTML, bạn có thể định dạng cho phần nội dung bên trong thẻ <div>.

Trong phần ví dụ bên dưới sẽ sử dụng các định dạng như đường viền, màu sắc và căn chỉnh văn bản như sau:

<style>
.myDiv {
font-family: 'Arial';
font-weight: bold;
  border: 5px outset #00A4BD;   
  color: #2D3E50;
  background-color: #EAF0F6;
  text-align: center;
}
</style>

<div class="myDiv">
  <h2>ITviec Blog</h2>
  <p>Trang thông tin phát triển sự nghiệp IT của bạn</p>
</div>

Kết quả hiển thị:

Sử dụng thẻ <div> dưới dạng Flexbox

Để thay đổi vị trí hoặc bố cục của một phần trên trang web, bạn có thể sử dụng Flexbox bằng cách khai báo thuộc tính CSS cho class.flex-container. Sau đó, sử dụng tên class này cho thẻ <div> của bạn như ví dụ dưới đây.

Giả sử, bạn muốn tạo một lưới flexbox có bốn cột, bạn sẽ bắt đầu tạo bốn phần tử div và sau đó đặt tất cả vào một phần tử div khác. Sau đó, trong phần đầu của tài liệu, bạn sử dụng .flex-container để làm vùng chứa trở nên linh hoạt. Tiếp theo, bạn sẽ chỉ định chiều cao của vùng chứa cũng như màu nền. Cụ thể như sau:

<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #00A4BD;
}

.flex-container > div {
  background-color: #EAF0F6;
  width: 90px;
  margin: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 60px;
  flex: 1 1 200px;
}
</style>

<body>

<h1>ITviec Blog</h1>
<p>Hướng dẫn cách sử dụng .flex-container</p>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

</body>

Kết quả hiển thị:

Tạo khung bằng thẻ <div> trong HTML

Theo mặc định, thẻ <div> không có đường viền khi hiển thị trên trang web, nhưng bạn có thể thêm đường viền cho thẻ bằng cách sử dụng thuộc tính border trong CSS. Bằng cách sử dụng thuộc tính border, bạn có thể tạo đường viền xung quanh phần tử <div> để phân tách chúng với các nội dung khác trên trang.

Ở ví dụ đầu tiên, bạn có thể sử dụng thuộc tính border trong CSS để tạo đường viền xung quanh các phần tử HTML. Chẳng hạn như:

<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta http-equiv="X-UA-Compatible"
content="IE=edge"> 
<meta name="viewport"
content="width=device-width, 
initial-scale=1.0"> 
<style> 
.name { 
margin-top: 2rem; 
color: green; 
text-align: center; 
} 

.box { 
margin-left: 38rem; 
margin-right: 38rem; 
width: 300px; 
height: 200px; 
background-color: lightgray; 
padding: 1rem; 
box-sizing: border-box; 
border: 2px solid gray; 
} 

.inner { 
border: 2px solid red; 
height: 100%; 
box-sizing: border-box; 
padding: 1rem; 
text-align: center; 
color: green; 
} 

</style> 
<title>Document</title> 
</head> 

<body> 
<h1 class="name">ITviec Blog</h1> 
<div class="box"> 
<div class="inner"> 
<h2>ITviec Blog</h2> 
</div> 
</div> 
</body> 
</html>

Kết quả hiển thị:

Tạo hiệu ứng Shadow với thẻ <div>

Bạn cũng có thể dùng thẻ <div> để tạo hiệu ứng đổ bóng bằng cách sử dụng thuộc tính box-shadow trong CSS. Để hiểu rõ hơn, bạn có thể xem qua ví dụ sau:

<style>
.box-shadow {
      font-family: cursive, sans-serif;
      background-color: #2ecc71;
      color: white;
      padding: 10px;
      border-radius: 4px;
      box-shadow: 2px 2px 20px 23px #7fecad;
    }
</style>

<div class="box-shadow">
      <p>ITviec Blog - Tổng hợp cách sử dụng thẻ div trong HTML<br />Định nghĩa thẻ div trong HTML </p>
      <p>Thẻ div có khác biệt gì so với thẻ<br/>span
      </p>
</div>

Kết quả hiển thị:

Theo ví dụ trên, có thể thấy ở thuộc tính box-shadow trong CSS:

Giá trị đầu tiên (2px) biểu thị phần bù trừ trên trục x và cái thứ 2 (2px khác) biểu thị phần bù trừ trên trục y.
20px tiếp theo dành cho độ mờ, nghĩa là độ mờ mà bạn mong muốn.
Giá trị 23px là bán kính trải rộng, nghĩa là bạn muốn bóng trải rộng bao xa.
Giá trị cuối cùng là màu đổ bóng, theo ví dụ trên sẽ là mã màu #7fecad tức màu xanh lá nhạt.

Định dạng kiểu chữ với thẻ <div>

Bạn có thể sử dụng các thuộc tính của CSS như font-size, font-family, font-weight hay font-style trên nội dung được nhóm cùng với thẻ <div>. Chẳng hạn như:

<style>
body {
      max-width: 900px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      height: 100vh;
      background-color: #f1f1f1;
    }

.font-properties {
      font-family: cursive, sans-serif;
      font-size: 1.3rem;
      font-weight: bolder;
      font-style: italic;
    }

</style>

<div class="font-properties">
      <p>ITviec Blog - Tổng hợp cách sử dụng thẻ div trong HTML<br />Định nghĩa thẻ div trong HTML</p>
      <p>Thẻ div có khác biệt gì so với thẻ span</p>
</div>

Kết quả hiển thị:

Sự khác nhau giữa thẻ span và thẻ div trong HTML

Thẻ <span> không tạo ra ngắt dòng như thẻ <div> nhưng vẫn cho phép người dùng tách nội dung văn bản trên cùng một dòng. Trong khi thẻ <div> chứa toàn bộ chiều rộng thì thẻ <span> chỉ chứa phần chiều rộng được yêu cầu.

Một số điểm khác biệt giữa thẻ <div> và thẻ <span> như sau:

Thành phần	Thẻ <div>	Thẻ <span>
Loại phần tử	Block-level (nội tuyến)	Inline (cấp khối)
Khoảng trống Chiều rộng	Chứa toàn bộ chiều rộng	Chỉ lấy chiều rộng được yêu cầu
Ví dụ	Tiêu đề, văn bản hay đoạn văn	Thuộc tính, hình ảnh
Được sử dụng cho	Bố cục web	Văn bản
Thuộc tính	Không bắt buộc, có thể sử dụng với css	Không bắt buộc, có thể sử dụng với css

Chẳng hạn theo ví dụ sau, thẻ <div> sẽ chứa toàn bộ chiều rộng nhưng thẻ <span> chỉ chứa phần chiều rộng được yêu cầu.

<!DOCTYPE html>
<html>

<head>
    <title>gfg</title>
    <style type=text/css>
        p {
            background-color: gray;
            margin: 10px;
        }

        div {
            color: white;
            background-color: #000099;
            margin: 2px;
            font-size: 25px;
        }

        span {
            color: black;
            background-color: gray;
            margin: 5px;
            font-size: 25px;
        }

    </style>

</head>

<body>

    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>

    <span>span-tag</span>
    <span>span-tag</span>
    <span>span-tag</span>
    <span>span-tag</span>

</body>

</html>

Kết quả hiển thị:

Xem thêm: Lộ trình 18 bước học HTML và CSS chi tiết cho người mới bắt đầu

Các câu hỏi thường gặp về thẻ div trong HTML

Tại sao nên sử dụng thẻ <div> trong HTML?

Thẻ <div> sẽ giúp bạn nhóm các đoạn mã mà bạn muốn định dạng bằng CSS. Bạn có thể tạo kiểu cho nội dung đã chọn để khác biệt hơn so với các phần khác trên trang. Bên cạnh đó, bạn cũng có thể sử dụng <div> cùng với thuộc tính ngôn ngữ (lang) để có thể thay đổi ngôn ngữ của một phần cụ thể trên trang.

Làm thế nào để sử dụng nhiều thẻ <div> mà không bị nhầm lẫn?

Mặc dù thẻ <div> được sử dụng khá phổ biến, tuy nhiên bạn nên áp dụng các thuộc tính class và id để dễ dàng thao tác với <div> riêng lẻ với từng thuộc tính. Điều này sẽ giúp bạn dễ thực hiện và ít bị rối khi viết mã. Cụ thể qua ví dụ như sau:

Tạo phần header của trang web bao gồm thanh điều hướng và logo theo mẫu như sau:

<div class="header">
      <h2 class="logo">ITviec</h2>

      <ul class="nav">
        <li><a href="">ITviec Blog</a></li>
        <li><a href="">Trang chủ</a></li>
        <li><a href="">Chuyên môn IT</a></li>
      </ul>

</div>

Đầu tiên, trước khi tạo thanh điều hướng, bạn sẽ thực hiện một số kỹ thuật CSS để định dạng cũng như căn chỉnh các thành phần của trang web như sau:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

.hero,

.about,

.services,

.contact {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
}

Ở đoạn mã trên, có thể thấy:

Loại bỏ lề và phần đệm mặc định. Đồng thời, đặt tối đa chiều rộng cho các phần chính để chúng trải dài khắp nơi và đem lại trải nghiệm người dùng tốt hơn.
Đặt thuộc tính margin-bottom để tạo một khoảng trống phù hợp. Đồng thời, margin tự động bằng 0 để chúng tự động căn lề phù hợp.

Tiếp theo, để tạo thanh điều hướng, bạn sẽ sử dụng thẻ <div> với thuộc tính class, header và hiển thị chúng theo hình thức Flexbox để có được bố cục trang web phù hợp. Sau đó là định dạng các thành phần khác theo một kiểu dáng chung chung nhất như:

Lựa chọn background-color màu xám và chiều cao 200px.
Định vị các thẻ H1 bên trong bằng Flexbox và áp dụng chiều cao cho mỗi thẻ là 1,5px.
Tạo phần chân trang với màu nền xám đậm để trông khác biệt hơn, căn giữa nội dung với chiều cao dòng là 1,7.

<style>

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

.itviec,

.trangchu,

.chuyenmon {
  max-width: 1000px;
  margin: 0 auto;
  margin-bottom: 20px;
}

.header {
      padding: 0 70px;
      display: flex;
      align-content: center;
      justify-content: space-between;
      margin-top: 20px;
      margin-bottom: 20px;
    }

.nav {
      display: flex;
      align-content: center;
      justify-content: center;
      gap: 60px;
      list-style-type: none;
    }

.nav li a {
      text-decoration: none;
      color: black;
      font-size: 1.2rem;
    }

</style>

<div class="header">
      <h2 class="logo">ITviec Blog</h2>

      <ul class="nav">
        <li><a href="">Trang chủ</a></li>
        <li><a href="">Chuyên môn IT</a></li>
      </ul>
</div>

<div class="itviec">
      <h1>ITviec Blog</h1>
</div>

<div class="trangchu">
      <h1>Trang chủ</h1>
</div>

<div class="chuyenmon">
      <h1>Chuyên môn IT</h1>
</div>

<div class="footer">
      <p>&copy; 2024 All Rights Reserved</p>
</div>

<style>

.itviec {
      background-color: #eee;
      height: 200px;
    }

.itviec h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.trangchu {
      background-color: #eee;
      height: 200px;
    }

.trangchu h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.chuyenmon {
      background-color: #eee;
      height: 200px;
    }

.chuyenmon h1 {
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 6;
    }

.footer {
      background-color: #777;
      height: 40px;
    }

.footer p {
      margin: 0 auto;
      line-height: 1.7;
    }

</style>

Kết quả hiển thị:

Tổng kết về thẻ Div trong HTML

Thẻ div trong HTML là một trong những thành phần được sử dụng phổ biến với mục đích chính là nhóm các thành phần tương tự và tạo kiểu cho chúng bằng CSS. Điều này sẽ giúp <div> trở thành công cụ tùy chỉnh trang web hiệu quả.

Hy vọng qua bài viết trên, bạn sẽ “bỏ túi” thêm được cách sử dụng thẻ <div> trong thiết kế web tối ưu và hiệu quả. Nắm vững HTML và các thành phần HTML cơ bản sẽ giúp bạn đạt được nhiều cơ hội thăng tiến hơn trong lĩnh vực IT hiện nay.

Bạn có thể tham khảo loạt bài về hướng dẫn lập trình HTML vô cùng chi tiết trên ITviec:

Định nghĩa thẻ div trong HTML

Khi nào cần sử dụng thẻ div trong HTML?

Tổng hợp một số ví dụ về cách sử dụng thẻ div trong HTML

Thẻ <div> với thuộc tính lang

Thẻ <div> với thuộc tính class

Sử dụng thẻ <div> dưới dạng Flexbox

Tạo khung bằng thẻ <div> trong HTML

Tạo hiệu ứng Shadow với thẻ <div>

Định dạng kiểu chữ với thẻ <div>

Sự khác nhau giữa thẻ span và thẻ div trong HTML

Các câu hỏi thường gặp về thẻ div trong HTML

Tại sao nên sử dụng thẻ <div> trong HTML?

Làm thế nào để sử dụng nhiều thẻ <div> mà không bị nhầm lẫn?

Tổng kết về thẻ Div trong HTML

Chia sẻ bài viết