Semantic Web & Semantic tag

-·2022년 10월 11일
0

Semantic web 이란?

Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 갖는다.
즉, 직역하면 의미있는/의미론적인 웹'이라는 말인데 내포된 의미는 무엇일까?
👇🏻진짜 의미!👇🏻
문서의 의미에 맞게, 기계가 이해할 수 있는 형태로 제작된 웹이다.

Semantic web의 목적은?

인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라 정보 검색시 불필요하거나 연관성이 덜한 정보를 거를 필요성이 불가피해졌다.
따라서 단순히 사람만이 웹의 정보를 파악하는 것이 아닌, 자동화된 기계가 의미를 해석하고 정보 간의 관계를 이해할 수 있도록 하는 것이 시멘틱 웹의 목적이다.


HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었는데, 기존에

<div id="header"> 내용 </div>

로만 나타낼수 있던 머리 부분을

<header> 내용 </header>

로 쉽게 더 의미론적으로 나타낼수 있게 되었다.
이는 div와 id=header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이다.
(코드가 짧아지고 가독성이 높아짐!)


non-semantic tag vs Semantic tag

Semantic tag : 의미를 가지는 태그

non-시맨틱 요소 예시 :

div span 등이 있고, 이 태그들은 content에 대하여 어떤 설명도 하지 않는다.

시맨틱 요소 예시 :
img header footer main table nav aside section article등이 있고, content의 의미가 무엇인지 명확하게 설명한다.

결론적으로 Semantic tag을 써야한다, 왜?

  1. 이것들을 통해 뭐가 제목인지 뭐가 중요한 내용인지 구조를 알려준다.
  2. 검색에 도움을 준다.(검색엔진 최적화)
    3.스크린 리더 같은 장애인 지원 프로그램들이 제목이라고, 메뉴 바 라고 인식해서 웹 접근성에 도움을 준다
  3. 시맨틱하게 HTML을 짜는것이 웹 표준을 잘 지키는것이다..😉

출처: 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

0개의 댓글