시맨틱(Semantic)이란 의미론적이라는 뜻을 가지며 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말한다. 즉, 시맨틱 마크업이란 의미를 잘 전달할 수 있도록 문서를 작성하는 것을 말한다.
시맨틱 마크업을 하기 위해서는 각 태그를 그 용도에 맞게 사용해야 한다.
- 헤더/푸터에
<header>와<footer>사용 - 메인 콘텐츠에
<main>과<section>사용 - 독립적인 콘텐츠에
<article>사용 - 최상위 제목으로
<h1>사용 - 순서가 없는 목록으로
<ul>과<li>사용 - 내비게이션에
<nav>사용 - 사이드 공간에
<aside>사용
Codepen에서 조금 더 명확한 구조를 파악할 수 있다.
위와 같이 HTML 태그는 각각의 태그에 맞는 의미를 지니고 있는데, 예를 들어 <header> 는 이 영역은 헤더의 영역이라는 의미를 나타내는 셈이다. 이 외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 태그가 가지는 의미 자체가 스타일을 나타내는 것이라면 이는 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업으로 볼 수 없다.
예를 들어, 동일한 효과를 부여하는 <strong> 과 <b> 태그가 있을 때 <b> 태그 자체는 bold를 의미하는 자체 스타일을 갖는 태그라고 볼 수 있다. 반면에 <strong> 태그의 경우는 태그 안의 내용이 다른 내용보다 더 강조되어야 한다는 의미를 있기 때문에 시맨틱 마크업에 적합하다고 볼 수 있는 것이다.
-
검색 엔진이 콘텐츠를 파악함에 있어서 시맨틱 마크업은 높은 우선순위를 얻는 것에 도움을 준다. 즉, 검색 엔진 최적화(Search Engine Optimization)에 유리하다.
-
웹 접근성 측면에서 웹 이용에 불편을 겪는 사용자들에게 정확한 정보를 제공하고 편의성을 높일 수 있다.
-
협업을 할 때,
<div>와<span>을 주로 사용하여 만든 코드보다 가독성이 더 좋다.
올바른 시맨틱 마크업의 사용은 더 나아가서는 사용자 경험에까지 영향을 미치는 간단하지만, 그 근간이 되는 시작점과 같다. 웹 사이트를 구성할 때 여러 상황을 고려해야 하기 때문에 100점에 가까운 시맨틱 마크업을 작성할 순 없겠지만, 항상 올바른 시맨틱 마크업을 작성할 수 있도록 지향하자.