<section>, <aside>, <article>, <main>, <footer> 정리

●해당 HTML 관련 글 들은 제가 알아보기 쉽게 메모장 형식으로 쓴 것이며, 실제 내용과 상이할 수 있으며, 제가 알아보기 쉽게 쓴 글로써, 읽으실 때 참고만 하시길 권장드립니다. 대부분의 내용은 생활코딩을 참고하였습니다. 출처를 밝힙니다.

<section>

section요소는 문서나 응용프로그램의 일반적인 섹션을 표현합니다.

 

제목으로 시작하는 컨텐츠를 의미적으로 그룹핑하기 위해 사용됩니다.

 

section요소를 사용할 수 있는 예로는 챕터나 탭으로 구분된 대화상자에서 탭된 페이지, 또는 논문의 번호가 매겨진 색션이 될 수 있습니다. 홈페이지에서는 소개, 뉴스 아이템, 연락처등이 섹션으로 분리될 수 있습니다.

 

요소의 컨텐츠를 배포해도 이치에 맞다면 section요소대신 article요소를 사용할것을 권장합니다.

 

section요소는 일반적인 컨테이너 요소는 아닙니다. 요소가 단순히 스타일링을 위한 목적이나 스크립팅의 편의를 위해서 필요할때 section요소보다는 div요소를 사용할것을 권장합니다.

 

문서의 일반적인 영역을 설정

 

일반적으로 <h1>~<h6>을 포함하여 식별

 

<article>

semantic html에서 본문이다. 라는 것을 정확히 명시하기 위해 컴퓨터에게 알려주는 태그이다.

 

article 요소 는 문서 내에서 독립적 인 컨텐츠를 나타냅니다.

 

기사 요소는 포럼의 글이 될수도 있고, 잡지 나 신문의 기사 일 수도 있고, 어떤 위젯의 글이나 사용자가 올린 의견이나 상호 작용적인 또는 가젯 또는 다른 독립적 인 아이템 등이 될 수 있습니다.

 

하나의 문서 안에서 여러 개의 문서가 올 수 있습니다.

 

독립적으로 구분되거나 재사용 가능한 영역 설정

 

일반적으로 <h1>~<h6>을 포함하여 식별

 

작성일자와 시간을 <time>의 datetime 속성으로 작성

 

기사 콘텐츠 (텍스트, 이미지, 오디오 등의 조합을 포함 할 수 있음)

 

<main>

<main> 태그

 

문서의 주요 콘텐츠를 설정

 

IE 지원 불가

 

단, 한 문서에 하나의 <main> 요소만 포함 가능

 

<footer>

footer요소는 주로 저작권 정보나 서비스 제공자 정보등을 나타냅니다.

 

주로 사이트 하단에 위치합니다.

 

연락정보는 address요소에 담는것이 적당하며 footer요소안에 포함될 수도 있습니다.

<aside>

 

aside요소는 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있습니다.

 

주로 사이드바의 형태로 나타냅니다.

 

aside요소는 문서의 주요 흐름의 일부이기 때문에 단순 삽입어구로 사용되는것은 적합하지 않습니다.(단순 삽입어구로 사용된 경우는 어떤 경우 일까요?)

 

문서의 별도 콘텐츠 설정

 

보통 광고, 기타 링크 등의 사이드 바(Side bar) 설정