aside element - by. UXKM
요약 설명
<aside>요소는 문서의 주요 흐름과는 직접적으로 관련되지 않은 보조 콘텐츠를 나타내는 시맨틱 태그로, 광고, 관련 링크, 사이드바, 팁, 인용문 등과 같이 부가적인 정보나 참고 자료를 담는 데 사용됩니다.
문서 전체의 부가정보일 수도 있고, 특정 섹션이나 기사(<section>,<article>) 내부의 보조 내용일 수도 있습니다. 주요 콘텐츠와는 독립적으로 존재하며, 화면상에서는 주로 좌우 측면에 배치되는 경우가 많습니다.
주요 역할 및 특징
-
부가 정보 제공
-
<aside>는 주요 콘텐츠를 보완하거나 간접적으로 관련된 정보를 제공합니다. - 예를 들어, 기사 본문에 대한 추가 설명, 인용문, 링크 목록, 광고 등이 포함될 수 있습니다.
-
-
문서 구조의 명확화
- 의미론적으로 주 콘텐츠와 보조 콘텐츠를 구분하여 구조를 명확히 정의합니다.
- 검색 엔진과 스크린 리더가 콘텐츠의 목적을 이해하기 쉽게 만듭니다.
-
위치에 관계없는 사용
-
<aside>는 항상 페이지의 한쪽에 위치할 필요는 없으며, 문서 구조에 따라 배치됩니다. - 문서의 주요 흐름을 방해하지 않고 부가 정보를 제공하는 역할을 합니다.
-
-
SEO 및 접근성
-
검색 엔진은
<aside>의 내용을 부가 정보로 간주하므로, 보조적인 내용이나 관련 링크에 적합합니다. -
접근성을 위해
<aria-label>이나<aria-labelledby>를 사용하여 보조 콘텐츠의 목적을 명확히 설명할 수 있습니다.
-
검색 엔진은
CSS 기본 값
<aside> 요소는 기본적으로 블록 레벨 요소입니다.
기본 문법
속성
<aside> 요소는 고유 속성을 가지지 않으며,
글로벌 속성(class, id, style, aria-*, data-* 등)만 사용할 수 있습니다.