sementic의 개념

semantic : (형)의미의, 의미론의

• 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에
  메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로
  구축하고자 하는 발상이다.

• 시맨틱 태그들은 검색엔진에게 의미론적 구조를 알려준다.
  (의미론적 구조=그 영역이 문서 구조에서 어떤 의미인지를 말해주는 것)

semantic tag의 구분

• non-semantic 요소
  div, span 등이 있으며 content에 대하여
  어떤 설명도 하지 않는다.

• semantic 요소
  form, table, img 등이 있으며
  content의 의미를 명확히 설명한다.
  
  

개념은 여기까지 하고 예시를 통해 semantic에 대해 더 알아보자.

semantic 예시

예시 01

ex)
<div>kang</div> //1행
<h1>kang<h1> //2행

div로 둘러싼 요소는 어떤 의미도 가지고 있지 않다.
개발자가 의도한 요소의 의미를 명확하게 나타내지 않는다는 거다.

그러나 h1으로 둘러싼 요소는 header(제목) 중 최상위 레벨이라는 것을
시각적으로 보여준다. 개발자가 의도한 요소의 의미가 전달된다는 것이다.

semantic 요소를 쓰는 이유

모두 설명은 다르겠지만 의미는 모두 같을 것이다.

1. 코드의 가독성을 높이고 유지보수를 쉽게한다.
2. 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를
   명확히 설명하는 역할을 한다

검색엔진은 의미있는 걸 좋아한다.
무지성으로 짠 코드보다 시멘틱 태그를 활용한 태그를
페이지 상단에 결과로 보여주는 것이 사용자를 위한 방법이기 때문이다.

개발자 입장에서 보자.
div로 도배된 코드를 만지는 게 쉬울까, header나 main, img등의
의미있는 태그를 사용한 코드를 만지는 게 쉬울까?

당연히 의미있는 태그를 만지는 것이 쉽고 편할 것이다.
가독성 증가와 코드를 수정해야 할 때 효율적이기 때문이다.

그렇다면 모든 상황에서 sematinc한 코드만 만드느냐?
그건 또 아니다.
아래의 예시를 보며 이해해보자.

예시 02

사이트에 이미지를 넣는 방법은 두 가지가 있는데

1. HTML에서 img 태그 사용
2. HTML에서는 div, CSS에서 background-image 사용.

둘 다 이미지를 넣는다는 부분에서 공통점이 있다.
그렇다면 차이점은 뭘까?

차이점으로는 오류에 반응한 결과가 다르다는 점이 있겠다.

img 태그를 사용했을 시

• 기본 이미지와 이미지를 설명하는 텍스트( =alt)가 뜬다.

CSS에서 background-image 사용했을 시

• 오류가 발생해도 아무 것도 생기지 않는다.

그러면 CSS로 이미지를 넣는 게 더 좋은 거 아냐? 라고 할 수 있지만
꼭 CSS가 더 좋은 것은 아니다.

결론은?

이미지로 하여금 사용자와 웹을 쉽게 이해시키고자 한다면
img 태그를 사용하는 것이 낫고,
디자인적 요소로만 이미지를 사용한다면 CSS의 background-image를
사용하는 것이 낫다.

따라서, 작업을 하는 상황에 따라 더 나아보이는 것을 사용하는 걸 추천한다.

정리

Semantic Web은 데이터로 가득한 웹에 다양한 메타데이터를 부여,
무지성 정보가 가득한 인터넷이 아닌 의미있는 정보망으로서의
역할을 할 수 있도록 만드는 방식이라는 것이다.

Reference
semanticWeb blog
PX blog
MDN