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.
아래 소스 파일 올립니다.

BetterSemanticTags.html

Atachment
첨부 '1'	html.gif,

List of Articles
번호	제목	날짜	조회 수
157	HTML5 Form 공부하기 -1-	2014.09.04	5841
»	HTML5 Better semantic tags	2014.09.04	5952
155	Effects - Show() / Hide() 메서드 (보이기 및 숨기기)	2014.10.16	5957
154	안드로이드 이미지 효율적으로 회전 해보기	2014.08.28	5995
153	Effects - SlideUp() 메서드 (슬라이드업)	2014.10.16	6001
152	HTML5로 게임 만들기 워밍업	2014.09.04	6063
151	Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기)	2014.10.16	6069
150	네트워크를 통해 받은 이미지를 파일로 저장하고, 크기 조절해서 불러오기	2015.07.16	6155
149	클래스나눠서 xml 파싱과 FTP를이용하여 안드로이드에서 활용하기	2014.08.28	6180
148	Effects - Stop() 메서드 (애니메이션 효과 멈추기)	2014.10.16	6225
147	푸쉬 알림 기능. GCM (Google Cloud Messaging) 사용하기 (3)	2015.07.16	6267
146	HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript	2014.09.04	6288
145	전화 인텐트와 나의 전화 번호가져오기	2014.08.28	6312
144	HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript	2014.09.04	6312
143	WebView 줌 컨트롤러 가리기	2014.08.28	6316
142	HTML5 Form 공부하기 -2-	2014.09.04	6329
141	사용자 정의 팝업창 띄우기	2015.07.16	6337
140	FTPClient 를이용한 데이터 업로드 하기	2014.08.28	6366
139	이미지 버튼 설정	2015.07.16	6378
138	Android Push GCM 서버 구성 하기(3)	2015.12.14	6388

157

HTML5 Form 공부하기 -1- file