Thẻ body trong HTML
Trần Thị Vân - 1979
- 18/02/2025
Chức năng của Thẻ body trong HTML
Thẻ body trong HTML dùng để bao quát các thẻ HTML khác để hiển thị ra giao diện website, vị trí nằm ở dưới thẻ head và nằm trong thẻ html, nó chứa các thẻ HTML như div, p, ul, img,....
Cú pháp của Thẻ body trong HTML
<body>phantuhtml</body>
phantuhtml: Các phần tử HTML.
Các thẻ HTML nằm trong thẻ body
Thẻ div trong thẻ body
<!DOCTYPE html>
<html>
<head>
<title>Thẻ div trong thẻ body</title>
</head>
<body>
<div>Thẻ div trong thẻ body</div>
</body>
</html>
Thẻ p trong thẻ body
<!DOCTYPE html>
<html>
<head>
<title>Thẻ p trong thẻ body</title>
</head>
<body>
<p>Thẻ p trong thẻ body</p>
</body>
</html>
Thẻ ul trong thẻ body
<!DOCTYPE html>
<html>
<head>
<title>Thẻ UL trong thẻ body</title>
</head>
<body>
<ul>
<li>Thẻ UL trong thẻ body 1</li>
<li>Thẻ UL trong thẻ body 2</li>
<li>Thẻ UL trong thẻ body 3</li>
</ul>
</body>
</html>
Thẻ table trong thẻ body
<!DOCTYPE html>
<html>
<head>
<title>Thẻ <table> trong thẻ body</title>
</head>
<body>
<table>
<tr>
<th>Họ Tên</th>
<th>Tuổi</th>
<th>Giới Tính</th>
</tr>
<tr>
<td>Bùi Tấn Lực</td>
<td>26</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Vân</td>
<td>20</td>
<td>Nữ</td>
</tr>
</table>
</body>
</html>
Css cho thẻ body
<!DOCTYPE html>
<html>
<head>
<title>CSS cho thẻ body</title>
<style>
body{font-family: 'Roboto', sans-serif!important;
font-weight:400;
font-size:16px;
margin:0;
padding:0;
color:green;
background:red;
}
</style>
</head>
<body>
CSS cho thẻ body
</body>
</html>
Cách tối ưu thẻ body trong HTML để xây dựng trang web hiệu quả
Thẻ body là khu vực chứa toàn bộ nội dung mà người dùng nhìn thấy trên trang web. Việc tổ chức nội dung bên trong body hợp lý không chỉ giúp mã HTML dễ quản lý hơn mà còn hỗ trợ cải thiện trải nghiệm sử dụng và khả năng phát triển website lâu dài.
Sắp xếp cấu trúc nội dung bên trong body hợp lý
Một cấu trúc body rõ ràng giúp trình duyệt, công cụ tìm kiếm và người phát triển dễ dàng hiểu được bố cục trang. Thay vì đặt toàn bộ nội dung trực tiếp trong body, nên chia thành các khu vực có ý nghĩa như phần đầu trang, nội dung chính, khu vực bổ sung và chân trang.
Khi xây dựng trang HTML5, có thể kết hợp các thẻ ngữ nghĩa như header, main, section, article hoặc footer bên trong body để mô tả chính xác vai trò của từng phần nội dung. Cách tổ chức này giúp mã nguồn gọn gàng hơn và hỗ trợ tốt cho việc tối ưu SEO.
<body>
<header>
Nội dung đầu trang
</header>
<main>
<section>
Nội dung chính
</section>
</main>
<footer>
Thông tin cuối trang
</footer>
</body>
Ngoài việc phân chia bố cục, nội dung bên trong body cũng nên được sắp xếp theo thứ tự ưu tiên. Những thông tin quan trọng cần đặt ở vị trí dễ tiếp cận để người dùng nhanh chóng tìm thấy nội dung cần thiết.
Kết hợp body với CSS và JavaScript để cải thiện trải nghiệm người dùng
Thẻ body chỉ đảm nhận vai trò chứa nội dung, còn việc tạo giao diện và tính năng tương tác thường được thực hiện thông qua CSS và JavaScript. Sự kết hợp giữa các công nghệ này giúp website có thiết kế đẹp hơn và hoạt động linh hoạt hơn.
CSS có thể được sử dụng để điều chỉnh bố cục, màu sắc, kích thước và cách hiển thị các thành phần bên trong body. Trong khi đó, JavaScript giúp xử lý các thao tác như hiển thị nội dung động, kiểm tra dữ liệu nhập hoặc tạo hiệu ứng tương tác.
<body>
<button id="button">Xem thêm</button>
<script>
document.getElementById("button").onclick = function() {
alert("Nội dung được hiển thị");
};
</script>
</body>
Tuy nhiên, việc thêm quá nhiều mã CSS hoặc JavaScript không cần thiết có thể làm giảm tốc độ tải trang. Vì vậy, nên tối ưu tài nguyên, chỉ sử dụng các đoạn mã thực sự cần thiết để giữ cho website hoạt động nhanh và ổn định.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ body trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
