[HTML] Semantic HTML이란?

What is Semantic HTML?

 

시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻이다.

 

<div> 태그는 non-semantic 태그라고 할 수 있고, 

 

<table>, <article> 등 이름만 보고 태그의 역할을 유추 할 수 있는 태그는 semantic 태그라고 볼 수 있다.

 

예전 HTML 문서들을 보면 <div></div> 를 남발한 non-semantic한 문서들이 많았다고 한다.

 

하지만 지금은 코드만 봤을 때도 왜 사용했는지 유추가능한 Semantic HTML을 많이 쓴다고 한다.

 

---

 

WHY?

 

• 검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. (SEO 참조).
• 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용.
• 의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉽다.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안.
• 의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영.

 

References

---

developer.mozilla.org/ko/docs/Glossary/Semantics

hianna.tistory.com/278