시맨틱 태그(Semantic Tag) VS 태그(non-semantic)

시맨틱 태그 : HTML5에서 도입된 태그이름로 그 태그의 의미를 알 수 있도록 제공한 태그.
<nav>, <table>등 그 태그 안에 있는 컨텐트(content)가 어떤 내용이 올지 유추할 수 있도록.
non-semantic tag의 예 : <div>등

그러면 시맨틱 태그의 장점? 쓰면 좋은 이유는? :

1. 검색 엔진 최적화(search engine optimization, SEO) : 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 함
2. 코드 관리(개발자간의 협업에서나 관리 등)
   
   

예)

<img> 와 <div><backgroud-image:></div> : SEO 효율 UP!

서치엔진에서 <img>는 검색되도 <div><backgroud-image:></div>는 검색되지 않을 수 있다.

* 크롤링을 할때도 tag를 이용하여 원하는 내용을 할 수 있는데
만약 원하는 내용이 특정 태그에 있다면 그 내용을 수집하기가 편리할 것이다.
즉, 고의로 본인들의 정보를 노출시킬 필요가 있는 것(광고, 기사 등)에는 더욱 유용할 것이다.