HTML5 시멘틱 태그

 

 

 

HTML5 시멘틱 태그

페이지의 구조를 더 잘 나타내기 위해 새로운 태그 추가

태그	설명
header	페이지나 절의 헤더 영역을 정의
footer	페이지나 절의 푸터 영역을 정의
nav	페이지나 절의 내비게이션 영역을 정의
section	페이지의 논리적 영역 또는 내용의 그룹을 정의
article	하나의 글 또는 완결된 내용을 정의
aside	부차적인 또는 관련 있는 내용을 정의
meter	특정 범위 내의 측정 값을 나타냄
progress	어떤 목표까지의 진척도를 실시간으로 보여줌
hgroup	제목과 그에 관련된 부제목을 하나로 묶음
figure,figcaption	그림이나 비디오 같은 멀티미디어 콘텐츠에 캡션을 붙일 때
audio,video	멀티미디어 콘텐츠를 표시
embed	플러그인 콘텐츠 표시
mark	텍스트에 형광펜으로 칠한 것과 같은 강조 효과
time	날짜와 시간을 표시
ruby,rt,rp	루비 문자 표시
canvas	웹상에 그래픽을 표시
command	사용자 실행 명령어 표시
details	추가적인 정보나 사용자가 요청하는 정보 표시
datalist	사용자가 텍스트 필드에 내용을 입력할 때 선택할 수 있는 값들을 리스트
keygen	양식(form)을 서버로 전송할 때 한 쌍의 키를 만들어 private key(프라이비트 키)는 로컬에 저장하고 public key(퍼블릭 키)는 서버에 저장
output	수학적인 계산의 결과값을 표시

   

   

 

시맨틱 요소(Semantic Element) 또는 시맨틱 태그

의미 없는 <div> 태그의 사용보다 문서의 내용을 쉽게 이해할 수 있도록 의미를 가지는 새로운 태그 요소

태그	설명
header	사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함
hgroup	제목과 부제목을 묶어주는 역할
nav	사이트의 메뉴나 링크 같은 내비케이션 요소 포함
section	실제 문서 내용
article	문서 내용이 많을 경우 여러 개의 <article> 요소로 분할
aside	문서의 주요 내용 외의 내용들. 문서의 주영역 주변에 배치
footer	작성자 정보나 저작권 정보, 관련 문서 링크 등 부가 정보 배치