시맨틱 태그(Semmantic Tag)란 무엇일까?

시맨틱 태그란 'Semantic'의 뜻인 '의미있는'에 맞게 의미가 담겨있는 태그 를 의미한다. 단순히 기능적 의미만을 가진 다른 태그들과는 다르게, 시맨틱 태그는 포함한 컨텐츠의 유형이나, 사이트에서의 위치관계와 같은 특정 의미를 가지고 있어 그 목적과 의도에 맞게 사용해야한다.

HTML 페이지를 작성할 때, 시맨틱 태그는 div 태그와 동일한 기능을 가지고 있지만, 태그에 의미를 부여하여 웹사이트의 구조를 이해하기 쉽도록 도와주는 기능을 한다.

시맨틱 태그의 종류

시맨틱 태그에는 대표적으로 header, nav, main, footer, article, aside, section 등이 있다.

1. header : 페이지의 위쪽에서 로고나 제목, 메뉴 같이 영역의 도입부를 담고 있는 부분이다. 한 페이지 내의 여러 영역에서 header가 존재할 수 있고, 이는 다른 태그들도 마찬가지이다.

2. nav : 웹 사이트의 메뉴나 탭과 같은 탐색 링크가 포함된 부분이다. 예를 들어, 네이버에서 메일, 카페, 블로그와 같이 하위 홈페이지로 이동하는 링크들의 목차가 nav 라고 볼 수 있다.

3. main : 웹 사이트의 본격적인 내용이 담긴 부분이다. 다른 시맨틱 태그들과는 다르게 한 페이지 내에서 한번 쓰일 수 있다.

4. footer : 웹 사이트의 맨 아랫쪽에서 다양한 정보를 담고 있는 부분이다. 주로 회사의 정보나 고객센터, 개인정보처리방침 등과 같은 부수적인 정보를 담고있는 경우가 많다.

5. article : 블로그 글이나 게시판의 글, 댓글 하나의 내용과 같이 하나의 독립적인 내용으로 이루어진 부분이다.

6. aside : 옆에 위치하는 컨텐츠를 담고있는 부분이다. 주로 사이드바가 위치시키기 위해 사용한다.

7. section : 같은 주제를 가지는 그룹들을 나누는 부분이다. 한 주제에 대해서 여러 컨텐츠들을 다룰 때 사용한다.

위의 나열한 것들 외에도 시맨틱 태그는 더 다양하므로, 검색하여 더 많은 종류를 찾아보길 권장한다.

시맨틱 태그의 장점

시맨틱 태그는 단순히 웹사이트의 구조를 이해하기 위해 사용하는 것만은 아니다. 이를 적절히 사용했을 때 다양한 장점이 있다.

1. 검색 최적화(SEO): Google과 같은 검색엔진에서 상단에 위치할 수 있도록 영향을 준다. 관련 키워드와 문구에 대해서 웹 페이지를 최적화 하는데 도움을 주고, 이를 통해 검색결과 상에 노출도를 높여 더 많은 트래픽을 유도할 수 있다.

2. 웹 접근성(Web Accessibility, A11y): 시각장애인용 스크린리더가 읽을 수 있게끔 할 수 있기때문에 장벽없는(Barrier-free) 인터넷 환경을 조성하는데 도움을 준다.

3. 개발자 관점에서 코드 이해가 용이함: 웹 페이지는 단순히 사용자만 보는 것이 아니라, 개발자도 같이 보는 것이기 때문에 코드 상에 의미를 부여하는 것은 개발자가 웹 페이지를 이해하는 것을 도와준다. 이를 통해 협업이나 유지보수 등과 같은 개발적인 부분에서도 도움이 된다.