HTML5 <aside>標記用法及代碼示例

<aside>標記用於以較短的方式(如熒光筆)描述網頁的主要對象。它本質上標識與網頁的主要內容相關的內容，但不構成主要頁麵的意圖。 <aside>標記主要包含作者信息，鏈接，相關內容等。

<aside>與<div>：兩個標簽的行為相同，含義不同。

<div>：它在網頁中定義或創建部門或部分。
<aside>：它通過創建部分或分區來完成相同的工作，但是它僅包含與主頁相關的內容。

<aside>標簽使頁麵的設計變得容易，並且增強了html文檔的清晰度。它使我們可以輕鬆識別主要文本和從屬文本。在同時<div>和<aside>都需要CSS進行特定的設計。 <aside>標記在HTML中支持Global屬性和Event屬性。

注意：<aside>標記是HTML5中的新標記。

用法:

<aside>
  <h3>Contents...</h3>
  <p>Contents...</p>
</aside>

範例1：

<html> 
    <head> 
        <title>aside tag</title> 
        <style> 
        .gfg { 
            font-size:30px; 
        } 
            h1 { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
            } 
            p { 
                font-size:20px; 
                margin:20px 0; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">Aside Tag Example</div> 
        <aside> 
            <h1>GeeksforGeeks</h1> 
            <p>A computer science portal for geeks</p>  
        </aside> 
    </body> 
</html>

輸出：
aside tag
範例2：

<html> 
    <head> 
        <title>aside tag</title> 
        <style> 
            .gfg { 
                font-size:40px; 
                color:#090; 
                font-weight:bold; 
                text-align:center; 
                margin-bottom:20px; 
            } 
            article { 
                width:50%; 
                float:left; 
                padding:10px; 
                float:left; 
            } 
            aside { 
                float:right; 
                width:40%; 
                float:right; 
                background-color:green; 
                color:white; 
                padding:5px;  
                margin:10px; 
                height:100px; 
            } 
        </style> 
    </head> 
    <body> 
        <div class = "gfg">GeeksforGeeks</div> 
        <article> 
            <h1>Heading . . .</h1> 
            <p>Aside tag is use to display important information 
             about the primary page.</p> 
        </article> 
        <aside> 
            <h1>Aside tag example</h1> 
            <p>Aside tag content. . .</p>  
        </aside> 
    </body> 
</html>

輸出：

瀏覽器支持：下麵列出了<aside>標記支持的瀏覽器：

Google chrome 6.0及更高版本
Internet Explorer 9.0及以上
Firefox 4.0及更高版本
Opera 11.1及更高版本
Safari 5.0及更高版本

相關用法

注：本文由純淨天空篩選整理自Sabya_Samadder大神的英文原創作品 HTML5 | <aside> Tag。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。