HTML5 동영상강좌 바로가기

HTML5에서 새로 추가된 태그들

본문

HTML5에서는 태그에 자체 의미를 갖는 시멘틱 마크업을 사용합니다. 

이와 관련, 이름을 보면 의미를 파악할 수 있는 시멘틱 태그들이 많이 추가되었습니다.

 

header : 문서의 머리 부분을 표시합니다. 사이트제목이나 네비게시션이 위치하기도 하고, 문서의 머리글이 배치되기도 합니다.

footer : 문서의 하단 부분을 표시합니다. 사이트 정보나 저작권 표시등이 배치됩니다.

nav : 네비게이션이 위치합니다.

section : 일반적인 문서나 프로그램 영역을 나타냅니다. 제목을 나타내는 h1, h2, h3, h4, h5, h6와 함께 사용될 수 있습니다.

article : 기사나 블로그 글 등 콘텐츠를 표시합니다. 허락된 컨텐츠의 재배포가 가능합니다.

aside : 문서의 중요부분이 아닌 사이드 바 콘텐츠를 표시할 때 사용합니다.

hgroup : 제목과 부제목을 묶을 때 사용합니다.

audio : 멀티미디어 콘텐츠중 음성콘텐츠를 표시할 때 사용합니다.

video : 멀티미디어 콘텐츠중 영상콘텐츠를 표시할 때 사용합니다.

embed : 플러그인 콘텐츠를 표시할 때 사용합니다.

mark : 형광펜 효과를 낼 때 사용합니다. 강조 효과입니다.

progress : 시간과 관련된 작업과정을 막대로 표시하고자 할 때 사용합니다.

meter : 측정값을 표시합니다.

time :  날짜나 시간을 나타낼 때 사용합니다.

ruby, rt, rp : 루비문자를 표시합니다. 동아시아의 문자의 발음 등을 표시할 때 사용합니다.

canvas : 웹상에 2d 그래픽을 구현할 때 사용합니다. 자바스크립트와 API를 이용하여 다양한 어플리케이션을 만들 수 있습니다.

command : 사용자 실행 명령어를 표시합니다.

details : 문서내에서 추가적인 정보나 사용자가 요청하는 정보를 표시할 때 사용합니다.

datalist : 폼양식에서 사용자가 텍스트필드에 내용을 입력할 때 선택할 수 있도록 값목록을 제공할 때 사용합니다.

keygen : 폼양식에서 서버로 전송할 때 이용합니다. 한 쌍의 키를 만들어 Private key는 로컬에, Public key는 서버에 저장합니다.

output : 수학 계산에서 결과값을 표시할 때 사용합니다. 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기


HTML5 동영상강좌 바로가기