본문 바로가기
Html&CSS

HTML 태그 종류_HTML5(추가된 요소)

by .Epona. 2020. 3. 4.

추가된 요소

태그명 태그 입력 방식 비고  
  section <section> </section> 장이나 절을 표현, 제목을 넣어서 사용  
  nav <nav> </nav> 사이트 내 이동하는 주요 내비게이션 표현  
  article <article> </article> 뉴스기사, 블로그 기사처럼 독립적인 컨텐츠(댓글, 게시판 투고 등)  
  aside <aside> </aside> 메인컨텐트와 관련성이 적은 컨텐츠(광고, 블로그사이드바, 보충기사 등)  
  hgroup <hgroup> </hgroup> h1~h6을 그룹화  
  header <header> </header> 페이지나 섹션의 머리말(로고, 목차, 검색폼, 내비게이션 등이 포함)  
  footer <footer> </footer> 페이지나 섹션의 바닥글(저자 정보, 관련 페이지 링크, 저작권 표시 등)  
  figure/figcaption <figure>
  <figcaption> </figcaption>
</figure>
- 문서의 본문에서 참조하는 그림을 표현
- 본문에서 그림을 이동해도 무관한 경우에 사용 
 
  time <time> </time>
<time datetime=""> </time>
날짜 및 시간 datetime속성을 지정하여 날짜와 시간을 나타낼 수 있음  
  mark <mark> </mark> 참조하기 쉽도록 표시-주목  
  ruby/RP/RT <ruby>
  <RP> ( <RP>
   <rt>
   <rt>
  <RP> ) <RP>
</ruby>
Rp를 지정하면 지원하지 않는 브라우저에서는 ()로 묶어 표현  
  embed <embed src="" type="application/s-shockwave-flash" width="" height=""> </embed> 플러그인 재생  
  video <video> </video>
src: 파일 url / autoplay / loop / controls / width / height / 
동영상 재생
Mp4: 모든 브라우저 지원
Webm, ogg : chrome / firefox / opera
 
  audio <audio> </audio> 오디오 재생
Mp3: 모든 브라우저 지원
Wav: chrome, firefox, safari, opera 지원
Ogg: chrome, firefox, oprea 지원
 
  source <video controls>
<source src="" type="video/mp4">
<source src="" type=video/webm">
<source src="" type="video/ogg">
</video>
   
  canvas <canvas> </canvas> 자바스크립트를 이용하여 그림을 그릴 수 있다  

 

input의 새 값

태그명 태그 입력 방식 비고  
  search <input type="search"> </input> 검색용 입력 필드  
  tel <input type="tel"> </input> 전화번호 입력 필드  
  url <input type="url">  </input> url 입력 필드  
  email <inpt type="email"> </input> 이메일 입력 필드  
  data <input type="date"> </input> 날짜 입력  
  month <input type="month"> </input> 연월 입력  
  week <input type="week"> </input> 주 입력  
  time <input type="time"> </input> 시간 입력  
  number <input type="number"> </input> 수치를 입력  
  range <input type="range"> </input> 특정범위 수치 입력  
  color <input type="color"> </input> 색상 지정  
  output <output name="" for=""> </output> 값을 출력  
  progress <progress> </progress> 진행상황 표현  
  meter <meter value="" min="" max=""> </meter> 게이지 표현