시맨틱 웹

'semantic'이란 의미론적인 뜻을 가지며 마크업은 HTML문서 태그로 문서를 작성하는 것을 말한다.

시맨틱 마크업 사용 장점

• 검색 엔진은 시맨틱 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하여 SEO(Search Engine Optimize)에 영향을준다.
• 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 시맨틱 마크업을 푯말로 사용할 수 있다.
  -의미가 없는 div태그들을 탐색하는 것보다, 의미있는 코드 블록을 작성하는게 나중에 보기도 편하고 찾기도 쉽다.
• 개발자에게 태그안에 채워질데이터 유형을 제안할 수 있다.

시맨틱 태그 종류 및 특징

• header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.
  예시로는 제목(페이지 제목, 글 제목), 로고, 검색 폼, 작성자 이름 등의 요소를 포함한다.
  header태그 안에 header태그 또는 footer 태그를 넣을 수 없다.

<header>
  <h1>Main Page Title </h1>
</header>

<article>
	<header>
      <h2>Article Title</h2>
      </hedaer>
</article>

• footer : 일반적으로 작성자, 저작권 정보, 관련 문서들의 내용을 담는다. header와 마찬가지로 footer 안에 footer 또는 header를 넣을 수 없다.

• nav : 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타내며, 현재 페이지를 기준으로 상위 요소 또는 현재 페이지의 개요를 나타낼때 사용한다.(footer는 전체 페이지를 나타내는 요소)
  예시로는 메뉴, 목차 등이 있다.

• aside : 본문과 간접적 정보이거나 부가적 정보일때 사용 (없어도 상관 없는 것,관련 컨텐츠나 광고). 예시로는 사이드바.

• main : body태그의 하위 자식으로 하나만 사용할 수 있으며 주요 콘텐츠를 나타낼때 사용된다.

• article : 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다(단독 콘텐츠), 콘텐츠를 따로 구분해야 할 필요가 있을때 사용.
  article안에 주로 제목 태그(h1~h6)요소를 사용하여 제목을 표시해준다.
  예시로는 게시판과 블로그 글, 잡지나 뉴스 기사, 댓글 등이 있다.

• section : article이 아니면 section 사용
  section안에 주로 제목 태그(h1~h6)요소를 사용하여 제목을 표시해준다.