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:
Bài viết này được đăng tại [kiso.vn]
<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 Kiso.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é.
Bài viết liên quan
[CSF-2] Một số thiết lập CSF, LFD
Hôm nay mình sẽ thực hiện một số thiết lập trên CSF Mở file config để sửa đổi một số tính năng dưới /etc/csf/csf.conf Nội dung chính1. Thẻ header trong HTML5 là gì?2. Sử dụng...
[CSF-1] Tăng bảo mật Server với ConfigServer Firewall (CSF)
Nội dung chính1. Thẻ header trong HTML5 là gì?2. Sử dụng nhiều thẻ header trong HTML5 được không?3. Viết CSS cho thẻ header1. Khái niệm CSF: CSF (ConfigServer & Firewall) là một bộ ứng dụng...
Sử dụng SSH Key với Gitlab và Github
Bài viết này mình sẽ hướng dẫn các bạn tạo ssh key cho Gitlab và Github SSH là gì? Secure Socket Shell là một giao thức mạng dùng để thiết lập kết nối mạng một...
Directory traversal vulnerabilities (phần 4)
Nội dung chính1. Thẻ header trong HTML5 là gì?2. Sử dụng nhiều thẻ header trong HTML5 được không?3. Viết CSS cho thẻ headerV. Phân tích và khai thác các lỗ hổng Directory traversal (tiếp) 5....
Directory traversal vulnerabilities (phần 3)
Nội dung chính1. Thẻ header trong HTML5 là gì?2. Sử dụng nhiều thẻ header trong HTML5 được không?3. Viết CSS cho thẻ headerV. Phân tích và khai thác các lỗ hổng Directory traversal 1. Lỗ...
Directory traversal vulnerabilities (phần 2)
Nội dung chính1. Thẻ header trong HTML5 là gì?2. Sử dụng nhiều thẻ header trong HTML5 được không?3. Viết CSS cho thẻ headerIII. Vì sao lỗ hổng Directory traversal xuất hiện? Với mỗi ngôn ngữ...