Giới thiệu
Tag <header> trong HTML được sử dụng để định nghĩa phần tiêu đề hoặc phần đầu của một trang web hoặc một phần tử cụ thể trong trang web. Nó thường chứa các thông tin quan trọng như logo, tiêu đề, menu điều hướng và các phần tử khác liên quan đến phần đầu của trang.
Cách sử dụng
Để sử dụng tag <header>, bạn chỉ cần bao bọc các phần tử tiêu đề hoặc phần đầu của trang bằng cặp thẻ <header> và </header>. Ví dụ sau minh họa cách sử dụng tag <header>:
<header>
<h1>Trang chủ</h1>
<nav>
<ul>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
</header>
Trong ví dụ trên, chúng ta có một phần đầu của trang web với tiêu đề "Trang chủ" và một menu điều hướng chứa các liên kết đến các trang khác.
Ví dụ và giải thích
Dưới đây là một ví dụ cụ thể về việc sử dụng tag <header> trong HTML:
<!DOCTYPE html>
<html>
<head>
<title>Trang web của tôi</title>
</head>
<body>
<header>
<h1>Trang chủ</h1>
<nav>
<ul>
<li><a href="#">Giới thiệu</a></li>
<li><a href="#">Dịch vụ</a></li>
<li><a href="#">Liên hệ</a></li>
</ul>
</nav>
</header>
<section>
<h2>Giới thiệu</h2>
<p>Đây là trang web của tôi, nơi tôi chia sẻ kiến thức về lập trình và công nghệ.</p>
</section>
<section>
<h2>Dịch vụ</h2>
<p>Tôi cung cấp các dịch vụ tư vấn và đào tạo về lập trình cho cá nhân và doanh nghiệp.</p>
</section>
<footer>
<p>Bản quyền © 2022 Trang web của tôi. All rights reserved.</p>
</footer>
</body>
</html>
Trong ví dụ trên, chúng ta có một trang web đơn giản với một phần đầu được định nghĩa bằng tag <header>. Phần đầu này bao gồm tiêu đề "Trang chủ" và một menu điều hướng chứa các liên kết đến các trang khác. Dưới phần đầu là hai phần tử <section> để mô tả nội dung chính của trang. Cuối cùng, chúng ta có một phần chân trang được định nghĩa bằng tag <footer>.
Tag <header> giúp chúng ta tổ chức và nhận diện phần đầu của trang web một cách rõ ràng. Nó cung cấp một cách tiếp cận chuẩn để định nghĩa phần tiêu đề và menu điều hướng của trang, giúp người dùng dễ dàng tìm thấy thông tin quan trọng.