HTML5 편집하기

[[파일:HTML5 로고.png|썸네일|200픽셀|'''HTML5''']]
[[파일:HTML5 글자.png|썸네일|300픽셀|'''HTML5''']]
[[파일:HTML 글자.png|썸네일|300픽셀|'''[[HTML]]''']]
[[파일:W3C 글자.png|썸네일|300픽셀|'''[[W3C]]'''(World Wide Web Consortium)]]
[[파일:팀 버너스-리.jpg|썸네일|200픽셀|'''[[팀 버너스-리]]'''(Tim Berners-Lee)]]

'''HTML5'''(에이치티엠엘 파이브)는 Hypertext Markup Language version 5의 약자로서, 기존의 [[HTML]]이 [[텍스트]] 및 [[하이퍼링크]] 위주로 표시하던 것과 달리 HTML5는 [[액티브엑스]](Active-X)를 사용하지 않고, 오디오, 비디오, 그래픽, 기타 다양한 응용 프로그램을 웹 자체에서 구현할 수 있는 코딩 언어이다. 2014년 '''[[W3C]]'''에서 표준안을 확정했다.

== 개요  ==
HTML 5는 웹 페이지를 위한 하나의 중요한 '언어'이고,
웹 표준 기관인 월드와이드웹 컨소시엄([[W3C]])이 만들고 있는 차세대 웹 언어 규격이다. HTML이라는 언어를 이용해서 지금의 웹 페이지의 글, 아이콘, 표, 클릭 박스 등 제작되었다고 볼 수 있다. 위와 같이 HTML 5도 웹 문서를 제작하는 데 쓰이는 기본 프로그래밍 언어 HTML(hypertext markup language)의 최신규격으로, HTML의 종류 중 하나이다. 별도 설치 없이 웹브라우저상에서 다양한 멀티미디어 콘텐츠와 앱 등을 바로 제공할 수 있다.

