HTML - <header> 標籤

HTML <header> 標籤用於表示 HTML 文件或節的介紹性內容。它指定文件的頭部。

此元素可以定義全域性站點頭部，一些標題元素還包括徽標、公司名稱、搜尋輸入欄位、作者姓名、全域性導航和其他元素。<header> 元素最初存在於 HTML 標題的開頭，是網頁上首先看到的元素。

此標籤不能放置在 <footer>、<address> 或另一個 <header> 元素內。

語法

<header>
  ...
</header>

屬性

HTML header 標籤支援 HTML 的全域性和事件屬性。

HTML header 標籤示例

下面的示例將說明 header 標籤的用法。在哪裡、何時以及如何使用 header 標籤建立任何網站的 header 元素。

建立 header 元素

以下程式顯示了 HTML <header> 標籤的用法。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header Tag</title>
</head>

<body>
   <!--create header tag-->
   <p>'header' element(tag) example</p>
   <header>
      <h1>HTML</h1>
      <p>
         Full form of above content: Hyper Text Markup Language.
      </p>
   </header>
</body>

</html>

將 header 標籤與 article 元素一起使用

在這個例子中，我們將在 article 元素內建立一個 header 元素來定義 article 元素的頭部。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header Tag</title>
</head>

<body>
   <!-- Creating header Element -->
   <h2>HTML 'header' Element</h2>
   <article>
      <header>HTML Tags</header>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </article>
   <article>
      <header>HTML Attributes</header>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </article>
</body>

</html>

設定 header 元素樣式

考慮以下示例，我們將使用 <header> 標籤並應用 CSS 屬性。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header tag</title>
   <style>
      header {
         color: green;
         font-style: italic;
      }
   </style>
</head>

<body>
   <!--create header tag-->
   <p>'header' element(tag) example</p>
   <header>
      <h1>Cricket</h1>
      <p>
         I love playing and watching cricket matches.
         My favorite player is Virat Kohli.
      </p>
   </header>
</body>

</html>

連結 header 元素

在這個例子中，我們將 <header> 標籤與錨元素一起使用。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML header Tag</title>
   <style>
      header {
         color: rgb(4, 78, 138);
         font-style: italic;
      }

      .demo {
         background: left / cover url("91442692.webp");
         height: 120px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: white;
         font-size: 20px;
         text-decoration: none;
      }
   </style>
</head>

<body>
   <!--create header tag-->
   <p>'header' element(tag) example</p>
   <header>
      <a class="demo" href="#">Gaming laptop</a>
   </header>
   <article>
      <header>
         <h2>HTML</h2>
         <p>Hyper Text Markup Language</p>
      </header>
      <p>
         HTML is a standard markup language for documents 
         designed to displayed in a web browser.
      </p>
   </article>
</body>

</html>

支援的瀏覽器

標籤
header	支援 5.0	支援 9.0	支援 4.0	支援 5.0	支援 11.1

html_tags_reference.htm

列印頁面