HTML5와 HTML4의 차이

HTML5

HTML : <section>을 사용하여 영역을 구분한다. 
CSS : 자바스크립트가 담당하던 처리의 일부를 HTML 태그 속성에서 처리한다.
JavaScript : HTML5, CSS에서 처리할 수 없는 기능들을 담당하며, 캔버스(Canvas)에서 사용하면 게임 작성도 가능하다.

 

 

HTML4

HTML : 특정 태그 <div>를 사용하여 영역을 구분한다.
CSS : HTML의 태그를 꾸며준다.
JavaScript : 데이터를 처리하거나 서버에 요청하는 일을 한다.

 

 

HTML5에서 추가 된 태그

구조적 태그 - 구역을 나누는 블록 요소 <div> 대신 대체 태그
header : 사이트의 소개나 네비게이션 등을 표시
nav : 사이트의 내비게이션 항목을 표시
article : 독립적인 콘텐츠를 표시, 뉴스기사, 블로그의 글
section : 일반적인 문서나 애플리케이션 영역을 표시, 섹션의 제목을 나타내는 <h1>~<h6>도 함께 사용
aside : 본문의 내용과는 독립적인 사이드바의 콘텐츠 표시
footer : 사이트의 제작자나 저작권 정보 등을 주로 표시

 

 

멀티미디어 태그 - 플러그인 없이 멀티미디어 재생

 

audio : 오디오 재생

<audio controls>
    <source src="파일.mp3" type="audio/mpeg"/>
</audio>

 

video : 비디오 재생

<video width="가로" height="세로" controls>
    <source src="파일.mp3" type="video/mp4"/>
</video>

 

 

그 외 태그

그 외 태그
canvas : 웹 상에서 그래픽 표시, 자바스크립트 및 API와 같이 사용해서 다양한 애플리케이션을 만들 수 있다.
command : 사용자 실행 명령어를 표시
datalist : 사용자가 텍스트 필드에 입력 시 선택 할 수 있는 값의 목록 표시
details : 추가적인 정보나 사용자가 요청하는 정보를 표시
embed : 플러그인 콘텐츠 표시
figure : 설명글을 붙일 대상 정의
figcaption : <figure>로 정의한 대상에 설명글을 붙임
keygen : 서버로 양식 전송 시 한 쌍의 키를 생성해 private key(비밀키)는 로컬, public key(공용키)는 서버에 저장
mark : 텍스트에 형광펜을 칠한 것과 같은 강조 효과
meter : 측정 값 표시
output : 수학적 계산의 결과 값을 표시
progress : 시간이 걸리는 작업을 막대로 표시
time : 날짜나 시간 표시

 

 

HTML에서 변경된 태그

a : href 속성 없이 사용 시 null 링크로 사용
address : 실제의 주소 표시
b : 중요하지 않지만 진하게 표시
hr : 단락 주제 변경 시
l : 중요한 정보 기울임꼴로 표시
menu : 실제 문서 메뉴 정보를 제공하는데 사용
small : 세부 주석이나 법적 인쇄 문서에서 작은 글자 정보 표시
strong : 중요한 정보를 진하게 표시

 

 

HTML에서 제거 된 태그

CSS에서 대체 할 수 있기 때문에 더이상 사용되지 않는다.
basefont, big, center, font, frame, frameset, nofreames, s, strike, tt, u

다른 태그들과 사용법에서 혼란을 주어 더이상 사용되지 않는다.
acronym, applet, isindex, dir, noscript