[HTML] 시맨틱(Semantic) 태그를 사용하자

 

Semantic tag

시맨틱(Semantic)의 사전적 의미는 '의미론의, 의미의' 이다. 즉 시맨틱 태그(Semantic tag)는 '의미가 있는 태그' 라는 뜻을 가진다. 웹 사이트에서 이 시맨틱 태그들은 브라우저와 개발자 사이에서 태그 이름으로 특정 의미를 부여하는 역할을 한다. 그렇다면 이러한 시맨틱 태그를 왜 써야할까? Google이나 Naver 같은 큰 검색 사이트에서는 각자의 검색 엔진을 통해 웹 사이트의 정보를 수집한다.(크롤링.) 이러한 검색 엔진의 크롤링은 각 웹 사이트의 HTML 코드를 보고 판단하여 이루어진다. 이때 시맨틱 태그가 아닌 의미 없는 태그를 사용한다면 수집이 잘 안될뿐더러 외관상 좋지 않다. 

---

HTML5 Semantic tag

만약 header, footer, nav 등을 나타낼 때, 시맨틱 태그를 사용하지 않으면 <div id="header">, <div id="footer">, <div id="nav"> 와 같이 id나 class의 이름을 추가하여 작성할 수 있다. 이렇게 코드 작성을 하면 가독성이 떨어지고, 코드의 재사용이 힘들다.

 

<div id="header"></div>
<div class="section">
	<div class="article">
		<div class="figure">
			<img>
			<div class="figcaption"></div>
		</div>
	</div>
</div>
<div id="footer"></div>

 

HTML5 에서 추가된 시맨틱 태그(Semantic tag)

• <nav>
• <section>
• <article>
• <header>
• <footer>
• <aside>
• <main>
• <figure>
• <figcaption>
• <mark>
• <details>
• <summary>
• <time>

위의 코드를 시맨틱 태그를 이용해서 작성하면 아래와 같이 작성할 수 있다.

 

<header></header>
<section>
	<article>
		<figure>
			<img>
			<figcaption></figcaption>
		</figure>
	</article>
</section>
<footer></footer>

 

훨씬 알아보기 쉽다. 그러면 w3schools를 참고하여 각 시맨틱 태그의 용도를 알아보자.

---

<section>

section 태그는 문서 안에서 구역을 지정한다. section 태그 안에 section 태그가 들어갈 수도 있다. <div id="section">

 

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

 

<article>

단어 뜻 대로 기사, 내용을 작성할 때 사용한다. article은 웹 사이트의 다른 요소들에 독립적이게 쓰일 수 있다. <div id="article">

 

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

 

<header>

문서나 섹션의 머릿글을 작성할 때 사용한다. <div id="header">

 

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

 

<footer>

문서나 섹션의 바닥글을 작성할 때 사용한다. 주로 연락처 정보, 저작권 등이 들어간다. <div id="footer">

 

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

 

<nav>

네비게이션 링크를 나타낼 때 사용한다. <div id="nav">

 

<nav>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a>
  <a href="/jquery/">jQuery</a>
</nav>

 

<figure>, <figcaption>

<figure>

사진이나 일러스트레이션 등과 같은 컨텐츠를 나타낼 때 사용한다. <div id="figure">

 

<figcaption>

figure의 컨텐츠에 대한 설명, caption을 작성할 때 사용한다. <div id="figcaption">

 

<figure>
  <img src="pic_trulli.jpg" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>