HTML 이란? - aside 태그에 대해서 -10

오늘도 어김없이 찾아와서

HTML에 대해서 정보를 공유하고자 나타났습니다!

 

자 오늘은 <aside >태그에 대해서 알아볼텐데요,

이외 태그들은 한번에 몰아서 설명드리는 시간을 가지려고 합니다!

 

자 시작해볼까요?

 

ⓒ Photography by pexels - https://www.pexels.com/

 

---

 

1️⃣ aside 태그란?

<aside> 태그는 HTML5에서 도입된 의미론적 태그 중 하나로, 본문 콘텐츠와 간접적으로 관련된 추가 정보나 부가적인 콘텐츠를 나타낼 때 사용됩니다. 이는 메인 콘텐츠와는 다소 독립적이지만 관련된 정보를 제공하는 요소들을 그룹화하는 데 적합합니다.

 

---

 

2️⃣ 주요 특징

 

1. 부가 정보나 사이드바 역할: <aside> 태그는 주로 메인 콘텐츠와 간접적인 관련이 있는 정보, 예를 들어 광고, 관련 링크, 참고 자료, 저자 정보 등을 포함하는 데 사용됩니다. 흔히 블로그나 웹사이트의 사이드바에 사용되는 요소들이 <aside> 태그로 정의됩니다.
2. 의미론적 구조: <aside> 태그를 사용하면, 검색 엔진이나 스크린 리더 같은 도구들이 해당 콘텐츠가 보조적인 정보임을 쉽게 인식할 수 있습니다. 이는 페이지의 주요 내용과 보조적인 내용 사이의 구조적 구분을 명확히 합니다.
3. 위치와 용도:
   • 본문 외부: 페이지나 문서의 전체적인 맥락에서 추가적인 정보를 제공하는 요소로 사용됩니다. 예를 들어, 블로그의 사이드바에 있는 위젯이나 관련 글 목록을 나타낼 수 있습니다.
   • 본문 내부: 본문 안에서 특정 단락이나 내용과 관련된 추가적인 정보를 제공할 때 사용할 수 있습니다. 예를 들어, 글 중간에 참고 문헌이나 관련된 정보 박스를 넣고 싶을 때 유용합니다.

---

 

3️⃣ 사용 예시

1. 페이지 외부에 사용된 경우 (사이드바):

<article>
  <h1>Main Article Title</h1>
  <p>This is the main content of the article.</p>
</article>

<aside>
  <h2>Related Information</h2>
  <p>Here are some related articles or advertisements.</p>
</aside>

 

 

2. 본문 내부에 사용된 경우 (참고 정보):

<article>
  <h1>History of Web Development</h1>
  <p>The web has evolved significantly over the past decades...</p>

  <aside>
    <p>Note: HTML5 introduced many semantic tags like <code>aside</code>, <code>article</code>, and <code>section</code>.</p>
  </aside>

  <p>As we move forward, more changes are expected...</p>
</article>

 

---

 

4️⃣ 사용 용도

 

• 사이드바: 사이트의 메인 콘텐츠 옆에 위치하여 관련 정보나 광고, 추가적인 콘텐츠를 표시할 때.
• 참고 자료: 본문 내에서 특정 콘텐츠와 관련된 부가적인 설명, 팁, 참고 자료 등을 제공할 때.
• 저자 정보: 블로그나 기사에 저자나 출처, 기타 부가 정보를 제공할 때.

---

 

5️⃣ 다른 태그와의 차이점

 

• <section>: 관련된 콘텐츠 그룹을 의미적으로 묶는 태그로, 메인 콘텐츠의 일부로 사용됩니다. 반면, <aside>는 주 콘텐츠와 간접적으로 관련된 부가 정보를 나타냅니다.
• <article>: 독립적이고 자기완결적인 콘텐츠를 나타내며, 다른 문서에서 가져와도 완전한 의미를 가집니다. <aside>는 그 자체로 중요한 콘텐츠가 아니라, 추가 정보에 초점을 맞추고 있습니다.

---

 

6️⃣ 접근성 및 SEO

 

• 접근성: 보조 도구를 사용하는 사용자에게는 <aside> 태그가 보조적인 정보임을 명확히 전달하므로, 메인 콘텐츠와 보조 콘텐츠를 구별하는 데 도움을 줍니다.
• SEO: 검색 엔진은 <aside> 태그를 통해 페이지의 핵심 콘텐츠와 추가 콘텐츠를 구분할 수 있으므로, 페이지 구조를 이해하는 데 도움이 됩니다.

---

 

 

 

 

aside 태그는

메인 콘텐츠와 간접적으로 관련된 부가적인 정보 혹은

사이드바 역할을 합니다.

 

페이지의 메인 콘텐츠 외부나 내부에 삽입 가능하고,

블로그, 뉴스 사이트, 포털 사이트의 사이드바, 관련 링크, 광고 등에

주로 사용이 되고있어요!

 

태그에 대한 정보를 익히고

실제로 코딩하는 그날까지

언제나 응원합니다!