HTML - 標題

HTML 標題定義了網頁內容的層級（級別）和結構。它們建立了一個視覺層級，最高級別的標題（即h1）表示最重要的內容或主標題，較低級別的標題，如h2、h3、h4等，則用於子主題。

使用標題的原因

標題對於組織內容和清晰地指示新章節或主題的開始至關重要。結構良好的標題可增強網站的可讀性和使用者體驗，確保資訊井然有序且易於瀏覽。

標題對 SEO 的影響：組織良好的標題有助於搜尋引擎理解內容結構並進行索引。
突出重要主題：正確使用標題標籤可以保持內容的可讀性。

HTML 標題標籤

標題由標題標籤定義（<h1> 到 <h6>）。使用標題標籤來顯示網頁上的內容結構非常重要。HTML 有不同級別的標題標籤。層級決定了內容的重要性，並有助於為使用者和搜尋引擎建立清晰的資訊流。

示例

以下示例顯示了 HTML 標題的不同級別：

<!DOCTYPE html>
<html>
  <body>
    <h1>This is Heading 1 (H1 Tag)</h1>
    <h2>This is Heading 2 (H2 Tag)</h2>
    <h3>This is Heading 3 (H3 Tag)</h3>
    <h4>This is Heading 4 (H4 Tag)</h4>
    <h5>This is Heading 5 (H5 Tag)</h5>
    <h6>This is Heading 6 (H6 Tag)</h6>
  </body>
</html>

標題標籤的層級結構

以下是標題標籤的層級列表（從最重要到最不重要）：

<h1> 標籤 - 最高級別標題表示整個頁面的主要主題或標題。
<h2> 標籤 - <h1> 下的子標題表示與主要主題相關的各個主要部分。它們為內容提供更具體的上下文。
<h3> 到 <h6> 標籤 - 這些標籤用於<h2>標題內的更多子部分或巢狀內容。它們為在特定部分內組織內容提供了更深的層級。

HTML 標題示例

在這些示例中，您將看到所有標題標籤的使用，以及使用 CSS 對其進行樣式設定：

使用 <h1> 到 <h6> 標籤的標題

在這個例子中，我們將使用標題標籤 (h1 到 h6)；每個標籤的內容都有不同的尺寸和粗細：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

使用 CSS 設定標題樣式

在下面的示例中，我們將應用樣式，例如字體系列、字型顏色、字型大小等，到標題：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of HTML Headings</title>
    <style>
      h1, h2, h3, h4, h5, h6{
       font-family: Verdana;
      }
      h1{
       color: Red;
       font-size: 32px;
      }
      h2{
       color: Green;
       font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Heading 1: Main Heading of Page</h1>
    <h2>Heading 2: Section</h2>
    <h3>Heading 3: Subsection</h3>
    <h4>Heading 4: Sub-subsection</h4>
    <h5>Heading 5: Lower-level heading</h5>
    <h6>Heading 6: Lowest-level heading</h6>
  </body>
</html>

在這裡，我們為所有標題標籤應用了“Verdana”字型樣式，為H1標題定義了“紅色”顏色，字型大小為32px，併為H2標題定義了“綠色”顏色，字型大小為30px。

在標題標籤中使用 HTML 標籤

HTML 標題 (h1 到 h6) 用作內容組織的主要標題和子標題。在這些標題標籤中，您可以使用各種其他 HTML 標籤來有效地增強和組織您的內容。以下是一些示例：

<span> 標籤

您可以使用<span> 標籤將內聯樣式或類應用於標題內文字的特定部分。這允許對標題內的文字進行自定義樣式設定。

<!DOCTYPE html>
<html>
<head>
   <title>Using <span> Tag</title>
</head>
<body>
   <h2>This is a <span style="color: blue;">blue</span> word.</h2>
</body>
</html>

<a> 標籤用於連結

要在標題內建立連結，請使用<a> 標籤。這對於指向網站其他頁面或部分的標題非常有用。

<!DOCTYPE html>
<html>
<head>
   <title>Using <a> Tag for Links</title>
</head>
<body>
   <h1><a href="https://tutorialspoint.tw">Visit our website</a></h1>
</body>
</html>

<em> 和 <strong> 標籤

這些標籤用於強調標題中的文字。<em> 標籤將文字斜體顯示，而<strong>使其加粗。

<!DOCTYPE html>
<html>
<head>
   <title>Using <em> and <strong> Tags</title>
</head>
<body>
   <h3>This is <em>emphasized</em> and <strong>important</strong> text.</h3>
</body>
</html>

<sup> 和 <sub> 標籤

在標題中，要在標題中包含上標或下標文字，請使用<sup>和<sub>。

<!DOCTYPE html>
<html>
<head>
   <title>Using <sup> and <sub> Tags</title>
</head>
<body>
   <h4>The 10<sup>th</sup> floor is at the top.</h4>
   <h5>The chemical formula for water is H<sub>2</sub>O.</h5>
</body>
</html>

<abbr> 標籤用於縮寫

當您需要在標題中包含縮寫或首字母縮略詞時，請使用<abbr>標籤。它通常提供一個帶有完整含義的工具提示。

<!DOCTYPE html>
<html>
<head>
   <title>Using <abbr> Tag for Abbreviations</title>
</head>
<body>
   <h2>HTML stands for <abbr title="Hypertext Markup Language">HTML</abbr>.</h2>
</body>
</html>

<br> 標籤用於換行

有時，您可能希望在標題內建立換行符以獲得更好的格式。<br> 標籤用於此目的。

<!DOCTYPE html>
<html>
<head>
   <title>Using <br> Tag for Line Breaks</title>
</head>
<body>
   <h3>This is the first line.<br>This is the second line.</h3>
</body>
</html>

<mark> 標籤

使用<mark> 標籤突出顯示標題內的特定文字。它通常用於指示搜尋結果或文字的選定部分。

<!DOCTYPE html>
<html>
<head>
   <title>Using <mark> Tag</title>
</head>
<body>
   <h1>Search for "<mark>important</mark>" information here.</h1>
</body>
</html>

應避免的錯誤

使用標題標籤時，請確保避免以下錯誤：

跳過級別 - 始終遵循正確的層級 (h1、h2、h3 等)。不要跳過級別。
過度使用 h1 - 將 h1 保留為主標題；不要在一頁上多次使用它。
樣式過載 - 避免過度使用樣式；CSS 應該處理美觀效果，而不是標題。

列印頁面