HTML <main> 標簽

定義和用法

<main> 標簽規定文檔的主要內容。

<main> 元素中的內容對于文檔應該是唯一的。不應包含在多個文檔中重復出現的內容，例如側邊欄、導航鏈接、版權信息、網站標志和搜索表單等。

注意：文檔中不能有多個 <main> 元素。 <main> 元素不能是 <article>、<aside>、<footer>、<header> 或 <nav> 元素的后代元素。

實例

例子 1

指定文檔的主要內容：

<main>
  <h1>最流行的瀏覽器</h1>
  <p>Chrome、Firefox 和 Edge 是當今使用最多的瀏覽器。</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌開發的網絡瀏覽器，于 2008 年發布......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 開發的開源網絡瀏覽器......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微軟開發的一款網絡瀏覽器，于 2015 年發布......&</p>
  </article>
</main>

親自試一試

例子 2

使用 CSS 設置 <main> 元素的樣式：

<html>
<head>
<style>
main {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}
main > h1, p, .browser {
  margin: 10px;
  padding: 5px;
}
.browser {
  background: white;
}
.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}
</style>
</head>
<body>
<main>
  <h1>最流行的瀏覽器</h1>
  <p>Chrome、Firefox 和 Edge 是當今使用最多的瀏覽器。</p>
  <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌開發的網絡瀏覽器，于 2008 年發布......</p>
  </article>
  <article>
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 開發的開源網絡瀏覽器......&</p>
  </article>
  <article>
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微軟開發的一款網絡瀏覽器，于 2015 年發布......&</p>
  </article>
</main>
</body>
</html>

親自試一試

全局屬性

<main> 標簽還支持 HTML 中的全局屬性。

事件屬性

<main> 標簽還支持 HTML 中的事件屬性。

瀏覽器支持

表中的數字注明了首個完全支持該標簽的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 12.0 21.0 7.0 16.0