Div là gì? Cách dùng thẻ div trong HTML từ A đến Z

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 sử dụng khá nhiều. Vậy cụ thể thẻ div là gì và nó có nhiệm vụ thế nào trong HTML?

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ẻ <p> (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ẻ <br> dùng để ngắt đoạn văn bản trong HTML. Thẻ <div> 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ẻ <div> giúp các tài liệu HTML được chia thành các phần (khối) riêng biệt. 

định nghĩa thẻ div là gì trong HTML
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).

tác dụng của thẻ div là gì
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ẻ <div></div> 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 

<div style=”font-size:20px; color:red”>

<p> dinh nghia the div la gi </p>

<p> tac dung cua the div trong HTML </p>

<p> phan biet su khac nhau giua the span va the div </p>

</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). 

sự khác nhau giữa thẻ span và div là gì
Nguồn: educba

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: <HTML></HTML>, <meta></meta>, <body></body>, <title></title>, <link></link>.

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.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 06, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
Những điều cần biết về thẻ em trong HTML

Những điều cần biết về thẻ em trong HTML

Nếu là một người thường xuyên soạn thảo văn bản cho website, chắc chắn bạn đã quen thuộc với thẻ em trong HTML. Tuy nhiên, liệu bạn đã hiểu rõ về loại thẻ định dạng này, cũng như cách sử dụng chính xác? Hãy cùng giải đáp những thắc mắc trên qua bài viết dưới […]
Tìm hiểu về thẻ strong trong HTML

Tìm hiểu về thẻ strong trong HTML

Thẻ strong trong HTML là một trong những thẻ định dạng cần có khi soạn thảo nội dung cho website. Các thẻ định dạng được tạo ra nhằm tận dụng hiệu quả các công cụ định dạng văn bản được cung cấp. Vậy thẻ strong là gì và có vai trò như thế nào? Mục […]
Thẻ code trong HTML và lí do sử dụng thẻ code?

Thẻ code trong HTML và lí do sử dụng thẻ code?

Thẻ code trong HTML là thẻ được gắn vào một đoạn code, giúp trình duyệt web đọc hiểu được đoạn dữ liệu đó một cách chính xác nhất. Cùng tìm hiểu định nghĩa cụ thể cũng như công dụng của thẻ <code> trong bài viết sau đây. Mục lục1. Thẻ code trong HTML là gì?2. […]
Thẻ th trong HTML và 8 thuộc tính cơ bản

Thẻ th trong HTML và 8 thuộc tính cơ bản

Thẻ th trong HTML là một trong những thẻ được sử dụng nhiều nhất khi lập trình web. Vậy cụ thể thẻ <th> được dùng để làm gì và những thuộc tính trong thẻ <th> có tác dụng gì? Mời các bạn cùng theo dõi bài viết dưới đây. Mục lục1. Thẻ th trong HTML […]
Thẻ p trong HTML. Các cách kết hợp với thẻ p

Thẻ p trong HTML. Các cách kết hợp với thẻ p

Chữ cái “p” trong thẻ <p> là viết tắt của paragraphs – đoạn văn. Thẻ p trong HTML giúp trình duyệt nhận dạng được đoạn văn bản trong HTML. Bài viết dưới đây sẽ giúp bạn phân biệt được các thẻ được dùng và không được dùng với thẻ <p> khi code HTML.  Mục lục1. […]
Div là gì? Cách dùng thẻ div trong HTML từ A đến Z

Div là gì? Cách dùng thẻ div trong HTML từ A đến Z

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 sử dụng khá nhiều. Vậy cụ thể thẻ div là gì và nó có nhiệm vụ thế nào trong HTML? Mục lục1. Định nghĩa thẻ div là gì? 2. Tác dụng của thẻ […]