시맨틱태그(Semantic tag)

HTML5에 도입된 태그들.

div태그에서 파생된 태그로 의미가 부여되어 있기 때문에

시멘틱 태그로 작업하게되면 자체가 웹표준이 되고 접근성에 유리하다.

또한 이해하기 쉽고 유지 보수하기도 훨씬 쉬워진다.

익스8 이하로는 호환이 안되는 단점이 있다.

header 요소

웹 문서의 헤더 영역

• 영역 머리글 부분 지정.

• 네비게이션, 테이블, 검색, 로고 영역을 포함할 수 있는 영역.

• section 콘텐츠가 아닌 그룹화 하기위한 요소이므로 section요소를 포함 할 수 없다.

• 본문에 사용된 header의 경우 머리글이기 때문에 h1 ~ h6 까지 제목태그를 사용해 본문 내용중

  제목과 부제목을 표시하는 경우가 많다.

   

nav 요소

페이지 내에서 이동 할 수 있는 네비게이션 링크 그룹

• 네비게이션 링크를 표현

• nav는 문서의 핵심적인 페이지의 메뉴 및 서브메뉴에서 사용하고, 문서에서 주로 한번 사용함.

• 문서안에 링크가 포함된 콘텐츠는 nav를 사용하지 않는다.

• nav는 위치에 영향을 받지않아 header , footer 또는aside 안에 포함 시킬 수 있고

  독립해서 사용할 수 도 있다.

aside 요소

웹 문서의 메인 콘텐츠와 관련된 사이트 콘텐츠 영역을 나타냄.

• aside는 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 그룹화 할때 사용.

• 흔히 sidebar라고 부르는 영역으로 배너, 용어설명, 관련 상품 등 본문내용과 직접적인 관련성이 적거나 없는

  내용으로 구성된다.

• aside요소로 구성된 영역을 검색엔진은 무시하고 본문 위주로 색인을 진행 할 수 있고 스크린리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으므로 곧바로 다른 영역으로 이동할 수도 있다.

section 요소

일반적으로 문서의 콘텐츠를 그룹으로 묶어주는 section태그.

• content와 관련된 한가지 주제영역
• section요소는 제목이 있어야 한다.
• 단순히 contents를 묶기 위해 section 태그를 사용하는 것은 바람직 하지 않다.
• 스타일을 적용하거나 스크립트를 사용하기 위함이라면 div태그를 사용되는 것이 좋다.
• 웹에서 재배포되어서는 안될 콘텐츠를 지정할때도 사용한다.
• 일반적인 주제가 아니라면 구체적인 요소 article, aside, nav를 사용하는 것이 더 적절하다.
• 같은 성격의 내용, 즉 관련있는 내용을 section 요소로 묶어 표시한다.
• 뉴스와 광고 섹션 처럼 서로 다른 성격을 지닌 것들을 section 요소로 표시하면 영역 구분이 아주 명확해진다.
• 스크린리더 사용자는 섹션 단위로 이동할 수 있으므로 문서 내 내비게이션이 좀 더 수월해지고 검색엔진은 특정 섹션 중심으로 색인 활동을 할 수 있으므로 검색엔진의 효율성을 높일 수 있다.

article 요소

콘텐츠의 독립적인 항목을 나타내는 콘텐츠를 의미

• 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등은 콘텐츠의 독립적인 항목을 나타냄
• section은 하나의 주제를 나타낸다면, article은 주제를 묶은 독립적인 콘텐츠
• 일반적인 상황에서는 section요소 안에는 article요소를 포함 할 수 있다.
• 하지만 독립적으로 구성된 내용이 몇 개의 섹션으로 구성된 경우라면 article요소 안에도 section요소를 포함 할 수 있다.

footer 요소

웹문서의 풋더 영역을 나타냄

• 저작권 정보, 회사정보, 관련링크, 주소, 바닥글, 사이트 정보 등을 포함하는 콘텐츠 영역

• 섹션 콘텐츠가 아닌 그룹을 나타내는 요소이며, section, article, aside 등을 포함 할 수 있다.

• 맨위로 가기 링크나 헤더의 메인 내비게이션도 반복 제공을 위해 푸터 영역에 둘 수 있다.

outliner - https://gsnedders.html5.org/outliner/