Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 갖는다.
즉, 직역하면 의미있는/의미론적인 웹'이라는 말인데 내포된 의미는 무엇일까?
👇🏻진짜 의미!👇🏻
문서의 의미에 맞게, 기계가 이해할 수 있는 형태로 제작된 웹이다.
인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라 정보 검색시 불필요하거나 연관성이 덜한 정보를 거를 필요성이 불가피해졌다.
따라서 단순히 사람만이 웹의 정보를 파악하는 것이 아닌, 자동화된 기계가 의미를 해석하고 정보 간의 관계를 이해할 수 있도록 하는 것이 시멘틱 웹의 목적이다.
HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데, 기존에
<div id="header"> 내용 </div>
로만 나타낼수 있던 머리 부분을
<header> 내용 </header>
로 쉽게 더 의미론적으로 나타낼수 있게 되었다.
이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이다.
(코드가 짧아지고 가독성이 높아짐!)
Semantic tag : 의미를 가지는 태그
non-시맨틱 요소 예시 :
div
span
등이 있고, 이 태그들은 content에 대하여 어떤 설명도 하지 않는다.
시맨틱 요소 예시 :
img
header
footer
main
table
nav
aside
section
article
등이 있고, content의 의미가 무엇인지 명확하게 설명한다.
출처: https://junbucks7.tistory.com/69
출처: https://fierycoding.tistory.com/55
출처 : https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9