1. semantic tags란 무엇인가?
semantic : 의미의/의미론적인
w3school.com 정의
출처 : https://www.w3schools.com/html/html5_semantic_elements.asp
Semantic elements = elements with a meaning.
semantic 요소 = 의미를 지닌 요소
semantic 요소는 브라우저와 개발자 모두에게 그것의 의미를 명확하게 설명한다.
semantic 요소의 예: form, table, article 로 그 콘텐츠(내용)를 명확히 정의한다.
non-semantic 요소의 예: div와 span이 있다.
이 태그는 가지고 있는 콘텐츠(내용)에 대해 아무것도 말하지 않는다.
위의 정의를 보았을 때 semantic 태그란 의미를 지닌 태그라는 것을 알 수 있다.
태그의 이름? 형태? 만으로 그 내용을 추측할 수 있는 태그를 말한다.
(태그의 이름에 그 의미(내용)이 들어간 태그)
대표적인 예로는,
img 태그가 있다. img 태그는 이미지다.
table 태그도 있다. table 태그는 테이블(표)이다.
태그만 보아도 이해할 수 있다.
div 태그의 내용, span 태그의 내용을 추측하긴 어렵다.
이러한 태그의 내용으로 텍스트나 이미지, 또는 표가 있을 수도 있다.
사람은 이해하기 힘들지만 컴퓨터는 가능하지 않을까?
2. semantic tags를 쓰는 이유
Why Semantic Elements?
According to the W3C: "A semantic Web allows data to be shared and
reused across applications, enterprises, and communities."
_왜 semantic 요소인가?
W3C에 따르면, "시맨틱 웹은 애플리케이션, 기업, 지역사회에서 데이터를 공유하고
재사용할 수 있도록 한다."
왜?
시맨틱 웹이 아니면 데이터를 공유하거나 재사용할 수 없는가?
아니면, 시맨틱 웹이 데이터를 공유하거나 재사용을 더 원할하게 만들어주는건가?
시맨틱 웹이란 무엇인가?
https://translate.google.com/translate?hl=ko&sl=en&u=https://www.w3.org/standards/semanticweb/&prev=search
W3C는 고전적인 "문서 웹"외에도 데이터베이스에서 찾을 수 있는 데이터 유형인
"데이터 웹"을 지원하는 기술 스택을 구축하는 데 도움을 주고 있다. 웹 데이터의 궁극적인 목표는 컴퓨터가 보다 유용한 작업을 수행하고 네트워크를 통해 신뢰할 수 있는 상호작용을 지원할 수 있는 시스템을 개발할 수 있도록 하는 것이다.
"시맨틱 웹"이라는 용어는 W3C의 링크 된 데이터 웹에 대한 비전을 의미한다.
시맨택 마크업 사용의 이점
MDN web docs에선 시맨틱(의미론적) 마크업을 사용하면 다음과 같은 이점이 있다고 한다.
https://developer.mozilla.org/ko/docs/Glossary/Semantics
-
검색 엔진은 의미론적 마크업을 페이지의
'검색 랭킹에 영향을 줄 수 있는 중요한 키워드'로 간주한다. -
시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때
'의미론적 마크업을 푯말로 사용'할 수 있다. -
의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div들을 탐색하는 것보다,
'의미있는 코드 블록을 찾는 것이 훨씬 쉽다'. -
개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
-
의미있는 이름짓기(semantic naming)는 적절한 사용자 정의 요소/구성 요소의
이름짓기(naming)를 반영한다.
MDN에선 이점에 대한 설명과 함께 SEO에 대한 링크를 남겼다.
SEO란 무엇인가?
https://developer.mozilla.org/ko/docs/Glossary/SEO
SEO(Search Engine Optimization) : 검색 엔진 최적화
SEO는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정이다. 검색 랭크 개선이라고 한다.
검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성한다.
검색 결과에 보이는 것은 바로 그 콘텐츠 색인이다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며
해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출돼(전자상거래 광고시) 수익으로 연결될 수도 있다.
시맨틱 요소(태그든 구조든)는 컴퓨터의 작업을 더 쉽게 할 수 있도록 도와준다.
컴퓨터의 사용자는 사람이다.
컴퓨터가 작업을 더 쉽게 하여 생산성이 올라가면 그 혜택은 사람이 받는다.
이는 광고 노출, 검색 랭크와 같은 수익적인 측면에서 부터
시각 장애인을 위한 안내, 지역 사회내 데이터 공유와 같은... 인도적? 단어가 기억 안 나는데.
아무튼 시맨틱으로 홍익인간 할 수 있다는 이야기이다.
