Aside

Aside

• 논리적으로 완결이 되었지만, 본문과 직접적인 관계가 없다.
• 배너 광고나 작은 위젯 등에 사용한다.

코드

<aside>
    <header>
        <h1>
            Worldwide trends
        </h1>
        <button type="button" aria-label="Options">
            <!-- icon -->
        </button>
    </header>

    <ol>
        <li>
            <a href="#">
                <button type="button" aria-label="Options">
                    <!-- icon -->
                </button>
                <div>
                    <button type="button">
                        <!-- icon -->
                        This trend is spam
                    </button>
                    <!-- 나머지 버튼들-->
                </div>
                <span>1 * Trending worldwide</span>
                <strong lang="ko">#김버그</strong>
                <span>100K Tweets</span>
            </a>
        </li>
        <li>
            <a href="#">
                <button type="button" aria-label="Options">
                    <!-- icon -->
                </button>
                <div>
                    <button type="button">
                        <!-- icon -->
                        This trend is spam
                    </button>
                    <!-- 나머지 버튼들-->
                </div>
                <span>2 * Trending worldwide</span>
                <strong lang="ko">#김버그</strong>
                <span>100K Tweets</span>
            </a>
        </li>
        <li>
            <a href="#">
                <button type="button" aria-label="Options">
                    <!-- icon -->
                </button>
                <div>
                    <button type="button">
                        <!-- icon -->
                        This trend is spam
                    </button>
                    <!-- 나머지 버튼들-->
                </div>
                <span>3 * Trending worldwide</span>
                <strong lang="ko">#김버그</strong>
                <span>100K Tweets</span>
            </a>
        </li>
        <li>
            <a href="#">
                <button type="button" aria-label="Options">
                    <!-- icon -->
                </button>
                <div>
                    <button type="button">
                        <!-- icon -->
                        This trend is spam
                    </button>
                    <!-- 나머지 버튼들-->
                </div>
                <span>4 * Trending worldwide</span>
                <strong lang="ko">#김버그</strong>
                <span>100K Tweets</span>
            </a>
        </li>
        <li>
            <a href="#">
                <button type="button" aria-label="Options">
                    <!-- icon -->
                </button>
                <div>
                    <button type="button">
                        <!-- icon -->
                        This trend is spam
                    </button>
                    <!-- 나머지 버튼들-->
                </div>
                <span>5 * Trending worldwide</span>
                <strong lang="ko">#김버그</strong>
                <span>100K Tweets</span>
            </a>
        </li>
    </ol>
    <footer>
        <button type="button">Show more</button>
    </footer>
</aside>