메뉴 건너뛰기

2014.09.04 19:04

HTML5 Better semantic tags

조회 수 6019 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Hey guys welcome to HTML5 tutorial of Google Presentation.
Today I am going to show you Sample codes of HTML5 Tags.
You can see 10 tags (the red tags below) and how to use those tags. 

아래 코드는 HTML5 에서 사용하는 Tag들에 대한 사용예를 보여주는 코드입니다.<header>,<hgroup>,<nav>,<section>,<article>,<aside>,<figure>,<figcaption>,<footer>,<time datetime="">이렇게 10개의 코드를 가지고 만들었습니다.

header는 제목을 나타낼 때 사용하고 한 페이지에서 여러번 사용할 수 있습니다.
nav는 메뉴이고 section은 범위를 구분지을 때 사용합니다.
article은 내용 aside는 옆쪽에 표시되는 내용에 사용합니다.
figure는 image를 표시할 때사용하고 figcaption은 그 이미지에 대한 설명(제목)을 나타냅니다.
그리고 footer는 꼬리글이구요. time datetime은 날짜를 나타낼때 사용합니다
HTML

Better semantic tags

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>
  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <figure>
    <img src="..."/>
    <figcaption>Chart 1.1</figcaption>
  </figure>

  <footer>
   Copyright ©
<time datetime="2010-11-08">2010</time>. </footer> </body>
You can download sample html file below.
아래 소스 파일 올립니다.

List of Articles
번호 제목 날짜 조회 수
237 HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript file 2014.09.04 6359
236 HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript file 2014.09.04 6349
235 HTML5 드래그 앤 드롭 하기 Drag and Drop file 2014.09.04 7807
234 HTML5 Web Storage -01- file 2014.09.04 5637
233 HTML5 Form 공부하기 -1- file 2014.09.04 5910
232 HTML5 Form 공부하기 -2- file 2014.09.04 6386
231 HTML5로 게임 만들기 워밍업 file 2014.09.04 6097
» HTML5 Better semantic tags file 2014.09.04 6019
229 HTML5 Geolocation (구글 지도에 현위치 표시하기) file 2014.09.04 6877
228 jQuery ajax post 요청 text 응답 2014.10.16 6775
227 JSON(JavaScript Object Notation) - jQuery Ajax - jQuery.getJSON() 메서드 (비동기적으로 JSON파일 로드) file 2014.10.16 6617
226 jQuery Ajax - jQuery.load() 메서드 (동적으로 원격 페이지 로드) file 2014.10.16 6477
225 트리뷰(TreeView) 컨트롤 file 2014.10.16 6776
224 Effects - Stop() 메서드 (애니메이션 효과 멈추기) file 2014.10.16 6272
223 Effects - Animate() 메서드 (여러가지 효과 동시 처리) file 2014.10.16 31037
222 Effects - SlideToggle() 메서드 (슬라이드 업/다운) file 2014.10.16 6801
221 Effects - SlideUp() 메서드 (슬라이드업) file 2014.10.16 6075
220 Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기) file 2014.10.16 6124
219 Effects - Show() / Hide() 메서드 (보이기 및 숨기기) file 2014.10.16 6016
218 Events - Unbind() 메서드 (이벤트 처리기 해제) file 2014.10.16 5801
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved