메뉴 건너뛰기

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

List of Articles
번호 제목 날짜 조회 수
37 알아놓으면 좋은 내용정리 2016.06.07 7458
36 암시적 인텐트를 사용한 인터넷열기, 전화걸기, 문자보내기 [Intent (인텐트)] file 2016.06.07 7738
35 앱 번들(Android App Bundle) 만들기 file 2021.09.14 307
34 어댑터 뷰(Adapter View) & 어댑터(Adapter) (1) file 2016.06.08 7852
33 옵션 메뉴 동적으로 생성하기 2015.07.16 6926
32 월별 캘린더에 일정 입력 및 조회 기능 리스트로 추가하기 file 2015.07.16 18552
31 위젯 업데이트 주기 빠르게 하기 2018.10.02 2142
30 이미지 버튼 설정 2015.07.16 6378
29 이미지 버튼(ImageButton) 만들기 2015.07.16 7115
28 이미지의 Orientation를 체크해서 이미지 회전하기 2015.07.16 7658
27 인텐트를 이용한 Activity간 데이터 전달 (사용자 정의 클래스) file 2015.07.16 7061
26 전화 인텐트와 나의 전화 번호가져오기 2014.08.28 6312
25 줄바꿈 문자 치환 2020.12.14 298
24 체크 박스(CheckBox)의 이미지 바꾸기 2015.07.16 6398
23 초기화면 페이지를 만들어보자. splash 페이지 제작 file 2020.12.14 287
22 카카오톡 대화내용 가져오기(sqlite3, chat_logs) file 2016.05.26 15134
21 카카오톡 분석하기 (1) - sqlite 파해치기 file 2016.05.26 10454
20 카카오톡 분석하기 (2) - 카카오톡 암호화 함수 찾기 file 2016.05.26 9600
19 클래스나눠서 xml 파싱과 FTP를이용하여 안드로이드에서 활용하기 2014.08.28 6180
18 탭 뷰에 탭 추가하기, 아이콘 넣기 file 2015.07.16 9361
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved