HTML | Semantic Web과 Semantic Tags

이진웅·2021년 11월 17일
0

HTML / CSS

목록 보기
1/4
post-thumbnail

Semantic?

포스팅에 앞서 semantic이라는 단어의 의미부터 알아야 한다고 생각한다.

semantic
adj. 의미의, 의미론적인

사전적 정의 그대로 semantic은 의미있는이라는 뜻, 그렇다면 Semantic WebSemantic Tags란 말 그대로 의미있는 web과 tag라는 것이다.

의미있는 web과 tag라니 뭔가 추상적이라 의미를 파악하기가 힘들다.

Semantic Web

웹 기술의 미래

웹 시대가 열리고 방대한 자료가 쌓이게되자, 기존의 검색엔진이 필요한 자료를 검색하기가 힘들어졌다. 기존에 가진 기술로는 방대한 자료 중에 어떤 자료가 양질의 자료인지 알기 어려웠기 때문이다.

이를 해결하기위해 Semantic Web은 2001년 팀 버너스리에 의해 웹 기술의 비전으로 제시되었다. 검색엔진이 웹페이지들의 정보를 크롤링해서 색인을 생성할 때, 의미있는 메타데이터들을 중점으로 색인을 생성하게끔 하는 것이다. 이 때 필요한 것이 Semantic Tags이다.

Semantic Tags

Semantic Tags는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
예를 들어, div는 아무 의미가 없어 태그 속 내용을 파악하기 힘들다. 하지만 header, footer같은 태그들은 div태그처럼 아무 기능이 없지만, 이름만 봐도 어떤 역할을 하는지 파악할 수 있다.

HTML5 이후 사용하는 Semantic Tags
article 본문
aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들
details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의
figure 삽화나 다이어그램과 같은 부가적인 요소를 정의
footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main 문서에서 가장 중심이 되는 컨텐츠를 정의
mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav 문서의 네비게이션 항목을 정의
section 문서의 구획들을 정의
time 시간을 정의

참고

생활코딩
PoiemaWeb

0개의 댓글