<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>aside 태그 예제</title>
    </head>
    <body>
        <header>
            <h1>웹 페이지 제목</h1>
        </header>
        <main>
            <article>
                <h2>주요 콘텐츠 제목</h2>
                <p>주요 내용...</p>
            </article>
        </main>
        <aside>
            <h3>부가 정보</h3>
            <p>이 영역은 주요 콘텐츠에 포함되어 있지 않은 별도로 분리된 부가 정보를 표시합니다.</p>
        </aside>
        <footer>
            <p>© copyright 웹 페이지</p>
        </footer>
    </body>
</html>
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>aside 태그의 잘못된 사용법</title>
    </head>
    <body>
        <header>
            <h1>웹 페이지 제목</h1>
        </header>
        <main>
            <article>
                <h2>주요 콘텐츠 제목</h2>
                <p>주요 내용...</p>
            </article>
        </main>
        <aside>
            <!-- 주요 콘텐츠의 일부인 것를 나타내기 위해 사용해서는 안 됩니다. -->
            <h3>작은 제목</h3>
            <p>이 페이지의 주요 내용의 일부입니다.</p>
        </aside>
        <footer>
            <p>© copyright 웹 페이지</p>
        </footer>
    </body>
</html>
<article>
    <h1>블로그 포스트 제목</h1>
    <p>블로그 내용...</p>
</article>
<aside>
    <!-- 블로그 포스트와 관련된 추가 정보 -->
    <h2>관련 포스트</h2>
    <ul>
        <li><a href="#">포스트 1</a></li>
        <li><a href="#">포스트 2</a></li>
        <li><a href="#">포스트 3</a></li>
    </ul>
</aside>
<main>
    <h1>제품 소개</h1>
    <p>제품에 대한 자세한 정보...</p>
</main>
<aside>
    <ins>
        <!-- 제품 관련 광고 배너 -->
        <img src="광고이미지.jpg" alt="제품 광고">        
    </ins>
</aside>
<article>
    <h1>역사적 이벤트</h1>
    <p>이벤트에 대한 설명...</p>
</article>
<aside>
    <!-- 역사적 이벤트와 관련된 인용구 -->
    <blockquote>
        <p>역사는 어떤 상황에서든 경험된 것이 아니라, 해석된 것이다.</p>
        <span>칼 유워스</span>
    </blockquote>
</aside>
<nav>
    <ul>
        <li><a href="#">홈</a></li>
        <li><a href="#">서비스</a></li>
        <li><a href="#">블로그</a></li>
    </ul>
</nav>
<aside>
    <!-- 웹사이트의 관련 사이트 링크 -->
    <h2>관련 사이트</h2>
    <ul>
        <li><a href="#">파트너사 1</a></li>
        <li><a href="#">파트너사 2</a></li>
        <li><a href="#">파트너사 3</a></li>
    </ul>
</aside>
<div role="complementary">
    <h2>Title for complementary area<h2> 
    .... complementary content area .... 
</div>

caniuse.com에서 더 자세한 정보를 확인해 보세요.