Semantic Tag ( 시맨틱 태그 )

Semantic Tag ( 시맨틱 태그 )

Semantic ;
형용사
1. 언어- (주로 명사 앞에 씀)
의미의, 의미론적인

-> 언어 의미를 가지고 있는 태그

기존의 컴퓨터의 언어는 사람이 읽기가 쉽지 않은, 직관적이지 않은 경우가 많았다.

<div>head contents</div>
<div>article contents</div>
<div>footer contents</div>

이런 식으로 태그 자체만으로는 바로 태그의 역할을 확인하기 힘들어서 class 속성이나 ID속성을 따로 붙혀줬었다.

태그가 하는 역할을 태그의 이름으로 만들어 사람들이 봤을때도 직관적으로 이해되고,
컴퓨터가 봤을때도 알기 쉽도록 하자는 목적을 가지고 HTML5에서 만들어진 것이 이 바로 시맨틱 태그이다.

전술했던 div 태그들 대신 시멘틱 태그들을 이용하면,

<header>head contents</header>
<article>article contents</article>
<footer>footer contents</footer>

이런 식으로 시맨트 태그들을 이용하면 클래스 속성을 이용하지 않더라도 각각의 태그 안에 있는 컨텐츠들이 어떤 컨텐츠인지 유추가 빠르게 가능할 것이다.

이 시맨틱 코드들에 강제성은 없다.
예를 들어 nav 태그는 해당 페이지의 페이지 내 또는 다른 페이지로의 링크의 구획인데 구축한 웹사이트에 nav태그를 쓴다고 하더라도 모든 링크가 이 nav 코드 안에 들어가야 하는 것은 아니라는 말이다.

그럼에도 사용하는 이유는 자신 또는 후에 동료가 해당 코드를 봤을때 더 빠르게 이해할 수 있고 이는 생산성 향상에 기여하기 때문이다.

HTML의 시맨틱 태그는 100여개에 달하지만 대표적인 것을 몇개 소개하자면,

<header>제목, 로고, 이름 등 소개 및 탐색에 도움을 주는 컨텐츠가 들어간다.</header>
<nav>메뉴, 목차 등 현재 페이지 내 또는 다른 페이지로의 링크가 모인 구획이다.</nav>
<aside>문단과 간접적인 관계가 있는 컨텐츠가 들어간다.</aside>
<main>페이지의 주요 컨텐츠 영역이다.</main>
<article>블로그 포스트, 뉴스, 매거진 등 주로 읽는 컨텐츠가 들어간다.</article>
<section>문서 내 독립적인 영역을 나타내며, 이보다 더 잘 표현할 태그가 없을때 주로 사용한다.</section>
<form>로그인과 같은 정보 제출을 위한 구획을 표시</form>
<footer>일반적으로 하단에 위치하며 저작권 정보, 관련 문서 등의 내용을 담는다.</footer>

등이 있다.

Reference

네이버 영어사전 https://endic.naver.com/
MDN https://developer.mozilla.org/