HTML5의 새로운 태그 1

* 문서의 구성과 관련된 태그

- HTML 문서 안에서 택스트가 어떤 위치에 있는지를 나타내기 위한 태그

- 시각적인 변화는 없지만 텍스트를 의미적으로 구분할 수 있음.

 

태그	기능	작성 예
<section>	일반적인 섹션을 나타냄.  제목을 붙여도 좋을 만한 문장의 모음에 대해 사용함.	<section>     <h2>오늘의 날씨</h2>     <div>맑음</div>   </section>
<article>	독립된 콘텐츠를 나타냄.  뉴스 기사나 게시판, 블로그의 투고에 사용함.	<article>      <header>          <h1>그림책 정리</h1>      </header>  <div>유미나는 책갈피를 모티브로 한 캐릭터입니다.</div>  </article>
<header>	헤더가 되는 콘텐츠를 나타냄.  섹션의 목차나 검색 폼 등에 사용함.
<footer>	푸터(각주)가 되는 콘텐츠를 나타냄.  저작권과 관련된 정보나 관련 페이지의 링크 등에 사용함.	<footer>      안녕하세요.  </footer>
<nav>	웹 페이지의 내비게이션이 되는 콘텐츠를 나타냄.  페이지의 목차나 항목 리스트 등에 사용함.	목차 일람  <nav>      <ul>          <li>HTML5란</li>          <li>CSS란</li>      </ul>  </nav>
<aside>	메인 콘텐츠와는 관계가 약한 보충적인 콘텐츠에 대해 사용함.	<aside>      유미나는 그림책별로 캐릭터가 다릅니다.  </aside>
<hgroup>	제목을 그룹화하여 모음.  태그 안에는 h1-h6의 요소를 지정함.	<hgroup>      <h1>그림책의 종류</h1>      <h2>C가 보이는 그림책</h2>  </hgroup>

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
<section>	O	O	O	O	O
<article>	O	O	O	O	O
<header>	O	O	O	O	O
<footer>	O	O	O	O	O
<nav>	O	O	O	O	O
<aside>	O	O	O	O	O
<hgroup>	O	O	O	O	O

 

 

* 텍스트에 의미를 부여하는 태그

- 데이터에 의미를 부여하는 것으로, 표시에는 직접적인 영향을 주지 않음.

 

 

태그	기능	작성 예
<time>	텍스트가 날짜나 그와 관련된 것이라는 것을 나타냄.  datetime 속성을 지정한 날짜를 사용하여 이 값을 재이용하는 것을 고려한 것.	<time datetime="2012-04-01">    만우절  </time>

 

 

* 그룹화하는 태그

- 콘텐츠를 그룹화하는 데 사용함.

 

태그	기능	작성 예
<figure>	도표를 나타내는 데 사용함.	<figure>     <img src="photo.png">     <figcaption>     기념 사진1     </figcaption> </figure>
<figcaption>	도표의 제목을 붙이는 데 사용함.  figure 요소 안에서 사용함.

 

 

* 텍스트의 기능

- 텍스트에 기능을 부여하는 태그

 

태그	기능	작성 예
<ruby>	루비(읽는 법)를 붙일 텍스트를 지정함.  루비 자체는 rt 요소로 달음.	<ruby>  JavaScript  <rp>(</rp>  <rt>자바스크립트</rt>  <rp>)</rp>
<rt>	루비를 지정함.
<rp>	루비를 표시할 수 없는 환경을 위한 문자열을 저장함.
<mark>	텍스트이 일부를 하이라이트 표시함.  보통 형광펜으로 마크한 것과 같이 표시됨.	이것은  <mark>HTML5</mark>  로 작성했습니다.
<wbr>	읽기 편하게 하기 위해 줄을 바꿔도 좋은 장소를 지정함.  이 태그에는 종료 태그가 없음.	<p>2의 제곱근은<wbr>  1.41421356<wbr>  2373095048<wbr>  8016887242<wbr> ... </p>

 

[지원 상황]

 

	IE	Firefox	Opera	Safari	Chrome
<time>	O	O	O	O	O
<figure>	O	O	O	X	O
<figcaption>	O	O	O	X	O
<ruby>	O	X	X	O	O
<rt>	O	X	X	O	O
<rp>	O	X	X	O	O
<mark>	O	O	O	O	O
<wbr>	X	O	O	O	O

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)