이번 주제는 시맨틱 태그(semantic tag)와 SEO 테마입니다.
시맨틱 태그
시맨틱(semantic)은 관계 및 연관(relation)과 의미론(meaning)을 뜻하는 단어입니다. 한 마디로 시맨틱 태그는 HTML 태그 중 해당 태그를 어떠한 의미로 사용한 건지 웹 브라우저에 명확하게 알리는 역할을 합니다.
예를 들면, 모든 엘리먼트가 div 태그로 구성되어 있으며, 그 중에 특정한 하나의 div 태그가 주제를 포함하는 헤더라고 가정해 봅시다.
이때 모든 태그가 div이다보니, 특정 태그가 헤더라고 강조를 할 수 있는 방법이 무엇일까요? 클래스나 아이디를 header라고 설정하면 될 것이라고 생각하는 분은 없을 것입니다.
이처럼 해당 태그가 중요하다는 것을 알리거나, 무엇을 의미하는지 브라우저가 알 수 있도록 등장한 것이 시맨틱 태그입니다. 시맨틱 태그는 로봇뿐만 아니라, 유지보수를 하는 과정에서도 문서를 쉽게 이해할 수 있도록 도움을 주는 장점이 있습니다. 시맨틱 태그를 사용함으로써 다음과 같이 코드를 직관적으로 분석할 수 있답니다.
시맨틱 태그를 사용하지 않는 경우
<div>
<div>title</div>
<p>content</p>
</div>시맨틱 태그를 사용하는 경우
<article>
<header>title</header>
<p>content</p>
</article>시맨틱 태그
상기의 예제만 보아도 시맨틱 태그의 역할이 어떤 것인지 짐작이 가실 겁니다. 실제로 시맨틱 태그는 100여 개가 넘기 때문에 모든 코드를 리뷰하지는 않을 것이고, 다음의 태그 중 핵심으로 주요하게 사용되는 메인, 헤더, 푸터, 섹션, 아티클 등의 태그에 대해 알아보도록 하겠습니다.
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <form>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
header 시맨틱 태그
헤더 태그는 머릿말이라는 단어에서도 볼 수 있듯이, 핵심 내용의 소개를 주로 나타냅니다. 그리하여 로고, 검색창, 저자 정보 등을 간략히 나타내는 편입니다.
헤더와 아티클을 별개로 사용하며, 아티클 안에 헤더를 추가하는 경우는 다음과 같습니다.
<header>
<a></a>
</header>
<article>
<header>
<h1></h1>
</header>
<p></p>
</article>하나의 아티클과 아티클 내에 헤더를 위치한 예제입니다.
<article>
<header>
<h2></h2>
<p></p>
</header>
<p></p>
</article>article 시맨틱 태그
아티클 태그는 문서, 페이지, 앱, 또는 사이트에서 독립적인 구분의 집합체를 나타내며, 주로 게시물, 기사, 블로그, 카드 등의 내용을 담습니다.
아티클 내에서 헤더1로 주제를 표시하며, 세부 아티클을 추가하는 방법입니다. 각 아티클은 헤더2와 단락으로 구성이 되는 방식 예제입니다.
<article>
<h1></h1>
<article>
<h2></h2>
<p></p>
</article>
<article>
<h2></h2>
<p></p>
</article>
<article>
<h2></h2>
<p></p>
</article>
</article>
아티클에서 비슷한 양식을 가지고 있는 부분을 각 섹션으로 구분하는 예제자료입니다.
<article>
<h2></h2>
<section>
<h3></h3>
<p></p>
</section>
<section>
<h3></h3>
<article>
<h4></h4>
<p></p>
<footer>
<p></p>
</footer>
</article>
<article>
<h4></h4>
<p></p>
<footer>
<p></p>
</footer>
</article>
</section>
<footer>
<p></p>
</footer>
</article>footer 시맨틱 태그
푸터 태그는 보통 각 섹션의 저자 정보, 저작권, 또는 관련 문서 링크를 안내하는 용도로 사용합니다.
다음과 같이 아티클 마지막에 푸터를 설정하여 사용할 수 있습니다.
<article>
<h1></h1>
<ol>
<li></li>
</ol>
<footer>
<p></p>
</footer>
</article>
section 시맨틱 태그
섹션은 문서의 독립적인 부분을 나타내는 태그이며, 아티클인지, 헤더인지, 푸터인지 정의하기 어려울 때 흔히 사용하는 태그입니다. 특징은 웬만한 시맨틱 태그는 헤더 태그를 포함한다는 것입니다.
다음과 같이 섹션 태그 각각이 헤딩과 단락을 포함하는 예제 자료가 있습니다.
<h1></h1>
<section>
<h2></h2>
<p></p>
</section>
<section>
<h2></h2>
<p></p>
</section>nav 시맨틱 태그
nav 태그는 문서 내, 또는 외부 링크를 안내하는 내비게이션입니다.
다음과 같이 내비게이션 태그를 안내할 수 있습니다.
<nav>
<ol>
<li><a></a></li>
</ol>
</nav>
<h1></h1>
<p></p>내비게이션 헤딩을 안내하고, 각 단락마다 사이사이에 앵커 태그를 입력한 예제 자료입니다.
<nav>
<h2></h2>
<p><a></a></p>
<p><a></a></p>
<p><a></a></p>
</nav>aside 시맨틱 태그
문서의 본문과 관계 있는 부분을 aside 태그로 나타낼 수 있습니다. 흔히 사이드바라고 지칭하는 부분을 aside 태그로 나타낼 수 있답니다.
<p></p>
<aside><p></p></aside>
<p></p>
아티클 내부에 어사이드를 포함한 예제 자료입니다.
<article>
<p></p>
<aside><p></p></aside>
<p></p>
</article>main 시맨틱 태그
main 태그는 문서의 핵심 영역과 문서가 말하는 가장 중심이 되는 곳을 직접적으로 가리킵니다. 특징은 hidden 속성이 없는 메인 태그는 오직 하나만 와야 한다는 것입니다. 간단히 생각하면 메인 태그는 하나라고 해도 무방하답니다.
헤더 태그와 동격에 메인 태그를 위치한 예제는 다음과 같습니다.
<header></header>
<main>
<p></p>
<p></p>
</main>
메인 태그 내에 여러 개의 아티클을 포함한 예제입니다.
<!-- other content -->
<main>
<h1></h1>
<p></p>
<article>
<h2></h2>
<p></p>
<p></p>
<p></p>
</article>
<article>
<h2></h2>
<p></p>
<p></p>
<p></p>
</article>
</main>
<!-- other content -->SEO에 맞는 테마 구조, 시맨틱 태그
그외에도 address, hgroup 등 여러 태그가 존재합니다.