( Day 10.1 ) HTML 標題 <h1>～<h6>

2023 iThome 鐵人賽

DAY 10

Modern Web

跟著 OXXO 一起學 HTML系列第 19 篇

15th鐵人賽 html html教學

oxxo

2023-09-10 00:30:46

264 瀏覽

分享至

在 HTML 的內容裡，會使用 <h1>～<h6> 的標籤代表標題元素 ( heading )，在不需要設定任何樣式的狀態下，文字會自動加粗並且根據 <h1>～<h6> 的數字大小，從 <h1> 的最大文字尺寸到 <h6> 最小文字尺寸，這篇文章將會介紹標題元素的用法。

原文參考：標題 h1～h6

認識標題元素

HTML 的標題元素共又六個，分別是 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>)，h 表示 heading，1～6 表示不同的重要程度，<h1> 是最重要的標題，一份 HTML 通常只會有一個 <h1>，使用這些標題元素時，會按照 1 到 6 的順序使用。

標題元素屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。

標題元素的顯示類型為「block 塊級元素」，預設會強制換行。

例如下方的 HTML 開啟後，會呈現 <h1>、<h2>、<h3> 三個標題元素的預設樣貌。

<h1>主標題</h1>
<h2>大標題 1</h2>
<h3>小標題 1</h3>
  <p>內容...</p>
<h3>小標題 2</h3>
  <p>內容...</p>

HTML 教學 - 標題元素 ~

標題元素支援屬性

標題元素支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <h1> 加入 title 和 id 屬性，<h2> 則會加入 class 屬性，如此一來就能更方便的套用對應的樣式。

<style>
  #main{
    color:#f00;
  }
  .bb{
    color:#00f;
  }
</style>
<h1 title="oxxo" id="main">主標題</h1>
<h2 class="bb">大標題</h2>
<h3 class="bb">小標題</h3>

HTML 教學 - 標題元素 ~ - 支援屬性

標題元素預設樣式

下方列出標題元素各自的預設樣式：

h1 {
  display: block;
  font-size: 2em;
  margin-before: 0.67em;
  margin-after: 0.67em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h2 {
  display: block;
  font-size: 1.5em;
  margin-before: 0.83em;
  margin-after: 0.83em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h3 {
  display: block;
  font-size: 1.17em;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h4 {
  display: block;
  margin-before: 1.33em;
  margin-after: 1.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold; }

h5 {
  display: block;
  font-size: .83em;
  margin-before: 1.67em;
  margin-after: 1.67em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}

h6 {
  display: block;
  font-size: .67em;
  margin-before: 2.33em;
  margin-after: 2.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}