Thẻ header trong HTML5
Trong bài này mình sẽ hướng dẫn cách sử dụng thẻ header trong HTML5, đây là thẻ dùng để khai báo phần đầu tiêu đề cho một trang web hoặc các bài viết.
Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn sẽ cảm thấy thật mơ hồ, bởi thẻ header được đặt ở rất nhiều vị trí khác nhau. Nhưng nếu bạn hiểu được ý nghĩa của nó thì sẽ cảm thấy rất dễ dàng.
1. Thẻ header trong HTML5 là gì?
Trong HTML5, thẻ header được dùng để khai báo phần đầu (tiêu đề) cho các bài viết, thậm chí là phần trên cùng của trang web. Bạn cũng đừng nhầm lẫn thẻ header với thẻ head nhé.
Cấu trúc thẻ header như sau:
<header>...</header>2. Sử dụng nhiều thẻ header trong HTML5 được không?
Câu trả lời là hoàn toàn được nhé các bạn. Ví dụ trong trang hiển thị danh sách bài viết, bạn sẽ dùng thẻ article để khai báo cho mỗi bài, bên trong mỗi article sẽ khai báo thêm thẻ header để bao phần tiêu đề của bài viết lại.
<article>
<header>
<h2>Tiêu đề 1</h2>
</header>
<p>Mô tả bài viết 1</p>
</article>
<article>
<header>
<h2>Tiêu đề 2</h2>
</header>
<p>Mô tả bài viết 2</p>
</article>
<article>
<header>
<h2>Tiêu đề 3</h2>
</header>
<p>Mô tả bài viết 4</p>
</article>Bạn cũng có thể sử dụng header để khai báo phần trên cùng (chứa logo và các thông tin cơ bản khác) của trang web.
<body>
<header>
<h1>HTML5 Cho Người Mới Bắt Đầu Tại web888.vn</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Serie</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Ebook</a></li>
</ul>
</nav>
...
</body>3. Viết CSS cho thẻ header
Nếu bạn muốn sử dụng CSS để style cho thẻ header thì sử dụng một trong hai cách dưới đây.
Cách 1: CSS trực tiếp.
<header style="background:red">
...
</header>Cách 2: Sử dụng selector.
<style>
header{
background:red
}
</style>
<header>
...
</header>Lưu ý: Nếu bạn không muốn sử dụng thẻ header để khai báo cho phần này thì có thể sử dụng thẻ div để thay thế nhé.
