HTML - <main> 標籤

HTML <main> 標籤用於表示 HTML body 元素的主要內容。它指定文件的主要或重要內容。

它每個頁面只能使用一次，並且不能用作 article、aside、footer、header 和 nav 元素的後代。<main> 標籤的內容應針對文件唯一。<main> 標籤不會影響 DOM 對頁面結構的理解。

語法

<main>
   .....
</main>

屬性

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

HTML main 標籤示例

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

建立文件的主要內容

以下示例程式碼展示了 HTML <main> 標籤的使用方法。當我們執行上述程式碼時，它將生成一個輸出，其中包含顯示在網頁上的文字。

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

<head>
   <title>HTML main Tag</title>
</head>

<body>
   <!--create a main element-->
   <p>Example of the HTML 'main' element(tag).</p>
   <main>
      <article>
         <h1>HTML</h1>
         <p>Hyper Text Markup Language</p>
         <p>
            The HyperText Markup Language or HTML is the 
            standard markup language for documents designed
            to be displayed in a web browser.
         </p>
         <h1>CSS</h1>
         <p>Cascading Style Sheet</p>
      </article>
   </main>
</body>

</html>

設定頁面主要內容的樣式

考慮以下示例，我們將使用 <main> 標籤並應用 CSS 屬性來設定主要元素的樣式。

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

<head>
   <title>HTML main Tag</title>
   <style>
      header {
         font-size: 10px;
      }

      main {
         background-color: green;
         color: white;
         padding: 10px;
      }

      main p {
         margin: 10px 10px;
      }
   </style>
</head>

<body>
   <header>Frontend Development</header>
   <!--create a main element-->
   <main>
      <p>
         Front-end web development is the development
         of the graphical user interface of a website.
      </p>
      <p>
         Through the use of HTML, CSS, and JavaScript,
         so that users can view and interact with that 
         website.
      </p>
   </main>
</body>

</html>

導航到主要內容

在此示例中，我們正在建立一個錨鏈接，其中包含“main”元素的“id”作為源（目標）。當用戶點選錨鏈接時，它將跳過導航連結（即連結和主要元素之間）。

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

<head>
   <title>HTML main Tag</title>
   <style>
      ul {
         list-style: none;
         height: 1600px;
      }

      ul li {
         width: 100px;
         background-color: lightgreen;
         padding: 10px;
         border-bottom: 1px solid black;
      }

      ul li a {
         text-decoration: none;
         margin: 10px;
      }

      main {
         padding: 10px;
      }
   </style>
</head>

<body>
   <p>Example of the HTML 'main' element</p>
   <a href="#maincontent">Skip to main content</a>
   <nav>
      <ul>
         <li>
            <a href="">Home</a>
         </li>
         <li>
            <a href="">About</a>
         </li>
         <li>
            <a href="">Blog</a>
         </li>
         <li>
            <a href="">Contact Us</a>
         </li>
      </ul>
   </nav>
   <main id="maincontent"> 
      <p>
         It can be used only once per page and can’t use 
         as a descendent of the article, aside, footer, header, 
         and nav elements.

         The content of the <main> tag should be unique to
         the document. The <main> tag does not affect the 
         DOM’s concept of the structure of the page.
      </p> 
   </main>
</body>

</html>

支援的瀏覽器

標籤
main	是 26.0	是 12.0	是 21.0	是 7.0	是 16.0

html_tags_reference.htm

列印頁面