▶ 시멘틱태그란?
Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다.
따라서 시맨틱 태그란 의미가 있는 태그를 말한다.
div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.
그렇다면 의미있는 태그를 사용함으로써 얻는 장점은 무엇일까??
▶ 시멘틱태그의 장점
- SEO 최적화에 유리. (SEO: Search Engine Optimization)
검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.
- 효율적인 웹 접근성
일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)와 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.
- 유지보수의 용이성
의미가 있는 태그는 개발자에게 명확한 의미를 전달한다.
W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"고 한다.
예를 들어, 끝없는 div(div > div > div ...)를 탐색하는 것보다 시맨틱 태그를 사용한 코드 블록을 찾는 것이 훨씬 쉽다.
▶ 시멘틱태그의 종류
<header>
머리글, 제목, 헤더
<nav>
네비게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
<aside>
좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그
<section>
주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article>
기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용.
<footer>
바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
<address>
콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능
<hgroup>
제목과 관련된 부제목을 묶는 태그
<main>
이름처럼 문서 <body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
<details>
주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
<figure>
이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용
<figcaption>
<figure> 요소의 설명 캔션(caption) 정의
<mark>
현재 맥락에 관련이 깊거나 중요한 부분 강조
<time>
시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
<summary>
details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.
▶ 마치며
실무에서 본 시멘틱 태그는 header 와 nav, section, articel, footer 뿐이다. 블로그를 쓰면서 시멘틱 태그의 장점 중 SEO 최적화에 관련된 부분을 재고하는 기회가 되었다. 처음 프론트엔드를 하기로 공부했을 당시엔 이해 못하고 넘어간 부분들이 다시 공부했을 때 이해되는 쾌감, 지적 만족은 은은한 만족감을 갖게 한다.
