[HTML] aside 태그 (SEO최적화에 도움 되는 태그)

728x90

목 차

• 1. aside 태그란?
• 2. 주요 특징 및 역할
• 3. 사용 예시
  • 3-1. 블로그의 사이드바
  • 3-2. 기사에서 보충 정보 제공
  • 3-3. 광고 또는 프로모션
• 4. 주요 속성과 사용법
• 5. 실용적인 활용 팁
  • 5-1. 레이아웃 디자인
  • 5-2. 접근성 향상
  • 5-3. SEO 최적화
• 6. 요약

반응형

 

1. aside 태그란?

HTML의 <aside> 태그는 문서의 주요 콘텐츠와 간접적으로 관련된 콘텐츠를 나타내는 데 사용됩니다. 이는 보조적인 정보나 추가적인 내용을 표시하는 데 적합하며, 종종 사이드바나 관련 콘텐츠로 사용됩니다.

 

---

 

2. 주요 특징 및 역할

1. 보조 정보
   • <aside> 요소는 주요 콘텐츠를 보완하거나 추가적인 맥락을 제공하는 정보를 담습니다.
   • 예: 광고, 관련 링크, 인용문, 정의, 사이드바 등.
2. 문맥 의존성
   • <aside> 내부의 콘텐츠는 주요 콘텐츠에 대한 보조 자료로 작용하므로, 외부 문맥 없이 단독으로 사용되기보다는 관련된 주요 콘텐츠와 함께 사용됩니다.
3. 위치와 역할
   • <aside> 요소는 문서의 주요 흐름과 시각적으로 구분될 수 있으며, 종종 화면의 한쪽에 배치됩니다.

 

---

 

3. 사용 예시

3-1. 블로그의 사이드바

<aside>
  <h3>관련 포스트</h3>
  <ul>
    <li><a href="post1.html">HTML5 기초 가이드</a></li>
    <li><a href="post2.html">CSS를 활용한 레이아웃 디자인</a></li>
    <li><a href="post3.html">JavaScript 시작하기</a></li>
  </ul>
</aside>

관련 포스트

• HTML5 기초 가이드
• CSS를 활용한 레이아웃 디자인
• JavaScript 시작하기

 

3-2. 기사에서 보충 정보 제공

<article>
  <h1>HTML5의 주요 태그</h1>
  <p>HTML5에서는 문서 구조를 정의하는 여러 새로운 태그가 도입되었습니다...</p>
  <aside>
    <p><strong>참고:</strong> HTML5는 2014년에 W3C 권고안으로 채택되었습니다.</p>
  </aside>
</article>

HTML5의 주요 태그

HTML5에서는 문서 구조를 정의하는 여러 새로운 태그가 도입되었습니다...

참고: HTML5는 2014년에 W3C 권고안으로 채택되었습니다.

 

3-3. 광고 또는 프로모션

<aside>
  <h3>광고</h3>
  <p>우리의 최신 프로모션을 확인하세요!</p>
  <a href="promo.html">여기를 클릭하세요</a>
</aside>

광고

우리의 최신 프로모션을 확인하세요!

여기를 클릭하세요

 

---

 

4. 주요 속성과 사용법

• <aside>는 HTML 전역 속성을 모두 지원합니다. (id, class, style, data-* 등)
• <aside>의 위치와 문맥 
  • 문서의 주요 흐름 바깥에 사용: 콘텐츠와 별도의 보조 섹션으로 사용됩니다.
  • <article> 내부에서 사용: 기사의 주요 내용과 관련된 추가 정보를 제공.

 

<aside>와 <article> 비교

<aside>	<article>
주요 콘텐츠를 보완하거나 보조 정보 제공	독립적이고 재사용 가능한 콘텐츠를 나타냄
주 흐름과 간접적으로 관련 있음	자체적으로 완전한 내용을 가짐
예: 광고, 관련 링크, 참고 자료	예: 블로그 글, 뉴스 기사, 포럼 게시물

 

---

 

5. 실용적인 활용 팁

5-1. 레이아웃 디자인

<aside> 요소는 CSS를 통해 화면의 왼쪽 또는 오른쪽에 배치되어 사이드바로 자주 사용됩니다.

aside {
  float: right;
  width: 300px;
  margin: 0 0 1em 1em;
}

 

5-2. 접근성 향상

스크린 리더는 <aside> 요소를 보조 정보로 인식하므로, 관련 콘텐츠를 구체적으로 제공하는 데 유용합니다.

 

5-3. SEO 최적화

주요 콘텐츠와 구분된 보조 콘텐츠를 명확히 표시하여 검색 엔진이 문서의 구조를 더 잘 이해하도록 도울 수 있습니다.

 

---

 

6. 요약

<aside> 태그는 주요 콘텐츠와 간접적으로 관련된 부가 정보를 나타내며, 주로 사이드바, 광고, 참고 자료 또는 관련 링크를 표시하는 데 사용됩니다. 문서의 가독성과 구조를 개선하며, 현대 웹 디자인에서 중요한 역할을 합니다.

 

---

 

관련글

• [HTML] article 태그 (콘텐츠 관련 태그)
• [HTML] area 태그 (이미지 특정 영역 지정)
• [HTML] address 태그 문법 및 사용 예제