[HTML] 시맨틱(Semantic) HTML을 짜보자

시맨틱(semantic) HTML?

시맨틱(Semantic) HTML을 직역하면 의미론적 HTML이 됩니다. 아직도 뭘 의미하는 건지 모르겠죠? 의미론적이란 언어에서 단어와 구절의 의미를 아는 것을 뜻합니다. Semantic elements란 의미를 가진 elements를 뜻하죠. HTML에서 semantic element는 해당 element의 의미를 브라우저와 개발자 모두에게 알려줄 수 있습니다.

시맨틱하지 않은(non-semantic) elements의 예시

<div>와 <span>이 있습니다. 이 element는 내용물에 대한 어떠한 것도 알려주지 못합니다. <div>와 <span>으로만 이루어진 코드는 실제 돌아가긴 하겠지만, 나중에 내용물에 대한 어떤 정보도 알 수 없게 됩니다.

시맨틱한(semantic) elements의 예시

<form>, <table>, 그리고 <article>등이 있습니다. 이런 elements들은 그들의 내용물에 대해 확실한 정보를 제공합니다.

시맨틱한(semantic) HTML을 짜야하는 이유

시맨틱한 HTML을 알기 위해선 뜬금없을 수도 있지만 검색 엔진의 웹사이트 정보 수집 방법에 대해 알아야합니다. 구글이나 네이버가 사용하는 검색엔진은 봇을 이용하여 전세계에 있는 웹사이트의 정보를 수집합니다. 이 과정에서 사용자가 검색할 만한 키워드를 미리 예상하여 해당 웹사이트의 키워드에 대응하는 인덱스를 만들게 됩니다.

이러한 인덱스를 생성할 때 사용되는 정보는 당연히 웹사이트의 HTML 코드이겠죠, 그리고 그 과정에서 Semantic Elements를 해석하게 됩니다. 만약 Semantic Element가 없다면 HTML 코드에서 어떤 것이 중요하고 어떤 것이 중요하지 않은 지 확인할 수 없게 됩니다. 이는 해당 웹사이트의 인덱싱을 어렵게 만드는 안 좋은 결과를 초래할 수 있습니다.

HTML5에서 등장한 새로운 Semantic Elements

많은 웹사이트들이 네비게이션을 위한 <div id="nav">, 헤더를 위한 <div class="header"> 그리고 푸터를 위한 <div id="footer">같은 코드를 가지고 있습니다. HTML5는 웹 페이지의 다른 부분을 정의하기 위한 새로운 semantic elements를 제공합니다.

Semantic Element의 시각화

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

HTML5의 <section> Element

element는 문서의 섹션을 알려줍니다. W3C의 HTML5 문서에서는 다음과 같이 정의합니다.

section은 내용의 주제에 따른 그룹핑을 하며, 주로 heading과 같이 쓰입니다

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

HTML5의 <article> Element

<article> element는 독립된 내용임을 알려줍니다. article은 항상 그 자체로 의미를 가져야하고, 웹 사이트로부터 독립적으로 읽을 수 있어야합니다.
<article> element의 사용 예시는 다음과 같습니다

• 포럼 글
• 블로그 포스트
• 신문 기사

<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>

<article> element는 독립된 내용임을 알려주고 <section>은 문서 안의 섹션을 알려줍니다. 그럼 이러한 elements를 네스트하는 데에 이 정의를 사용할 수 있을까요? 아니요, 하면 안 됩니다. 따라서 인터넷에선, HTML 페이지에서 <article>을 포함한 <section>나 반대로 <section>을 포함한 <article>을 볼 수 있습니다. 또한, <section>을 포함한 <section>이나 <article>을 포함한 <article>도 확인할 수 있습니다.

스포츠 섹션 안에 있는 스포츠 <article>은 아마 각 <article>에 기술적 섹션이 있을 것입니다.

HTML5의 <header> Element

<header>는 문서나 섹션의 머릿말을 의미합니다. <header>는 서두의 내용을 위해서 사용되어야 합니다. 한 문서에서 여러개의 <header>를 가질 수 있습니다. 다음의 예시는 article의 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>

HTML5의 <footer> Element

<footer>는 문서나 섹션의 꼬릿말을 의미합니다. <footer>는 항상 포함된 요소에 대한 정보를 담고 있어야합니다. footer는 주로 문서의 저자나 저작권 정보, 사용법을 위한 링크, 연락처 정보 등을 포함합니다. 하나의 문서에서 여러개의 <footer>를 가질 수 있습니다.

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

HTML5의 <nav> Element

<nav>는 네비게이션 링크의 집합을 의미합니다.

모든 문서의 링크가 <nav>의 안에 있어야하는 건 아닙니다. <nav>는 오직 중요한 블록의 네비게이션 링크를 위한 것 입니다.

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

HTML5의 <aside> Element

<aside>는 위치한 내용과 벗어나 곳에 위치한 내용을 의미합니다. <aside>의 내용은 주변의 내용과 연관되어야 합니다.

<p>My family and I visited The Epcot center this summer.</p>  
  
<aside>  
	<h4>Epcot Center</h4>  
	<p>The Epcot Center is a theme park in Disney World, Florida.</p>  
</aside>

HTML5의 <figure>와 <figcaption> Elements

figure caption은 이미지에 시각적 설명을 추가해주기 위한 목적을 가지고 있습니다. HTML5에서 이미지와 캡션은 <figure>로 함께 묶여질 수 있습니다.

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

<img>는 이미지를 의미하고, <figcaption>은 캡션을 의미합니다.

왜 Semantic Elements를 써야 할까요?

HTML4에선 개발자들이 style elements에 그들만의 id나 class 이름을 사용했습니다: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav 등등…

하지만 이렇게 하게 되면 검색 엔진들이 정확한 웹 페이지의 내용을 인식하기 어렵게 됩니다. 하지만 HTML5의 element( <header>, <footer>, <nav>, <section>, <article> )을 이용하면 이러한 인식이 좀 더 쉬워집니다.

W3C(World Wide Web Consortium)은 Semantic Web에 대해 이렇게 이야기합니다.

애플리케이션을 넘어서 회사나 커뮤니티에 데이터를 공유하고 재사용할 수 있게 한다.

HTML5의 Semantic Elements

아래는 알파벳 순으로 정렬된 새로운 HTML5의 semantic elements 리스트입니다.
링크는 HTML 레퍼런스 완전판으로 가게됩니다.

태그	설명
<article>	글을 의미합니다.
<aside>	페이지의 내용 주변에 있는 내용을 의미합니다.
<details>	사용자가 볼 수 있거나 숨겨진 추가적인 세부사항을 의미합니다.
<figcaption>	<figure>의 설명을 의미합니다.
<figure>	일러스트, 도형, 사진, 코드같은 그 자체로 의미를 갖는 내용을 의미합니다.
<footer>	문서나 섹션의 꼬릿말을 의미합니다.
<header>	문서나 섹션의 머릿말을 의미합니다.
<main>	문서의 주된 내용을 의미합니다.
<mark>	마크되거나 하이라이트된 글을 의미합니다
<nav>	네비게이션 링크를 의미합니다.
<section>	문서의 섹션을 의미합니다.
<summary>	<details>를 위한 가시적인 제목을 의미합니다.
<time>	날짜나 시간을 의미합니다.