[HTML] 시맨틱 태그

오늘은 시맨틱 웹 및 태그에 대해서 작성하겠다.

시맨틱 웹이란?

웹 3.0이라고도 불리며 W3C에서 설정한 표준을 통해 웹을 확장한 것이다. 시맨틱 웹의 목표는 인터넷상의 데이터를 다양한 기계들이 읽고 이해할 수 있도록 만드는 것이다. 

기존 웹은 문서 단위로 정보를 주고받지만 시맨틱 웹은 문서 구조를 알고 있다.

 

기존의 우리가 사용한 <p> <h1> <img>와 같은 태그들은 문서의 구조에 대한 정보를 주지 않는다.

 

시맨틱 요소들은 브라우저에게 요소의 의미 및 목적을 명확하게 알려주는 요소이다. 

 

지금부터 시맨틱 요소들에 대해서 설명하겠다.

 

시맨틱 요소

 

• header : 문서의 머리말
• hgroup : h1에서 h6요소들의 그룹
• nav : 내비게이션 링크
• article : 문서의 내용이나 블로그의 포스트
• section : 문서의 섹션
• aside : 사이드 바와 같이 옆에 위치하는 내용
• footer : 문서의 꼬리말
• figure : 그림이나 도표
• time : 날짜와 시간을 표시 

 

간단히 말하면 기존의 웹은 어질러진 책상이라고 생각하면 시맨틱 웹은 잘 정돈된 책상이라고 생각하면 된다.

기존의 웹 vs 시맨틱 태그 사용 웹

왼쪽 기존 웹 오른쪽 시맨틱 웹

 

시맨틱 웹의 구조 

우리가 흔히 보는 웹사이트의 구조는 시맨틱 웹의 구조와 동일하다.

 

이상이다.