1. Semantic Web

기존의 웹

• 기존 html은 웹 문서의 구조를 표현하는 태그가 없어 검색이나 크롤링을 할 때 어려움이 있었다.
• 구조의 표현도 div태그와 같은 non-semantic tag로 표현했기 때문에 소스코드만 보고 전체적인 구조와 그 의미를 파악하기도 어려웠다.

Semantic Web

• Semantic Web은 컴퓨터 또는 정보들의 의미를 파악할 수 있도록 메타데이터와 내용을 함께 담은 웹.
• 기계가 웹에서 정보의 의미를 이해할 수 있도록 설계된 웹.

Semantic Web 구조

< header >

• 페이지나 섹션의 머릿말, 페이지 제목, 페이지를 소개하는 간단한 설명

< section >

• 문서의 chapter, 절을 구성하는 역할.
• 여러 < section > 사용 가능.
• section 내에 header, footer, article을 가질 수 있다.
• 헤딩태그(< h1 >)를 사용해 절, 혹은 섹션의 주제를 기입.

< nav >

• 하이퍼링크들을 모아 놓은 특별한 섹션
• 페이지 내의 목차저장, 해당 목차로 이동하기 위한 용도.

< article >

• section 내에 두어 실제 콘텐츠의 내용을 담을 수 있다.(chapter의 느낌)
• 본문과 연관 있으나 독립적인 콘텐츠 담는 영역으로 사용 가능.
• 보조기사, 포스트, 댓글 etc

< footer >

• 꼬리말 영역, 저자나 저작권 정보 기입.

Semantic Web의 장점

• 데이터의 연결성 확보
• 유지보수 간편
• 코드의 가독성 증가
• 효과적인 크롤링/인덱싱 가능

2. Semantic Tag

Semantic Web을 표현하기 위해 사용되는 tag.
tag이름 그 자체로 내용의 의미를 나타낸다. ex) img, from, table...
반대되는 개념은 Non-Semantic Tag. ex) div, span...

Non-Semantic Tag VS Semantic Tag

• Non-Semantic Tag

	<div class="bg-img">배경이미지</div>
	.bg-img {
 	background-color: yellow;
 	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61
 	/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
	}

태그에 background-image 속성을 추가하는 방식.

• Semantic Tag

	<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

태그를 사용하는 방식.

• 그래서 Semantic Tag를 왜 사용하는가?
  위의 코드처럼 img 대신 Non-Semantic Tag로 이미지를 넣었을 경우 div에 백그라운드 이미지를 주어 표현하는데, 태그 자체로 어떤 역할을 하는 태그인지 알 수 없다.