<header>: The Header element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Phần tử <header> trong HTML biểu diễn nội dung giới thiệu, thường là một nhóm các công cụ hỗ trợ giới thiệu hoặc điều hướng. Nó có thể chứa một số phần tử tiêu đề nhưng cũng là logo, form tìm kiếm, tên tác giả và các phần tử khác.

Try it

<header>
  <a class="logo" href="#">Cute Puppies Express!</a>
</header>

<article>
  <header>
    <h1>Beagles</h1>
    <time>08.12.2014</time>
  </header>
  <p>
    I love beagles <em>so</em> much! Like, really, a lot. They're adorable and
    their ears are so, so snugly soft!
  </p>
</article>

.logo {
  background: left / cover
    url("/shared-assets/images/examples/puppy-header.jpg");
  display: flex;
  height: 120px;
  align-items: center;
  justify-content: center;
  font:
    bold calc(1em + 2 * (100vw - 120px) / 100) "Dancing Script",
    fantasy;
  color: #ff0083;
  text-shadow: black 2px 2px 0.2rem;
}

header > h1 {
  margin-bottom: 0;
}

header > time {
  font: italic 0.7rem sans-serif;
}

Ghi chú sử dụng

Khi không được lồng trong nội dung sectioning, <main>, hoặc một phần tử có cùng vai trò ARIA với vai trò ARIA ngầm định của các phần tử này, thì phần tử <header> có ý nghĩa giống với vai trò landmark banner trên toàn trang. Nó định nghĩa một header trang web toàn cục, thường bao gồm logo, tên công ty, tính năng tìm kiếm và có thể là điều hướng toàn cục hoặc slogan. Nó thường nằm ở đầu trang.

Ngược lại, khi được lồng trong các phần tử đã nói, nó mất trạng thái landmark và biểu diễn một nhóm các công cụ hỗ trợ giới thiệu hoặc điều hướng cho section bao quanh. Nó thường chứa tiêu đề của section bao quanh (phần tử h1 đến h6) và phụ tiêu đề tùy chọn, nhưng điều này không bắt buộc.

Khi được đặt trong <article>, <main>, <section>, <nav>, <aside>, hoặc một phần tử có cùng vai trò ARIA với vai trò ARIA ngầm định của các phần tử này, phần tử <header> có vai trò generic thay thế, và không còn được coi là landmark. Trong trường hợp này, nó không thể được đánh nhãn bằng aria-label hoặc aria-labelledby.

Ví dụ

Header trang

html

<header>
  <h1>Main Page Title</h1>
  <img src="mdn-logo-sm.png" alt="MDN logo" />
</header>

Kết quả

Header bài viết

html

<article>
  <header>
    <h2>The Planet Earth</h2>
    <p>
      Posted on Wednesday, <time datetime="2017-10-04">4 October 2017</time> by
      Jane Smith
    </p>
  </header>
  <p>
    We live on a planet that's blue and green, with so many things still unseen.
  </p>
  <p><a href="https://example.com/the-planet-earth/">Continue reading…</a></p>
</article>

Kết quả

Tóm tắt kỹ thuật

Danh mục nội dung	Nội dung flow, nội dung palpable.
Nội dung được phép	Nội dung flow, nhưng không có phần tử con `<header>` hay `<footer>`.
Bỏ qua thẻ	Không, cả thẻ mở và thẻ đóng đều bắt buộc.
Phần tử cha được phép	Bất kỳ phần tử nào chấp nhận nội dung flow. Lưu ý rằng phần tử `<header>` không được là phần tử con của `<address>`, `<footer>` hoặc phần tử `<header>` khác.
Vai trò ARIA ngầm định	banner, hoặc generic nếu là phần tử con của `article`, `aside`, `main`, `nav` hoặc `section` element, hoặc một phần tử với `article`, `complementary`, `main`, `navigation` hoặc `region` role
Vai trò ARIA được phép	`group`, `presentation` hoặc `none`
Giao diện DOM	`HTMLElement`