시맨틱 테그

html5에서는 공간을 구분하기 위해서 시만틱 테그를 지원합니다.

검색엔진에 의해서 보다 효율적으로 웹사이트가 분석, 노출이 될 수 있도록 도와 줍니다.

시만틱 테그의 종류

  • header : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치합니다.
  • nav : 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현합니다.
  • aside : 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리되 내용을 담고 있습니다.
  • main : 문서의 body 요소의 주 컨덴츠를 정의할때 사용합니다.
  • section : 문서나 응용프로그램의 일반적인 섹션을 표현합니다.
  • article : 아이템들을 둒어 재사용 가능하게 그룹화함
  • footer : 저작권 정보나 서비스 제공자 정보등을 나타내며 사이트 하단에 위치합니다.
  • details : 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타냅니다.
  • summary : 부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냅니다.
  • figcation : 부모요소인 figure 요소의 내용들에 대한 캡션, 혹은 제목을 나타냅니다.
  • figure : 일러트스, 아이어그램, 사진, 코드 등에 주석을 다는 용도로 사용됩니다.
  • mark : 하나의 문서 내에서 다른 무낵과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현합니다.
  • time : 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타냅니다.

시만틱 태그의 종류

시멘틱 태그는 모두 div 태그와 같은 기능을 수행히는 태그입니다.

  • header : 혜더를 의미
  • nav : 내비게이션을 의미
  • section : 여러 중심 내용을 감싸는 공간을 의미
  • article : 글자가 많이 들어가는 부분을 의미
  • main
  • aside : 사이드에 위치하는 공간을 의미

  • footer : 푸터를의미

  • address

aside

section

article