시멘틱 웹과 시멘틱 태그란 무엇일까?
• 그 전에, Semantic ? 🙄
Semantic : 1.의미의, 의미론적인
사전적인 뜻으로는, "의미의, 의미론적인" 이라는 뜻을 가지고 있다.
시멘틱 웹&시멘틱 태그를 직역하면 의미론적인 웹, 그리고 태그가 되겠다.
그래서 시멘틱 웹과 시멘틱 태그가 왜요?
• 한 마디로, 정확한 정보 전달을 하기 위함이라고 할 수 있다.
우선 정보의 홍수시대에 살고 있는 우리들은 정보가 부족해서 골치가
아프기보단, 정보가 넘쳐남에 편두통이 일곤 한다.
그러므로 우리의 정보를 필요로 하는 이들을 위해 작성하고자 하는 것의
의미가 무엇인지 정확히 전달해야할 필요가 있다.
위와 같은 이타적인 의미 외에도,
마케팅적으로도 아주 의미가 있다. 바로 💡검색엔진 최적화 때문이다.
SEO(검색엔진 최적화: Search Engine Optimization)
내가 인터넷을 통해 팔고자 하는 것이 신발인데 다른 사람들이
'신발'이라는 키워드를 검색해도 내 제품이 안나온다면,
그것 또한 골치일 것이다.
위와 같은 연유에서 과거 홍길동과는 다르게, 현재 우리들은
신발을 신발이라고 부르며 옷을 옷이라고 불러야 할 필요가 있다.
그걸 어떻게 하는데요?
신발
신발
욕 아니다. 예시 키워드를 처음부터 잘못 든 것 같기도 하다.
아무튼, 두 키워드는 인간인 우리 눈에는 매우 똑같아 보여도
사람들이 검색하게 될 검색엔진의 로봇한테는 둘은 전혀 다른 키워드이다.
<font size="4"><b>신발</b></font>
<h4>신발</h4>내가 코드로 작성할 때 위와 같이 작성했기 때문이다.
구분을 쉽게 하기 위해, 색으로 신발키워드를 달리하겠다.
빨강 신발은 논-시멘틱, 파랑 신발은 시멘틱 키워드이다.
신발은 의미론적, 즉 시멘틱적으로 접근하면 어떠한 의미도 갖고 있지 않다.
로봇한테 이것은 그냥 폰트이며 컨텐츠에 대한 정확한 설명이 없다.
non-cemantic 이라고 할 수 있다.
신발은 h tag로 읽히게 될 것이고 이는 분명한 의미가 있다.
h tag는 header를 의미하고, 헤더는 말 그대로 헤더라는 의미를 갖고있기
때문이다. 머리말에 해당하는 신발로 로봇에게 인식될 것이며,
이는 명확히 cemantic이라고 할 수 있겠다.
오호라, 어떤 것들이 있나요?
• 주요한 것들 위주로 정리✨
| Tag | Description |
|---|---|
| header | 헤더(머리말)를 의미. |
| nav | 내비게이션을 의미. |
| aside | 사이드 위치를 의미. |
| section | Article(내용)들을 포함하는 공간을 의미. |
| articel | 본문 내용이 들어가는 공간을 의미. |
| footer | 최하단 푸터 부분을 의미. |
| img | 이미지 태그를 의미. |
위 태그 중 하나를 예를 들어 추가 설명하자면 웹페이지에 이미지를
넣는 방법에는, HTML에서 img 태그를 사용하는 방법과
CSS에서 background-img를 사용하는 방법이 있는데,
명확히 해당 태그가 이미지임을 전달하는 HTML의 img 태그와
CSS의 꾸며주는 역할의 background-img와는 위와같이 설명한 것들로
인해서 큰 차이를 가지고 있음을 알 수 있다.
결론👀
위와 같은 의미론적인 태그(Semantic tag)들로 구성되어 짜임새 있게
만들어진 웹이 곧 의미론적인 웹(Semantic Web)이라고 할 수 있으며,
이와 같은 웹을 제작할 수 있게 우리들은 노력해야함을 결론으로 들며
마무리 하겠다👍
