HTML - <section> 標籤

HTML <section> 標籤用於在 HTML 文件中表示獨立的、自包含的組合內容。此標籤包含在 HTML5 中。

HTML section 標籤類似於 <article> 標籤。單個 HTML 文件可以有多個 section 元素。當 HTML <section> 元素巢狀時，內部元素表示與外部元素相關的部分。例如，社交媒體帖子上的評論可以是巢狀在表示社交媒體帖子的 section 中的 section 元素。它主要用於論壇帖子、雜誌或報紙版塊、部落格文章、產品卡片等。

語法

<section>
   .....
</section>

屬性

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

HTML section 標籤示例

以下示例將說明 section 標籤的用法。在哪裡、何時以及如何使用 section 標籤來建立 section 元素。

使用 section 標籤建立自包含內容

在以下示例中，我們使用 <section> 標籤建立了 2 個自包含內容，它們彼此獨立，也與父級獨立。

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

<head>
   <title>HTML section tag</title>
</head>

<body>
   <!-- Creating section Element -->
   <h2>HTML 'section' Element</h2>
   <section>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </section>
   <section>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </section>
</body>

</html>

設定 section 元素樣式

考慮以下示例，我們將使用 <section> 標籤並應用 CSS 屬性。

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

<head>
   <title>HTML section tag</title>
   <style>
      section {
         width: 300px;
         height: 150px;
         background-color: aquamarine;
         border-radius: 10px;
      }
      section h3,
      p {
         margin: 10px 10px;
      }
   </style>
</head>

<body>
   <!--create a section element-->
   <h2>HTML 'section' Element</h2>
   <section>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </section>
   <section>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </section>
</body>

</html>

巢狀的 section 元素

讓我們看看另一種情況，我們將建立一個巢狀的 section 元素。

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

<head>
   <title>HTML section Tag</title>
   <style>
      section {
         margin: 5px;
         border-radius: 10px;
         padding: 10px;
         border: 2px solid black;
      }
      p {
         margin: 10px;
      }
   </style>
</head>

<body>
   <!--create a section element-->
   <h2>HTML 'section' Element</h2>
   <section>
   <h3>HTML Elements</h3>
   <p>
       HTML Elements are building block of a web page.
       It is used to create component for webpages.
   </p>
   <section>
      <h3>HTML Tags</h3>
      <p>
          HTML tags are similar to keywords, which specify 
          how a web browser will format and display content.
          A web browser can differentiate between simple content 
          and HTML content with the use of tags. 
      </p>
   </section>
   <section>
      <h3>HTML Attributes</h3>
      <p>
          An attribute is used to define the characteristics
          of an HTML element and is placed inside the element's 
          opening tag. All attributes are made up of two parts:
          a name and a value
      </p>
   </section>
   </section>
</body>

</html>

在 section 元素上實現影像

在以下示例中，我們建立巢狀的“section”元素以使用 <section> 標籤表示部落格文章及其評論的自包含內容。

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

<head>
   <title>HTML section tag</title>
   <style>
      section img {
         width: 200px;
      }
   </style>
</head>

<body>
   <!--create a section element-->
   <section>
      <h2>Blog post</h2>
      <img src="/images/logo.png?v3" alt="Tutorialspoint logo">
      <section>
      <h2>Comments</h2>
      <p>Dman good...</p>
      <p>fabulous...!</p>
      </section>
   </section>
</body>

</html>

支援的瀏覽器

標籤
section	是 6.0	是 9.0	是 4.0	是 5.0	是 11.1

html_tags_reference.htm

列印頁面