Thẻ div trong html la gì

Mỗi thẻ [hay mỗi phần tử] trong HTML đều có chức năng và nhiệm vụ riêng. Trong đó, thẻ div là thẻ được các lập trình viên sử dụng tương đối thường xuyên. Vậy cụ thể thẻ div là gì và nó có nhiệm vụ thế nào trong HTML?

Tìm hiểu thêm: Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Mục lục

1. Định nghĩa thẻ div là gì?
2. Tác dụng của thẻ div trong HTML
3. Phân biệt sự khác nhau giữa thẻ span và thẻ div
4. Những thẻ không được dùng bên trong thẻ div là gì

1. Định nghĩa thẻ div là gì?

div – viết tắt của division – là thẻ được dùng để nhóm nhiều phần tử HTML lại với nhau. Mỗi thẻ trong HTML đều có mục đích khác nhau. Ví dụ như thẻ

[viết tắt của paragraph] được dùng để chỉ định một đoạn văn bản nhất định, hay thẻ
dùng để ngắt đoạn văn bản trong HTML. Thẻ

là thẻ đánh dấu một khối [block] gồm nhiều thẻ khác trong khối. Như tên gọi, thẻ

giúp các tài liệu HTML được chia thành các phần [khối] riêng biệt.

Đọc thêm: Các thẻ HTML cơ bản được sử dụng trong thiết kế website

Nguồn: educba

2. Tác dụng của thẻ div trong HTML

Thẻ div được dùng để nhóm các phần tử lại với nhau trong các khu vực của website. Các khu vực đó bao gồm: header [nhóm nội dung ở đầu trang web], global navigation [liên kết giữa các trang trong website], page body [thân nội dung của trang], content [gồm text và hình ảnh của bài], sidebar [nội dung phụ chạy dọc hai bên trái phải trang web], footer [nhóm nội dung ở cuối trang web].

Nguồn: educba

Ngoài ra, một số cấu trúc hoặc các khu vực lớn bên trong chứa nhiều thẻ cũng được khuyên dùng thẻ div để phân nhóm. Việc nhóm các cấu trúc lại bằng thẻ

sẽ giúp cho quá trình định dạng, điều khiển,… nguyên cụm dễ dàng hơn rất nhiều. Người dùng chỉ cần thêm hoặc bớt đặc tính bằng một dòng có gắn thẻ div là khối nội dung đó sẽ thay đổi như yêu cầu.

Bạn hãy cùng xem ví dụ mẫu dưới đây để hiểu rõ hơn tác dụng của thẻ div là gì trong HTML


 dinh nghia the div la gi 
 tac dung cua the div trong HTML 
 phan biet su khac nhau giua the span va the div

Kết quả của đoạn code trên như sau

dinh nghia the div la gi

tac dung cua the div trong HTML

phan biet su khac nhau giua the span va the div

Trong ví dụ trên, nguyên cụm text gồm 3 dòng được nhóm lại. Chúng có chung định dạng cỡ chữ size 20 và màu chữ là đỏ. Nếu bạn muốn thay cả cụm 3 dòng này thành màu xanh dương, chỉ cần thay giá trị “red” trong câu lệnh bằng “blue” là được.

3. Phân biệt sự khác nhau giữa thẻ span và thẻ div

Thẻ span và thẻ div có chung tác dụng là nhóm các phần tử trong HTML, vậy nên chúng thường bị nhầm lẫn khi sử dụng. Vậy cụ thể sự khác biệt giữa 2 thẻ span và div là gì?

Cụ thể, thẻ div gom các phần tử theo khối [block], nhóm các phần tử thành một khối. Trong khi đó, thẻ span gom các phần tử một dòng [inline], nhóm các hình ảnh, văn bản thành một nhóm nhỏ. Một cách dễ hiểu, thẻ span dùng cho một nhóm nội dung đơn lẻ, còn thẻ div dùng với các khối [gồm nhiều nhóm nội dung].

