1. Semantic Tag 란?
- Semantic의 사전적 의미는 "의미의", "의미론적인" 이다. 즉 Semantic Tag는 의미가 있는 태그라는 뜻이다.
2. Semantic Tag를 쓰는 이유?
1) 개발자가 의도한 태그의 의미가 명확하게 드러나게 하기 위함이다.
2) 코드의 가독성을 높여 유지/보수의 효율을 높인다
3) 검색엔진에 좀 더 의미론적인 정보를 전달하고 이를 통해 효과적인 크롤링과 인덱싱을 가능하게 한다. 즉 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확하게 함으로써 컴퓨터가 HTML 태그의 의미를 명확하게 해석하여 데이터를 활용하게 된다.
👉 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하기에 서비스를 제공하는 개발자의 입장에서는 매우 중요하게 고려해야할 사항이다. (SEO(Search Engine Optimization) 기본 가이드 참고!)
3. HTML 의 Tag
-
HTML의 태그에는 non-sematic Tag와 semantic Tag 가 있다.
✅ non-Semantic Tag
div, span 등이 있음. content에 대하여 어떤 설명도 하지 않음.
✅ Semantic Tag
form, table, img 등이 있음.content의 의미를 명확히 설명함 -
그 밖에 HTML5에서 새로 추가된 태그로는 아래와 같이 있다.
header: 헤더를 의미함.
nav: 내비게이션을 의미함.
aside: 사이드에 위치하는 공간을 의미함.
section: 본문의 여러 내용(article)을 포함하는 공간을 의미함.
article: 분문의 주내용이 들어가는 공간을 의미함.
footer: 푸터를 의미함
📝 Reference
https://poiemaweb.com/html5-semantic-web
