메뉴 건너뛰기

프로그램언어

Home 프로그램언어 모바일 안드로이드
✔ 뷰어로 보기
2014.09.04 19:04

HTML5 Better semantic tags

조쉬
조회 수 5952 추천 수 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.
아래 소스 파일 올립니다.
BetterSemanticTags.html
Atachment
첨부 '1'
Facebook Twitter Google Pinterest
위로 아래로 댓글로 가기 인쇄 첨부
에디터 선택하기
?
  1. No Image 16Jul
    by
    2015/07/16 Views 13881 

    EditText의 글자 수 제한 걸기

  2. 16Oct
    by
    2014/10/16 Views 30678 

    Effects - Animate() 메서드 (여러가지 효과 동시 처리)

  3. 16Oct
    by
    2014/10/16 Views 6069 

    Effects - FadeIn() / FadeOut() 메서드 (서서히 보이기 및 숨기기)

  4. 16Oct
    by
    2014/10/16 Views 5957 

    Effects - Show() / Hide() 메서드 (보이기 및 숨기기)

  5. 16Oct
    by
    2014/10/16 Views 6761 

    Effects - SlideToggle() 메서드 (슬라이드 업/다운)

  6. 16Oct
    by
    2014/10/16 Views 6001 

    Effects - SlideUp() 메서드 (슬라이드업)

  7. 16Oct
    by
    2014/10/16 Views 6225 

    Effects - Stop() 메서드 (애니메이션 효과 멈추기)

  8. 16Oct
    by
    2014/10/16 Views 5749 

    Events - Unbind() 메서드 (이벤트 처리기 해제)

  9. 30Sep
    by
    2021/09/30 Views 339 

    Firebase - 푸시알림 보내기

  10. No Image 30Sep
    by
    2021/09/30 Views 768 

    Firebase - 푸시알림 보내기 (2)

  11. 14Dec
    by
    2020/12/14 Views 242 

    Fragment를 통한 하단탭 예제1

  12. No Image 14Dec
    by
    2020/12/14 Views 376 

    Fragment에서 Toast 사용하기

  13. No Image 28Aug
    by
    2014/08/28 Views 9853 

    FTPClient 를이용하여 ftp상 서버에서 데이터 다운로드 편

  14. No Image 28Aug
    by
    2014/08/28 Views 6366 

    FTPClient 를이용한 데이터 업로드 하기

  15. 04Sep
    by 조쉬
    2014/09/04 Views 5952 

    HTML5 Better semantic tags

  16. 04Sep
    by
    2014/09/04 Views 5841 

    HTML5 Form 공부하기 -1-

  17. 04Sep
    by
    2014/09/04 Views 6329 

    HTML5 Form 공부하기 -2-

  18. 04Sep
    by
    2014/09/04 Views 6810 

    HTML5 Geolocation (구글 지도에 현위치 표시하기)

  19. No Image 04Sep
    by
    2014/09/04 Views 6454 

    HTML5 Speech Input (음성인식) API

  20. 04Sep
    by
    2014/09/04 Views 5587 

    HTML5 Web Storage -01-

쓰기
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© 2016 JOSHI. All Rights Reserved
© k2s0o1d4e0s2i1g5n. All Rights Reserved