Nguồn: educba

4. Những thẻ không được dùng bên trong thẻ div là gì

Những thể không được chứa bên trong thẻ div bao gồm: , , , , .

Ngoài ra, tuy có thể dùng nhưng khi code HTML ra không nên dùng thẻ div cho nhóm inline.

Việc sử dụng thẻ div cho những nhóm nội dung inline sẽ gây khó khăn cho trình duyệt phân biệt được đâu là nội dung lớn còn đâu là nội dung nhỏ. Nôm na, nếu như bạn dùng thẻ div cho những đoạn inline thì cũng tương đương với việc “dùng dao giết trâu mổ gà”.

Trên đây là định nghĩa về thẻ div và những lưu ý trong quá trình sử dụng thẻ div để phân nhóm nội dung. Trong quá trình code HTML, bạn nên nắm được những thẻ không dùng chung với thẻ div là gì để tránh, giúp cho quá trình tải trang web được tối ưu.

Thẻ Thẻ HTML

hay thẻ div trong html được sử dụng để nhóm nhiều phần tử HTML lại với nhau..

Chúng ta biết rằng mỗi thẻ trong HTML đều có mục đích cụ thể chẳng hạn như thẻ p được sử dụng để chỉ định một đoạn văn bản, các thẻ

đến được sử dụng để chỉ định tiêu đề. Nhưng thẻ

chỉ như một khối chứa nhiều thẻ khác bên trong và phân chia tài liệu HTML thành các phần khác nhau. Vì thế thẻ div cũng được sử dụng để trình bày bố cục cho trang web.

Thẻ div thường được các nhà phát triển web sử dụng để nhóm các phần tử HTML với nhau và áp dụng các kiểu CSS cho nhiều phần tử cùng một lúc. Ví dụ: Nếu bạn gộp một tập hợp các phần tử đoạn văn vào một phần tử div để bạn có thể tận dụng các kiểu CSS và áp dụng kiểu chữ cho tất cả các đoạn văn cùng một lúc thay vì viết mã cho cùng một kiểu cho mỗi phần tử đoạn văn đó.

  
Đoạn văn thứ nhất.  
Đoạn văn thứ hai
Đoạn văn thứ n

Kết quả:

Đoạn văn thứ nhất.

Đoạn văn thứ hai

Đoạn văn thứ n

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

Thẻ divThẻ span

HTML div là một phần tử khối [block].	HTML span là một phần tử một dòng [inline]
HTML div được sử dụng để nhóm các phần tử có liên quan lại thành một khối.	HTML span được sử dụng để nhóm các văn bản, hình ảnh ... thành nhóm nhỏ.

Ví dụ về HTML div - Login Form

Trong ví dụ này, chúng ta sử dụng thẻ div để tạo một box và có một form login bên trong box đó. Dưới đây là code css và html và download code ví dụ.

CSS code:

.loginform {
  padding: 10px;
  border: 1px solid pink;
  border-radius: 10px;
  float: left;
  margin-top: 10px;
}

.formheading {
  background-color: red;
  color: white;
  padding: 4px;
  text-align: center;
}

.sub {
  background-color: blue;
  padding: 7px 40px 7px 40px;
  color: white;
  font-weight: bold;
  margin-left: 70px;
  border-radius: 5px;
}

HTML code:


  Please Login
  
    
      
        Email:
        
      
      
        Password:

Kết quả:

Download Source Code

Trình duyệt hỗ trợ

Thẻ	Chrome	IE	Firefox	Opera	Safari
	Yes	Yes	Yes	Yes	Yes

1. Định nghĩa thẻ div là gì?

2. Tác dụng của thẻ div trong HTML

3. Phân biệt sự khác nhau giữa thẻ span và thẻ div

4. Những thẻ không được dùng bên trong thẻ div là gì

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

Ví dụ về HTML div - Login Form

Please Login

Trình duyệt hỗ trợ

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề