Thẻ Div trong HTML (2021)

5/5 - (1132 bình chọn)

Hôm nay chúng ta sẽ cùng nhau đi tìm hiểu về thẻ Div cùng với dịch vụ website Alowebtot nhé!

Trước hết, HTML được hiểu là gì?

HTML (Hypertext Markup Languge): là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong website
HTML tạm dịch là ngôn ngữ đánh dấu siêu văn bản. Người ta thường dùng nó trong việc phân chia các đoạn văn, heading, links, blockquote…

Cấu trúc HTML trong website

Một Website thường chứa nhiều trang con, mỗi trang con này lại có một tập tin HTML riêng. Lưu ý HTML không phải là ngôn ngữ lập trình chuyên dùng. Điều này có nghĩa là nó không thể thực hiện các chức năng “động”
Hiểu một cách đơn giản cũng giống như phần mềm Microsoft Word, HTML chỉ có tác dụng bố cục và định dạng trang web. HTML khi kết hợp với CSS và JavaScript sẽ trở thành một nền tảng vững chắc cho thế giới mạng

HTML hoạt động như thế nào?

HTML document có đuôi file dạng .html hoặc .htm. Bạn có thể xem chúng bằng các trình duyệt web hiện hành như Google Chrome, Firefox, Safari… Nhiệm vụ của trình duyệt là đọc những file HTML này và “biến đổi” chúng thành một dạng nội dung visual trên Internet sao cho người dùng có thể xem và hiểu được chúng
Thông thường một website sẽ có nhiều HTML document: trang chủ, trang blog, trang liên hệ… và mỗi trang con như vậy sẽ có một tệp HTML riêng. Mỗi tài liệu HTML bao gồm một bộ tag (element). Nó tạo ra một cấu trúc tương tự như cây thư mục với các heading, section, paragraph… và một số khối nội dung khác. Hầu hết các trang HTML, element đều có một tag mở và một tag đóng với cấu trúc <tag></tag>

Kế đó, ý nghĩa mà thẻ Div mang lại như thế nào?

Định nghĩa thẻ Div

Div (Division): là thẻ được dùng để nhóm nhiều phần tử HTML lại với nhau. Mỗi thẻ trong HTML đều có mục đích sử dụng khác nhau. Ví dụ: thẻ <p> (paragraph) được dùng để chỉ định một đoạn văn bản nhất định; thẻ <br> dùng để ngắt đoạn văn bản trong HTML
Thẻ <div> là thẻ đánh dấu một khối (block) gồm nhiều thẻ khác ở trong khối. Như vậy, thẻ div giúp các tài liệu HTML được chia thành các phần riêng biệt

Ý nghĩa của thẻ Div

Dùng để nhóm các phần tử lại với nhau trong các khu vực của website. Các khu vực đó bao gồm: Header (nhóm nội dung ở đầu trang), Content (gồm text và hình ảnh của bài viết), Sidebar (nội dung phụ chạy dọc hai bên trái-phải của trang web), Footer ( nhóm nội dung ở cuối trang web)
Ngoài ra, một số cấu trúc hoặc các khu vực lớn bên trong chứa nhiều thẻ cũng được khuyên dùng thẻ div để phân nhóm. Việc nhóm các cấu trúc lại bằng thẻ <div></div> sẽ giúp cho quá trình định dạng điều khiển… nguyên cụm trở nên dễ dàng hơn. Người dùng chỉ cần thêm hoặc bớt đặc tính bằng một dòng cps găn sther div là khối nội dung đó sẽ thay đổi như yêu cầu

<!DOCTYPE html>
<html>
<head>
<style>
/* Viết mã CSS ở đây */
</style>
</head>
<body>

<div class="header">
<p>Đây là phần Header</p>
</div>

<div class="content">
<p>Đây là phần Content</p>
</div>

<div class="sidebar">
<p>Đây là phần Sidebar</p>
</div>

<div class="footer">
<p>Đây là phần Footer</p>
</div>

</body>
</html>

Cuối cùng cấu trúc là của Div trong HTML sẽ được hiển thị

<!DOCTYPE html>
<html>
<body>

<p>Đây là một số văn bản.</p>

<div>
<h3>Đây là một tiêu đề trong một thẻ div</h3>
<p>Đây là một số văn bản trong một thẻ div.</p>
</div>

<p>Đây là một số văn bản.</p>

</body>
</html>

Cảm ơn các bạn đã cùng chúng tôi lắng nghe