<aside> 태그의 정의 및 사용법

<aside> 태그는
페이지 내 주요 콘텐츠와 직접적이지는 않지만 간접적으로 연관된 내용으로 구성된 별도(aside, 별도로 하고)의 부분을 나타냅니다.
이러한 부분은 주로 사이드바 혹은 문서의 내용과 관련된 추가 정보를 제공하는 작은 영역으로 표현됩니다.

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>

<aside> 태그는 주로 문서의 주요 내용과 관련된 별도로 분리된 추가 정보를 제공하는 데 사용해야 하며,
문서의 주요 내용에 포함되는 내용을 나타내는 데는 사용해서는 안 됩니다.

<aside> 태그는 페이지 내 주요 콘텐츠와 간접적으로 연관된 내용을 나타내기 위해 사용됩니다. 이것은 주로 추가 정보, 부가 콘텐츠 또는 주요 콘텐츠와는 별개의 내용을 포함하는 데 사용됩니다. 그러나 이 태그는 주요 콘텐츠의 일부인 것를 나타내기 위해 사용해서는 안 된다는 의미입니다.

다음은 <aside> 태그의 잘못된 사용법의 예제로 아래의 HTML 코드를 살펴봅니다.

HTML <aside> 태그의 잘못 사용한 예 
<!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>

위 예제에서는 <aside> 태그가 주요 콘텐츠의 일부로 사용되었습니다. 이것은 <aside> 태그를 올바르게 사용하는 방법이 아닙니다. <aside> 태그는 주요 콘텐츠와는 간접적으로 관련된 내용을 나타내는 데 사용되어야 하며, 주요 콘텐츠에 직접 포함되어서는 안 됩니다.

사용 예제

<aside> 태그의 다양한 사용 예제 중 일부를 살펴보겠습니다.

블로그 사이드바

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>

광고 배너

HTML 
<main>
    <h1>제품 소개</h1>
    <p>제품에 대한 자세한 정보...</p>
</main>
<aside>
    <ins>
        <!-- 제품 관련 광고 배너 -->
        <img src="광고이미지.jpg" alt="제품 광고">        
    </ins>
</aside>
HTML <ins> 태그

인용구

HTML 
<article>
    <h1>역사적 이벤트</h1>
    <p>이벤트에 대한 설명...</p>
</article>
<aside>
    <!-- 역사적 이벤트와 관련된 인용구 -->
    <blockquote>
        <p>역사는 어떤 상황에서든 경험된 것이 아니라, 해석된 것이다.</p>
        <span>칼 유워스</span>
    </blockquote>
</aside>
HTML <blockquote> 태그

관련 사이트 링크

HTML 
<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>

위의 예제에 추가된 주석과 설명은 <aside> 태그가 주요 콘텐츠와는 독립적으로 추가 정보를 제공하거나 부가 콘텐츠를 나타내는 데 사용되는 방법을 설명하고 있습니다.

접근성 고려사항

HTML에서 "랜드마크(landmark)"란 웹 페이지의 구조를 설명하고 웹 접근성을 향상시키는 데 사용되는 특별한 역할을 하는 요소입니다. 웹 페이지를 이해하고 탐색하는 데 도움을 주며, 스크린 리더 및 다른 보조 기술을 사용하는 사용자에게 페이지의 레이아웃 및 구조를 전달하는 데 중요한 역할을 합니다.

ARIA Landmarks Example을 참조하시기 바랍니다.

<aside> 태그는 페이지의 주요 콘텐츠 영역의 보조(혹은 부가) 콘텐츠 영역을 나타냅니다. 주요 콘텐츠와 상호작용하지 않고 보조(혹은 부가)적인 역할을 하는 내용이 포함될 수 있습니다. 주로 웹 페이지의 사이드바를 나타냅니다. role 속성의 값은 complementary입니다.

HTML role 속성

다음은 <aside> 태그를 사용하지 않고 <div> 태그에 role="complementary"를 사용해서 랜드마크로 사용하는 예입니다.

HTML 
<div role="complementary">
    <h2>Title for complementary area<h2> 
    .... complementary content area .... 
</div>

브라우저 호환성 문제로 <aside> 태그를 사용할 수 없는 경우를 제외하고, role="complementary" 사용 보다는 <aside> 태그를 사용하세요.

주의할 점

<aside>는 <address>의 자손 요소가 될 수 없습니다.

브라우저 호환성

aside 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<aside> 5 12 4 5

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

명세서

aside 태그의 명세서 사양
명세서 사양
<aside> HTML Standard
#the-aside-element

참고문헌

같이 보기