Semantic Web & Semantic Tag

💡 Semantic Web & Semantic Tag 를 알아보자

1. Semantic Web

Semantic 이란 무엇일까요?

의미의, 의미가 있는~ 이라는 뜻입니다.

그렇다면 Semantic Web 이란 무엇일까요?

'의미있는 웹', 문서의 의미에 맞게, 어플리션의 의미에 맞게 구성된 웹 정도로 이해하면 되겠죠.

Semantic Web의 목적

웹 기술이 발전하면서 인터넷이 실생활까지 확산되는 기폭제 역할을 했습니다. 이로인해 정보 검색시 불필요하거나 덜 연관성있는 정보를 거를 필요성이 대두되었습니다.
결론적으로, 단순 사람이 웹의 정보를 파악하는 것이 아니라, 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 탄생한 것이 Semantic Web 입니다.

2. Semantic Tag(Semantic Markup)

/* 시멘틱 태그 미사용 예시 */
<div>
  <div style="font-size: 2em; font-weight: bolder">귀여운 강아지</div>	
</div>

/* 시멘틱 태그 사용 예시 */
<header>
  <h1>귀여운 강아지</h1>	
</header>

예를들면 문을 보면 문 손잡이를 통해 어디론가 나가고 들어오는것라고 인식하죠? 또 다른 예로 주전자를 보면 손잡이를 잡고 물을 끓이고 붓는다고 인식하고 이해합니다.
이처럼 우리의 모든 사물과 사인들이 각각 의미를 가지고 있는것 처럼 HTML의 태그에도 저마다 의미를 지니고 있습니다.

Semantic Tag 가 중요한 3가지 이유

1. SEO(Search Engine Optimization)
검색을 최적화하기 위해서 제목과 부제목, 시멘틱 태그들을 잘 활용한다면 사람들이 검색할때 보다 효율적으로 알아볼 수 있습니다.

2. Accessibility(웹 접근성)
음성으로 읽어주는 스크린리더 혹은 키보드로만 웹사이트를 이용하는 경우 적절한 시멘트로 만들어진 웹사이트라면 잘 작동할 수 있습니다.

3. For us, 개발자들을 위해 + Maintainability
HTML코드를 바라봤을때 한눈에 이해가 되어야하며, 유지보수성도 너 높여서 개발할 수 있습니다.

🍀 Conclusion

내가 나타내고자 하는 컨텐츠에 더 의미있는 태그를 사용할 수 있는지 챙겨보고 확인하자!