html5 시멘틱(semantic) 요소

---

시멘틱(sementic) 요소

시멘틱 요소란?

semantic - "의미 있는", "의미의"

표현 중심이 아닌 의미 있는 구조 문서 작성을 위한 요소.
HTML 문서에 의미를 부여하려는 취지

• 사람이 이해하는데 용이
• 프로그램(검색 엔진, 문서 해석기)등의 문서 처리와 해석

<div id="container">
  <div id="header">헤더 영역</div>
  <div id="menu">메뉴 영역</div>
  <div id="contents">콘텐츠 영역</div>
  <div id="r-side">사이드 영역</div>
  <div id="footer">푸터 영역</div>
</div>

포털 웹 사이트 화면의 구성을 예로 보면 영역을 나눠서 볼 수 있다. 헤더 영역, 메뉴 영역, 콘텐츠 영역, 사이드 영역, 푸터 영역 등. HTML5이전에는 div 요소에 id를 줘서 화면을 구성했다. 이 id는 사람 by 사람으로 지을 수도 있어서, 요소가 무엇을 의미하는지 알고 싶으면 직접 개발자에게 물어보거나... 추론을 해서 나름의 결론을 내려야 했다. 이를 보완하기 위해 시멘틱 요소가 추가되었다.

<div id="container">
  <header>헤더 영역</header>
  <nav>메뉴 영역</nav>
  <section>
    <article>콘텐츠 영역</article>
    <article>콘텐츠 영역</article>
  </section>
  <aside>사이드 영역</aside>
  <footer>푸터 영역</footer>
</div>

레이아웃을 위한 시멘틱 요소 추가

추가된 시멘틱 요소	의미
header	- 머리말(로고, 사이트 이름 등) 담기 위해 사용 - section, header, footer 하위 요소로 포함 할 수 없다
hgroup	- 제목과 부제목을 묶어서 나타냄
nav	- 메뉴
section	- 동일한 주제로 하나로 구성 된 문서의 콘텐츠s - 주제 하나? 하나의 헤딩 요소(h1~h6)만 사용
article	- 개별 콘텐츠(뉴스 기사, 블로그 포스트 등) - section 요소나 article요소 포함 가능
aside	- 좌우측의 사이드 영역 - 주요 콘텐츠 이외의 참고 콘텐츠 나타낼 때 사용
footer	- 꼬리말(제작자 정보 및 저작권 정보, 연락처 등)

브라우저 화면에 보이는 건 바뀐 게 없지만 해당 태그의 부분이 어떤 용도, 어떤 의미를 담고 있는지 좀 더 명확하게 성격을 정의할 수 있게 되었다.

section에 2개 이상의 헤딩 요소 사용될 경우

-같은 레벨의 헤딩 요소

<section>
  <h1>제목1</h1>
  <h1>제목2</h1>
</section>

아래와 같이 같은 레벨의 section 요소로 구분

<section>
  <h1>제목1</h1>
</section>
<section>
  <h1>제목2</h1>
</section>

-다른 레벨의 헤딩 요소

<section>
  <h1>제목1</h1>
  <h2>제목2</h2>
</section>

아래와 같이 중첩된 section 요소로 구분

<section>
  <h1>제목1</h1>
  <section>
    <h2>제목2</h2>
  </section>
</section>

-제목과 부제목을 묶어서 함께 표현하기

hgroup는 제목과 부제목을 묶어서 함께 표현하기 위한 요소이다

<section>
  <hgroup>
    <h1>제목1</h1>
    <h3>제목2</h3>
  </hgroup>
</section>

---