Bố cục HTML chỉ định sự sắp xếp của các thành phần trên một trang web HTML. Có nhiều phần tử ngữ nghĩa (semantic elements) của HTML xác định các phần khác nhau của một trang web.
Dưới đây là các phần tử HTML ngữ nghĩa được dùng cho bố cục HTML:
| Thẻ | Giải thích |
|---|---|
| header | Chỉ định tiêu đề cho một phần hoặc cho một tài liệu. |
| section | Đại diện cho một phần trong tài liệu. |
| nav | Chỉ định container cho các liên kết điều hướng. |
| article | Chỉ định một bài viết độc lập, tự chứa. |
| aside | Chỉ định thẻ cho nội dung bên cạnh nội dung chính (như sidebar). |
| footer | Chỉ định chân trang cho một phần hoặc cho một tài liệu. |
| details | Chỉ định thẻ cho các chi tiết bổ sung. |
| summary | Chỉ định tiêu đề cho phần tử <details>. |
Các kỹ thuật dùng cho bố cục trang web HTML:
- CSS float property
- CSS flexbox
- CSS framework
- CSS grid
- HTML tables
Ví dụ
Dưới đây là ví dụ minh họa Bố cục HTML:
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body {
color: #000;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
header {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
nav {
float: left;
width: 20%;
height: 200px;
background: #282828;
padding: 60px 10px;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
article {
float: left;
padding: 80px 10px;
width: 80%;
background-color: #fff;
height: 200px;
text-align: center;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #000;
padding: 20px;
text-align: center;
color: white;
}
</style>
<body>
<h1>Demo Bố cục HTML</h1>
<header>Đây là Header</header>
<section>
<nav>
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
<article>Đây là phần tử article.</article>
</section>
<footer>Đây là Footer</footer>
</body>
</html>
Kết quả
