시맨틱 태그는 HTML5에서 처음 등장하는 tag들이다. div에 class 값을 붙여서 스타일링하면, 모든 작업이 가능하다.
그러나, 모든 것을 div로 작성하는 것보다 좀 더 효율적인 방법을 필요했고, 브라우져도 다른 개발자도 어느 부분이 제목이고 본문인지 한 눈에 이해할 수 있게하는 방법을 생각하게 됐다.
그래서, 그런 특정한 의미를 가지고 있는 tag들이 HTML5에서 새로 등장하게 됐다.
‘의미가 있는 태그’
시멘틱 태그가 중요한이유
1. SEO ( Search engine optimization )
검색을 최적화하기 위해서 우리가 제목, 부제목, 시멘틱 테그를 잘 활용한다면, 특정 키워드로 검색했을 때, 내가 만든 웹싸이트가 검색창에 노출될 수 있다. 다시 말해서, 브라우저의 검색 엔진이 내가 만든 웹싸이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수있다.
2. 웹 접근성
웹페이지를 시각적이 아니라, 음성으로 읽어주는 "스크린리더"를 이용하거나 또는 키보드만을 이용해서 내가 만든 웹싸이트를 이용하는 경우, 적절한 시멘틱 태그로 잘 만들어진 웹싸이트라면 스크린리더이든, 키보드만을 사용해서 동작하든 문제없이 동작할 수 있다.
3. 유지보수성
단순히, div tag로만 모든 구조를 짜는 것보다 더 한 눈에 알아볼 수있기 때문에, 다른 개발자들이 코드를 유지보수하기가 더 편해진다.