추가된 요소
태그명 | 태그 | 입력 방식 | 비고 | |
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 입력 필드 | ||
<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> | 게이지 표현 |