Eojin Han

aside 장점 언제 <aside>를 사용할까?예시1 - 사이드바 예시 - 부가정보

aside

<aside>는 본문 내용과 직접적으로 관련이 없는 부가적인 정보나 참고자료를 나타낼 때 사용한다.

주로 사이드바, call-out boxes 등에 사용됨.

📌

이거 참고자료야 ㅇㅋ? 메인콘텐츠의 내용과 직접연관 있는 내용은 아니야. 라고 주로 스크린 리더 사용자에게 알려주기 위해서 구분함.

장점

코드 가독성: 구조가 명확하고 논리적이어서 다른 개발자도 쉽게 이해.

접근성(Accessibility): 스크린 리더가 사이드바와 내부 콘텐츠를 정확히 구분.

SEO(Search Engine Optimization): 검색 엔진이 페이지를 더 잘 이해할 수 있음.

언제 `<aside>`를 사용할까?

블로그 글/뉴스 아티클

본문 옆에 관련 정보(통계, 링크, 추가 설명)를 배치하고 싶을 때.

사용자 안내

부가적인 참고 자료나 노트를 표시할 때.

광고/홍보 배너

페이지 레이아웃의 사이드바에 배치되는 광고는 흔히 <aside>로 감싼다.

예시1 - 사이드바

사이드바도 한 페이지의 구성요소다.

하지만 블로그 글을 보는 사람 입장에서 사이드바는 부가정보다.

컨테이너가 되는 sidebar 컴포넌트 자체를 aside 태그로 감싸서 부가정보임을 표시하고,

그 안의 내용들은 적절히 섹션을 나눠서 정리한다.


<aside class="sidebar">
  <!-- 카테고리 목록 -->
  <section>
    <h2>Categories</h2>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </section>

  <!-- 방문자 수 -->
  <section>
    <h2>Visitor Count</h2>
    <p>Today: 567</p>
    <p>Total: 12,345</p>
  </section>

  <!-- 인기 글 -->
  <section>
    <h2>Popular Posts</h2>
    <ul>
      <li><a href="#">How to Learn HTML</a></li>
      <li><a href="#">Top CSS Tips</a></li>
    </ul>
  </section>
</aside>

예시 - 부가정보


<article>
  <p>
    The Disney movie <cite>The Little Mermaid</cite> was first released to
    theatres in 1989.
  </p>
  
  <aside>
    <p>The movie earned $87 million during its initial release.</p>
  </aside>
  
  <p>More info about the movie…</p>
</article>

영화의 흥행 수익은 본문의 핵심 주제(영화의 출시일)와는 관련이 없지만, 영화에 대한 참고자료로 추가된 정보다.

<aside> 태그를 사용함으로써, "이건 본문과 직접 관련된 내용은 아니야"라는 걸 브라우저와 사용자(특히 스크린 리더 사용자)에게 알려줄 수 있다.