<main> 是進入 HTML5 之後才加入的主要區塊元素，通常一個網頁只會有一個 <main>，裡面會放入整個網頁的主要內容，這篇文章將會介紹 <main> 主要區塊元素的用法。

原文參考：主要區塊 main

認識 <main>

<main> 是 HTML 裡作為定義主要內容的元素，主要區塊裡面通常會放入文章、圖片、影片..等主要內容，<main> 的位置普遍而言都會放在網頁裡最重要以及最醒目的位置。

• <main> 屬於「容器元素」，需要有「起始標籤」以及「結束標籤」，也因為是容器元素，裡頭可以放入其他的子元素。
• <main> 的顯示類型為「block 塊級元素」，預設會強制換行。

例如下方的 HTML 開啟後，在網頁中會放入一個 <main>，當中包含 <h1> 標題與 <article> 文章內容。

<main>
  <h1>我是標題</h1>
  <article>
    <p>
      床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。
    </p>
  </article>
</main>

<main> 支援屬性

<main> 支援「全域屬性」以及「可見元素的事件屬性」( 參考「HTML 元素屬性」)，例如下方的 HTML，會將 <main> 加入 style 屬性改變背景顏色。

<main style="background:#ccf;">
  <h1>我是標題</h1>
  <article>
    <p>
      床前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。
    </p>
  </article>
</main>

<main> 預設樣式

下方列出 <main> 的預設樣式：

main {
  display: block;
}

更多教學

大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^

• Python 教學 ( 學習導讀 )
• Scratch 教學
• GA4 ( Google Analytics 4 ) 教學
• 生成式 AI ( AIGC ) 教學
• Midjourney 教學
• HTML 教學