HTML - <aside> 標籤

HTML <aside> 用於提供有關 aside 元素周圍內容的額外資訊。<aside> 元素中可以包含的資訊包括尾註、備註、術語列表、參考資料、一組連結、摘錄等。

它通常用於透過新增更多詳細資訊或強調讀者會感興趣的段落來改進文章。如果從網頁中刪除 aside 內容，則主要內容不會受到影響，因為 aside 內容是頁面中一個獨立的、可選的元件。

語法

<aside>.....</aside>

屬性

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

HTML aside 標籤示例

下面的示例將說明 aside 標籤的使用。在哪裡、何時以及如何使用 aside 標籤建立部分以提供額外資訊。

建立 Aside 內容

在此示例中，我們將建立一個 aside 元素以呈現一些額外資訊。

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

<head>
   <title>HTML aside Tag</title>
</head>

<body>
   <!-- Creating aside Element -->
   <p>
      It is typically used to improve an article by
      adding more details or emphasizing passages that
      the reader would find interesting. If you remove
      aside content from a web page, the main content 
      will not be impacted because aside content is a 
      separate, optional component of the page.
   </p>
   <aside>About HTML aside Tag</aside>
</body>

</html>

使用 aside 標籤建立段落部分

以下是 HTML <aside> 標籤的另一個示例。在這裡，我們使用 <aside> 標籤來標記 ‘article’ 元素中的一個段落。該段落僅與主要文章內容間接相關。

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

<head>
   <title>HTML aside Tag</title>
</head>

<body>
   <!-- Creating aside Element -->
   <p>Example of the HTML 'aside' Element</p>
   <article>
      <p>
         The HTML full form is Hyper Text Markup Language.
      </p>
      <aside>
         <p>
            The HyperText Markup Language or HTML is the 
            standard markup language for documents designed 
            to be displayed in a web browser.
         </p>
      </aside>
   </article>
</body>

</html>

設定 Aside 元素的樣式

在以下程式中，我們使用 HTML <aside> 標籤來表示 HTML 文件的一部分。我們使用 CSS 來設定建立的 ‘aside’ 元素的樣式。

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

<head>
    <title>HTML aside Tag</title>
    <style>
        aside {
            width: 30%;
            padding-left: 15px;
            margin-left: 15px;
            float: right;
            background-color: lightgray;
            border-radius: 10px;
        }
        p {
            width: 60%;
            float: left;
        }
    </style>
</head>

<body>
    <!-- Creating aside Element -->
    <h2>HTML 'aside' Element</h2>
    <p>
        It is typically used to improve an article by adding more details 
        or emphasizing passages that the reader would find interesting. 
        If you remove aside content from a web page, the main content will
        not be impacted because aside content is a separate, optional 
        component of the page.
    </p>
    <aside>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Angular</li>
            <li>React</li>
        </ul>
    </aside>
</body>

</html>

支援的瀏覽器

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

html_tags_reference.htm

列印頁面