HTML <aside> tag 정리, 한글 설명

HTML <aside> element

mdn, W3C 정리 & 한국어 설명

 

자료 수집 : 2022년 3월

 

aside 태그란?

문서의 주요 내용과 간접적으로 연관된 부분, 콘텐츠로부터 분리시킬 수 있는 영역을 정의한다.

본문 내용 주변에 추가적인 정보를 나타내는 구획이다.

aside 요소는 지우더라도 본문 영역에 아무런 영향을 미치지 않는다.

 

 

태그를 어디에서 사용할까?

• 사이드바, 콜아웃 박스
• 주석(Endnotes), 참조(reference information), 출처(pull-quotes) 등
• 용어 목록(lists of terms)
• 링크 모음 (a collection of links)

 

 

주의사항

• 괄호에 묶인 글자라도 문서의 주요 내용에 포함된다면 aside로 사용해서는 안 된다.
• aside 요소는 address 의 자식으로 올 수 없다.
• sidebar와 같은 요소로 aside를 생각하면 안 된다. sidebar는 물리적 요소일뿐이다.

 

 

aside 태그의 사용 예제

<p>Salamanders are a group of amphibians with a lizard-like</p>
<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>
<p>Several species of salamander inhabit the temperate </p>

<article>
  <p>디즈니 만화영화 <em>인어 공주</em>는 1989년 처음 개봉했습니다.</p>
  <aside>인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.</aside>
  <p>영화에 대한 정보...</p>
</article>

<h2>과메기</h2>
<p>과메기는 경상북도 포항 지역의 특산물로 청어나 꽁치를 추운 겨울 동안
얼렸다 녹였다를 반복하여 반건조시킨 음식이다.</p>
<aside>
    <h4>포항</h4>
    <p>포항시는 대한민국 경상북도 동해안에 위치하고 있으며,
    포항시 중심을 관통하는 형산강이 영일만에 유입되면서 
    넓은 충적평야를 형성하고 있다.</p>
</aside>

 

 

기타사항

• aside 태그는 HTML5에서 추가된 요소이다.
• 가능한 ARIA role : none, feed, note, presentation, region, search

 

 

출처

W3docs, MDN, TCPschool