== 등장배경  ==
처음에 등장한 것은 1989년 팀 버너스리(Tim Berners-Lee)가 인터넷을 기반으로 한 하이퍼미디어의 초기 모델을 설계하고 1990년에 [[HTTP]],[[HTML]]의 스펙을 제안한 것이 시작이 되었다.
기존의 터미널이나 텔넷 과 같은 텍스트 기반의 정보 수집에서 벗어나 웹과 브라우져를 통한 정보 수집이 새로운 이슈가 되면서 인터넷 기반으로 텍스트 뿐만 아니라, 이미지, 오디오, 다양한 오브젝트들을 보여주기 위한 목적으로 1993년 처음 탄생하게 되었다.[[HTML]] (Hyper Text Markup Language)은 SGML이라는 과학기술문서를 구조적으로 표현하기 위한 마크업 언어에서 파생된 언어로 웹에서 여러 가지 컨텐츠들을 보여주기 위하여 등장했던 언어로 GUI기반의 PC통신 기술인 넷츠케이프,익스플로어가 등장하면서 크게 관심을 받기 시작하였고 기본적으로 <html>의 여는 태그와 </html>의 닫는 태그로 둘러쌓이는 형식을 취하고 있으며, 그 안의 컨텐츠들도 이러한 여러 가지 태그들로 둘러쌓여서 브라우져에서 뿌려지게 된다.
1990년대 공급자 기반의 홈페이지를 작성할 때 웹페이지를 구조적으로 표현함에 있어서 사용하기 편리하고 당시의 기술로는 유저가 판단하기에 심미성이 뛰어나 많은 곳에서 활용되었지만 HTML3.x버젼으로 업데이트된 시점에서 HTML만으로는 표현하기에는 제한사항이 발생되어 필요한 태그를 사용자가 직접 정의할 수 있는 XML이 생겨나게 되었고 XML은 HTML이 고정된 태그만을 사용가능하다면 DTD라는 XML 스키마를 정의함으로 인해 사용자가 직접 태그를 작성하게 할 수 있게 함으로써 HTML에서 확장성을 강조했다.
이에 XML과 HTML을 융합한 [[XHTML]]이 등장하게 되었는데 W3C는 HTML의 개발을 중지하고  XHTML을 표준으로 지정하려는 움직임이 일게 되는데 이미 HTML사용에 익숙해진 사용자들(개발자,디자이너)과 브라우져 공급자들은 XHTML보다 HTML을 더욱 발전시키는 쪽이 더 나을것이라는 생각을 가지고  W3C의 생각과는 정면으로 대치하게 된다.
이에 독립적으로 HTML을 발전시키위해 Apple,Mozilla,Opera는 [[WHATWG]]라는 워킹그룹을 발촉하게 되고 이에 W3C는 WHATWG를 정식 W3C워킹그룹으로 인정받고 XHTML의 개발을 중지하면서 HTML을 업데이트 하게 되는데 이것이 현재 HTML5가 되었다.<ref>초초의 다락방, 〈[https://cho2.tistory.com/entry/HTML5%EC%9D%98-%EB%93%B1%EC%9E%A5%EB%B0%B0%EA%B2%BD 등장배경]〉,《티스토리》, 2015-01-30</ref>

== 역사 ==
HTML5 표준화 일정
* 2006.06 : 웹 하이퍼텍스트 워킹그룹([[WHATWG]]) 출범> / Web Form 2.0, Web Applications 1.0
* 2007.03 : 새로운 HTML 워킹 그룹 생성
* 2007.05 : HTML5와 Web Forums 2.0 스펙 채택 - 리뷰 기반으로
* 2007.11 : HTML5 디자인 원칙 작업 초안
* 2009.10 : W3C에서 [[XHTML]] 전환 실패를 인정함
* 2010.01 : HTML5 Last Call 작업 초안
* 2010.08 : HTML5 Working Draft 공개
* 2011.05 : HTML5 최종 초안 (Last Call Working Draft)
* 2012.02 : HTML5 후보 표준안 (Candidate Recommendation) - 2개 이상의 브라우저에서 테스트 완료
* 2014.01 : HTML5 제안 표준안 (Proposed Recommendation) - 브라우저 업체의 피드백 반영
* 2014.02 : HTML5 최종 표준안 (Recommendation)
* 2016.11 : HTML5의 버전업인 HTML5.1이 최신 표준으로 지정되었다.
* 2017.12 : HTML5.1의 버전업인 HTML5.2가 최신 표준으로 지정되었다. 또한 HTML5.3이 워킹 드래프트 단계에 돌입했다.
<ref>나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5 </ref>
<ref>정민권, 〈[http://doomok.dothome.co.kr/html5/html5.html HTML5의 역사]〉,《네이버 카페》, 2012년</ref>
<ref>위키백과 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5</ref>

== 특징  ==
HTML 5는 이전 HTML 보다 동시에 많은 작업을 할 수 있다. HTML 5는 다른많은 부가 기능을 제공함으로써 다른 외부 [[Active-X]]와 같은 [[plug-ins]] 를 사용하지 않고도 웹 서비스를 제공할 수 있을 정도로 많은 기능이 추가 되 었고 기존의 웹 문서에서는 HTML만으로 웹 서비스를 구성하는 것이 불가능하였지만 HTML5로 넘어오면서 클라이언트와 서버와의 통신이 가능하게 되었다. 이로 인해 인터넷 브라우저상에서 화려한 그래픽 효과를 구현하며, 음악ㆍ동영상을 자유롭게 감상할 수 있고 그래픽 처리, 위치정보 제공 등 다양한 기능을 제공함으로써, 웹 자체에서 처리할 수 있는 기능이 대폭 향상되었다.

===HTML5의 주요기능===
* Device AccessDEVICE ACCESS : 카메라, 동작센서 등의 H/W 기능을 웹에서 직접적으로 제어
* CONNECTIVITY(Web Socket) : 웹 (클라이언트)에서 서버 측과 직접적인 양방향 통신 가능
* 3D, GRAPHICS & EFFECTS : 다양한 2차원 및 3차원 그래픽 기능을 지원
* Styling Effects(CSS3) : 글씨체, 색상, 배경 등 다양한 스타일 및 이펙트 기능 제공
* MULTIMEDIA : 비디오 및 오디오 기능을 자체적으로 지원
* OFFLINE & STORAGE : 네트워크 미지원 환경에서도 웹 이용을 가능하게 함
* Geo-Location: GPS없이도 단말기의 지리적인 위치 정보를 제공
* SEMANTICS : 웹 자료에 의미를 부여하여 사용자 의도에 맞는 맞춤형 검색 제공

===HTML5 디자인 원칙 : 호환성===
* 콘텐츠의 호환성 : HTML5 이전 버전으로 제작한 콘텐츠도 문제없이 이용 가능해야 한다.
* 이전 브라우저와의 호환성 : HTML5 가 지원되지 않는 이전 버전의 브라우저에서도 이용 가능해야 한다.
* 이용 방법의 호환성 : 기존에 HTML 태그 사용법을 최대한 사용가능하도록 해야 한다.
* 기능의 재사용 : 각각의 브라우저에서만 사용 가능한 기능들을 통합하여 공통적으로 사용할 수 있어야 한다.
* 혁신보다는 발전을 우선 : HTML5는 새로운 언어를 구현하는 것이 아니므로 이미 사용 중인 HTML을 보다 사용하기 쉽도록 재구성하도록 한다.
<ref>복세편살 개발 라이프, 〈[https://www.leafcats.com/99 HTML5 탄생 배경과 HTML5의 특징]〉,《티스토리》, 2017년
</ref>
<ref>likingyo, 〈[https://blog.naver.com/likingyo/221079942961 HTML5의 핵심적인 특징]〉,《네이버 블로그》, 2017-08-22
</ref>
<ref>webclub, 〈[https://webclub.tistory.com/491 HTML5란 무엇인가?]〉,《티스토리》, 2016년
</ref>

== 활용  ==
HTML5는 개발자들 사이에서 최신 웹 애플리케이션을 만들 데에도 활용되고 있다. HTML5를 지원하고 활용한 대표적인 프로그램으로는 어도비 엣지([[Adobe Edge]]), 어도비 드림위버 CS6, 어도비 콜드퓨전 10, 센차 아키텍트 2([[sencha Architect 2]]). 센차 터치 2([[Sencha Touch 2]]), 도조 파운데이션 마케타([[Dojo Foundation Maqetta]]), 마이크로소프트 비주얼 스튜디오 2010 서비스 팩 1, 젯브레인스 웹스톰 4.0([[JetBrains WebStorm 4.0]]), [[구글 웹 툴킷]] 등등 HTML5를 활용한 프로그램들이 점점 더 많아지고 있으며 다양한 웹사이트에서 또한 활용되고 있다. 이에 따라 애플ㆍ마이크로소프트(MS), 구글, 페이스북 등 글로벌 IT 기업들은 HTML5 시대 주도권을 잡고 활용하기 위해 치열한 경쟁에 돌입하기도 했다.

<ref>InfoWorld, 〈[http://www.itworld.co.kr/print/76718 HTML5를 최대한 활용하기 위한 9가지 프로그래밍 도구]〉, 《아이티월드》
</ref>

== 종류(버전)  ==
* '''HTML5'''는 HTML의 완전한 5번째 버전으로 월드 와이드 웹 (World Wide Web)의 핵심 마크업 언어이다.
* '''HTML5.1'''은 기본 HTML5에 버그를 고치고 추가기능을 포함한 업그레이드 버전이다.<ref>나무위키 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5</ref>

== 문제점과 대안  ==
HTML5의 문제점을 꼽자면 보안에 관한 이야기가 많이 나온다. 아래는 보안 취약점과 그 대응 방안이다.

* 추가된 속성 및 태그를 이용한 XSS 공격 : HTML5에서 새로 추가된 태그와 기존 Form 태그에 추가된 신규 속성에 대하여 공격이 가능하다. 이에 대한 대응을 위해서는 공격 가능 항목에 대한 테스트와 점검 목록의 지속적인 업데이트가 필요하다.

* [[CORS]]를 이용한 [[CSRF]] 공격 : CORS는 서로 다른 도메인 간에도 [[Ajax]]로 요청을 주고 받을 수 있게 하는 표준이다.html5 에는  XHR level 2라는 스펙이 추가 되었는데 , 여기서  [[XHR]]이란 Ajax의 XMLHttpRequest를 줄인 말로,기존 Level 1에서는 SOP에의해 COR이 제한되었으나,이 XHR2는 COR를 가능하게 해준다,이 때 기존에 없던 'Origin' 헤더가 포함되는데,이 헤더는 COR을 발생시킨 도메인의 정보를 포함하며, 받는 도메인 측에서도 출처를 확인할 수 있도록 한다.이러한 과정에서 보안취약점이 발생하게 되는데, 이에 대한 대응을 위해서는 접근을 허용하는 발송처에 대한 설정에 주의하고 "Access-control-Allow-Origin::*"또는 "Access-control-Allow-Credentials: true"와 같은 코드 패턴은 사용해서는 안된다.

*웹 워커를 이용한 DDos공격 : 브라우저는 페이지의 자바스크립트를 처리하기 위해 일반적으로 한 개의 스레드를 이용한다.이 자바스크립트를 백그라운드에서 독립적으로 실행하기 위해 HTML5에서 등장한 API가 웹 워커이다.이 떄,워커를 생성하고 메시지를 송수신 하는데, 이 특징을 이용하여 [[디도스]](DDoS) 공격에 약용할 수 있다.<ref>jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357 html5 보안취약점과 대응방안]〉,《네이버 블로그》, 2015-01-07
</ref>

== 평가 및 전망 ==
; HTML5로 인한 명실상부한 One source Multi Device가 가능함에 따라 콘텐츠의 활성화 기반 마련
* 기존의 웹 콘텐츠의 경우, One source, One Device에 운영되었으나, HTML5가 적용됨에 따라 비로소 표준을 따르는 대부분의 기종(브라우저)를 수용하는 환경이 되었음
* 이에 따라 개발하는 콘텐츠가 다양한 화면크기, 운영체제에서도 운영될 수 있도록 통합화된 교수 전략 및 인터페이스, 내용 설계가 요구됨

; 웹 응용의 공통 개발 및 활용 환경 조성에 따른 프로그램의 개발, 갱신, 관리의 용이성 제고
* 웹 응용 프로그램의 공통 활용 환경이 조성됨에 따라 하나의 응용 프로그램의 활용이 이전보다 훨씬 배가됨에 따라 개발자의 수익성이 크게 증대될 수 있음
* 또한 웹 응용 프로그램의 갱신 시 One source만 수정하면 되어 이의 관리가 매우 쉬워짐

; 구글, 애플의 포털 홈페이지에서와 같이 웹 포탈의 HTML5로의 대전환 필요
* 국내 대부분의 기관 홈페이지의 경우 특정 브라우저에서만 운영이 되는 한계가 있었고, 모바일의 등장에 따라 시험 수준의 특정 기종에만 운영되는 모바일 프로그램이 개발되어 적용되고 있음
* 웹 포탈의 경우 점진적으로 HTML5를 도입함에 따라 Multi Device가 수용될 수 있도록 할 필요가 있음
* 이를 위해서는 특정 플러그인, Active-X 등의 지양으로 웹 응용 프로그램의 중복 개발 및 노력을 절감하여 효율을 기할 필요가 있음

; 웹 응용의 표준화와 오픈화로 인터넷 문화의 확산 및 정보격차 가속화
* 웹 응용 프로그램의 특정 브라우저, 특정 기종의 이용 환경에서 공통 이용 환경으로의 전환에 따라 웹 응용의 활성화 및 인터넷 문화의 확산이 예상됨
* 그러나 이러한 인터넷 문화에 아직 접하지 못하는 세대 및 계층과의 정보 격차가 가속화됨에 따라 이들의 생활 수준 및 의식에 많은 차이가 발생하며 통합에 장애 요인으로의 작용이 예상됨<ref>유재택, 〈[http://www.keris.or.kr/upload/board01/1308031227939_550709374.pdf 웹 표준 언어(HTML5) 동향 및 전망]〉, 《한국교육학술정보원》, 2011년</ref>

{{각주}}

==참고자료==
*초초의 다락방, 〈[https://cho2.tistory.com/entry/HTML5%EC%9D%98-%EB%93%B1%EC%9E%A5%EB%B0%B0%EA%B2%BD 등장배경]〉,《티스토리》, 2015-01-30
*나무위키 공식 홈페이지 - https://namu.wiki/w/HTML5 
*정민권, 〈[http://doomok.dothome.co.kr/html5/html5.html HTML5의 역사]〉,《네이버 카페》, 2012년
*〈[https://ko.wikipedia.org/wiki/HTML5 HTML5]〉, 《위키백과》
*나무위키 공식 홈페이지 - https://ko.wikipedia.org/wiki/HTML5
*복세편살 개발 라이프, 〈[https://www.leafcats.com/99 HTML5 탄생 배경과 HTML5의 특징]〉,《티스토리》, 2017년
*likingyo, 〈[https://blog.naver.com/likingyo/221079942961 HTML5의 핵심적인 특징]〉,《네이버 블로그》, 2017-08-22
*webclub, 〈[https://webclub.tistory.com/491 HTML5란 무엇인가?]〉,《티스토리》, 2016년
*jvioonpe, 〈[http://blog.naver.com/PostView.nhn?blogId=jvioonpe&logNo=220232089357 html5 보안취약점과 대응방안]〉,《네이버 블로그》, 2015-01-07
*InfoWorld, 〈[http://www.itworld.co.kr/print/76718 HTML5를 최대한 활용하기 위한 9가지 프로그래밍 도구]〉, 《아이티월드》
*유재택, 〈[http://www.keris.or.kr/upload/board01/1308031227939_550709374.pdf 웹 표준 언어(HTML5) 동향 및 전망]〉, 《한국교육학술정보원》, 2011년

== 같이 보기 ==
* [[HTML]]
* [[W3C]]
* [[팀 버너스-리]]

{{프로그래밍 언어|검토 필요}}
[[분류:퍼블리싱]]