시맨틱 웹과 시맨틱 태그

정진우·2022년 5월 9일
0

TIL

목록 보기
46/54
post-thumbnail
post-custom-banner

위의 사진을 보고 코드를 예상해보면 똑같은 코드를 사용했다고 생각할 수 있다. 하지만, 같은 코드가 아니다.

  <font size="6"><b>JUST CODE</b></font>
  <h1>JUST CODE</h1>

첫 번째 행에서는 font 태그와 b 태그를 사용해서 제목을 표현했고,
두 번째 행에서는 h1 태그를 사용해서 제목을 표현했다.


두 가지 방법 모두 사용자 입장에서 생각했을 때는 똑같다고 생각할 수 있겠지만, 같이 일하는 동료나 컴퓨터 입장에서 생각했을 때는 엄청난 차이가 있다.


두 번째 방법은 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.
이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

또한, 컴퓨터는 검색할 때 검색 로봇이 정보를 수집하는데 그 정보는 결국 웹사이트의 HTML 코드이다. 그리고, 검색엔진은 로봇이라는 프로그램을 이용해 웹사이트의 정보를 수집하고 사용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만든다.

만약, 첫 번째 방법으로 작성된 HTML 코드를 컴퓨터가 해석한다면 글자라는 의미밖에 없기 때문에 인덱스를 생성하지 못한다. 하지만, 두 번째 방법으로 작성된 HTML 코드를 컴퓨터가 해석한다면 제목이라는 의미를 가진 h1 태그를 웹문서의 중요한 제목으로 인식하고 인덱스를 생성할 확률이 높다.


두 번째 방법에 사용된 h1 태그를 시맨틱 태그라고 하며, 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
시맨틱 태그에는 div, span 등이 있으며, 콘텐츠에 대해 어떤 설명도 하지 않는 논-시맨틱 태그에는 form, table, img 등이 있다.


시맨틱 태그를 활용하면 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하고 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축할 수 있으며, 그것을 시맨틱 웹이라고 한다.

profile
프론트엔드 개발자를 꿈꾸는
post-custom-banner

0개의 댓글