[TIL] Semantic Tag & Semantic Web

semantic tag란?

• 뜻은 “의미론적 태그”란 의미로, 의미가 정해져있는 태그다.
• 요소는 Semantic 요소와 Non-semantic 요소로 나뉘는데,
  div, span과 같은 태그들은 단순히 요소의 영역을 정하는 Non-semantic Tag이다.

Semantic Tag 이전에는 <div class = “header”> <div class = “nav”>와 같이 구현했었지만, Semantic Tag가 생겨난 이후엔 <header>, <nav>와 같은 태그를 많이 쓰고 있다.

필요성

• 가독성을 높일 수 있다. div, span으로 구현할 때보다 의미가 훨씬 더 명확하다.
• 유지보수하기 쉽고, 검색엔진의 웹에 대한 접근성이 좋다.
  검색엔진이 웹 페이지들의 HTML 코드를 크롤링할 때, 일관된 프로토콜에 의해 접근하기 때문에 검색의 효율성과 속도를 높일 수 있다.

대표적인 Semantic Tag들

<header> 헤더를 의미한다
<nav> 내비게이션을 의미한다
<aside> 사이드에 위치하는 공간을 의미한다
<section> 본문의 여러 내용(article)을 포함하는 공간을 의미한다
<article> 분문의 주내용이 들어가는 공간을 의미한다
<footer> 푸터를 의미한다

semantic web이란?

간단히 말하자면, Semantic Tag를 이용하여 일관된 프로토콜로 구성한 웹이다.
웹에 산재한 정보의 의미를 파악하는 것이 아닌, 자동화된 기계가 해석할 수 있는 일종의 표준 의미정보 교환의 수단이 되는 것이 시맨틱 웹의 목적이다. 

img태그와 div태그에 background-image에 속성을 추가하는 것의 비교

• 개발자나 검색엔진이 HTML 코드를 들여다 볼 때, <img> 태그로 이미지를 링크하는 것이 '가독성'의 측면에서 훨씬 더 좋다.
  누가 코드를 보든 중요한 태그를 더 명확하게 파악할 수 있다.

• 또한 그렇기 때문에 유지보수하기가 쉽다.

• img 태그를 사용하면 alt 속성을 이용해서, 이미지 로드가 실패하는 등의 Error가 나도 용이하게 대처할 수 있으나, div태그는 그렇게 할 수가 없다.

• 따라서 정말 중요한 이미지를 로드해야 한다면 img 태그를 쓰기도 하고, 그렇지 않은 이미지라면 div를 써도 괜찮을 것이다.