HTML

HTML5와 HTML의 차이점, 정의, 역사

HTML이란?
HTML의 역사
HTML5와 HTML의 차이점

HTML이란?

HyperText Markup Language의 줄임말

HyperText : 문서를 서로 연결해 주는 링크. HTML에는 서로 연결한다는 의미가 포함

Markup : '표시한다'는 뜻. 내용을 보여주는 텍스트, 이미지, 영상들의 위치를 표시하는 것을 의미

 

 

HTML의 역사

1991년 말 버너스리가 처음으로 인터넷에서 문서를 HTML 태그로 부르면서 시작되었다. 

 

 

HTML5와 HTML의 차이점

2014년 11월 발표된 HTML 표준 규약은 이전 버전과 구별하기 위해 한동안 HTML5라고 불렀다. HTML5는 이전에 사용하던 HTML4에 이어 다양한 기능이 추가되었기 때문에 4 다음 숫자인 5를 붙여 HTML5라고 불렀다.

 

1. Synyax(구문)

  • DOCTYPE선언이 더 간결해졌다.
기존 DOCTYPE HTML5 DOCTYPE
<!DOCTYPE html PUBLIC " //W3C//DTD HTML 4.01//EN" "http"//www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> : 대소문자 구별이 없음
  • Encoding 선언이 간결해졌다.
기존 DOCTYPE HTML5 DOCTYPE
<meta http-equiv="Content Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8">
  • MathML(수식 태그), SVG을 사용할수 있게 되었다.
  • 태그의 대소문자를 구분하지 않는다.

 

2. Language(언어)

  • 시멘트 마크업 추가 : 
    • <header>
    • <footer>
    • <nav>
    • <section>
    • <article>
    • <aside>
  • 의미기반 태그 추가
    • <marker> 주목할 문구 (형광펜 효과)
    • <meter> 특정 범위의 숫자 값을 표현
    • <time> 특정 시간을 표시
    • <progress> 로딩바 표시
    • <command> 명령어를 사용하는 태그라는데, 모든 브라우저에서 지원하지 않는다.
    • <embed외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너(container)를 정의
    • <figure태그는 삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용
    • <figcaption> <figure> 요소의 캡션(caption)을 정의할 때 사용
  • 몇 가지 태그가 사라짐 (css로 대체 가능): 
    • <big>
    • <center>
    • <font>
    • <strike>
    • <basefont>
    • <frame> - 웹 접근성 향상을 위해 사용을 지양하는 태그
  • WebForm기능: <input> 태그의 type 추가

See the Pen Untitled by younwook choi (@wooknim) on CodePen.

 

3. API

멀티미디어 애플리케이션 지원 

이전에는 Active x나 Flash와 같은 외부 플러그인으로 실행했음, 이로 인해 속도가 많이 느려짐

<canvas>, <video>, <audio>, Drag&Drop API 등..

 

 

그러나 최근 대부분의 웹 브라우저에서 HTML5를 지원하면서 HTML5에서 숫자 5를 빼고 그냥 HTML이라고 부른다. 그리고 현재 HTML은 HTML5와 같다.

 

 

 

728x90
반응형