img_sem_elements

 

시맨틱 마크업(Semantic Markup) : 컴퓨터가 웹 정보자원의 의미를 이해할 수 있도록 문서의 논리적인 구조를 묘사하는 것.
시맨틱 마크업을 통해 얻을 수 있는 장점
– 접근성이 좋아짐
– SEO(Search Engine Optimization)
– 수정이 용이해짐
– 코드 가독성이 좋아짐
– 코드와 데이터의 재사용성이 높아짐

HTML5 시맨틱(Semantic) Tags

<header>  엘리먼트는 섹션(절)의 주제를 나타낸다. 이 부분이 부제나 별도 제목 혹은 주제의 주요 구절 등 여러 항목으로 구성된 경우 이 엘리먼트 내에서 h1 ~ h6 엘리먼트를 사용해 표기한다.

<article>
  <header>
    <h1>Internet Explorer 9</h1>
    <p><time pubdate datetime="2011-03-15"></time></p>
  </header>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

 

<nav>  엘리먼트는 다른 페이지나 현재 페이지의 특성 부분을 나타낸다. 이동용 링크라고 보면 된다. 그렇다고 페이지 내의 모든 링크를 nav 엘리먼트로 만들 필요는 없다. 주요 링크를 가진 한 개 블럭 정도만 nav 엘리먼트로 지정하는게 적절하다. 페이지 하단의 푸터에 이용약관, 홈페이지, 저작권 등의 링크를 가진 경우가 있는데 이때에는 nav보다 footer엘리먼트 사용이 적절하다.

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

 

<section>  엘리먼트는 문서나 애플리케이션의 섹션(절)을 나타낸다. 섹션은 컨텐츠를 연관된 내용으로 묶은 형태로, 소제목과 함께 표시하는 경우가 대부분이다. 책의 장(Chapter)이나 대화상자에서 탭으로 구성된 각 페이지 혹은 논문에 번호로 구분된 절을 생각하면 된다. 웹 사이트의 홈페이지는 소개나 새로운 소식 혹은 연락처처럼 각기 다른 섹션의 모음일 수 있다.

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

 

<article>  엘리먼트는 문서, 페이지, 사이트 등에서 하나의 독립된 요소로 따로 떼어내어 사용할 수 있는 내용이라 생각하면 된다. 포럼에 올라온 글이나 잡지와 신문 기사, 블로그와 사용자의 댓글, 그리고 위젯과 가젯 등과 같이 하나의 독립된 컨텐츠에 사용 할 수 있다.

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
  the  public on March 14, 2011 at 21:00 PDT.....</p>
</article>

<aside>  엘리멘트는 현재 문서의 컨텐츠와 큰 관련이 없는 부분을 보여줄 때 사용한다. 출판물에서 주요 기사 옆에 곁들이는 관련 기사처럼 표시한다. 인쇄물에서처럼 인용 부호를 사용하거나 광고를 붙이기도 하고 여러 nav엘리먼트를 포함하거나 현재 페이지 내용과 다른 컨텐츠를 노출할 때 사용할 만한 엘리먼트이다.

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

 

<time>  엘리먼트는 24시간제(YYYY-MM-DD/ HH:MM:SS)로 시각을 표시하거나 그레고리력으로 날짜를 표시하는데 부가적으로 시각과 표준시간대와의 차이도 추가할 수 있다. 2013-05-06T14:00:00+09:00 와 같이 T문자로 구분하고 문자열 끝에 타임존 정보를 더하면 된다.

<mark>  엘리먼트는 참조용으로 문서 내 이동을 돕는 엘리먼트다.

<figure> 엘리먼트는 그림, 사진, 일러스트 등의 컨텐트에 연관된 캡션을 표시할때 사용할 수 있는 내용이라 생각하면 된다. figcaption 엘리먼트를 사용해 연관된 캡션을 표시한다.

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>

 

<footer>  footer 엘리먼트는 바로 위 섹션의 컨텐트나 최상위 섹션에 대한 푸터를 제공한다. footer 는 통상 작성자, 관련문서에 대한 링크, 저작권 표시 등 섹션에 대한 정보를 갖는다. 대부분의 footer가 섹션 끝에 나타나긴 하지만 필수사항은 아니다. footer 엘리먼트가 섹션 전체를 포함하는 경우 부록, 색인, 출판사 정보, 라이선스 권한 등을 표시한다.

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
</footer>

Internet  Explorer 8 이하 브라우저가 문제이다.
<header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>  이 태그에 css스타일을 적용할 수가 없다.
그래서 해결하는 방법은 HTML5 Shiv라는 태그르 써서 사용을 해야한다.

https://code.google.com/p/html5shiv/ 에 가면 HTML5 Shiv를 다운 받을 수 있다.
사용방법은 <head> 태그 안에 다음과 같이 삽입하면 된다.

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

출처: http://www.w3c.or.kr/Events/html5/html5/Best_Practice_of_HTML5_Semantic_Markup.pdf