---
title: HTML5
slug: Web/HTML/HTML5
translation_of: Web/Guide/HTML/HTML5
---
<p><strong>HTML5</strong>는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML5 명세</a>는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 <a class="external" href="http://www.mozilla.com/en-US/firefox/" title="http://www.mozilla.com/en-US/firefox/">Firefox</a> 및 <a href="/ko/List_of_Mozilla-Based_Applications" title="ko/List of Mozilla-Based Applications">다른 많은 제품</a>으로 사용되어 있는 Mozilla의 <a href="/ko/Gecko" title="ko/Gecko">Gecko</a> 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.</p>

<p>(<a href="/ko/HTML/HTML5/HTML5_Thematic_Classification" title="ko/HTML/HTML5/HTML5 Thematic Classification">HTML5의 문서에 대한 다른 분류</a>도 참고하세요.)</p>

<h2 id="HTML5_소개">HTML5 소개</h2>

<dl>
 <dt><a href="/ko/HTML/HTML5/Introduction_to_HTML5" title="ko/HTML/Introduction to HTML5"><strong>HTML5의 소개</strong></a></dt>
 <dd>이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.</dd>
</dl>

<h2 id="HTML5의_요소">HTML5의 요소</h2>

<dl>
 <dt><a href="/ko/HTML/HTML5/HTML5_Tags_List" title="ko/HTML/HTML5/HTML5 Tags List"><strong>HTML5 요소·태그의 목록</strong></a></dt>
 <dd>현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.</dd>
 <dt><a href="/Ja/Using_HTML5_audio_and_video" title="ko/Using_audio_and_video_in_Firefox">오디오/비디오 사용하기</a></dt>
 <dd>Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.</dd>
 <dt><a href="/ko/HTML/Forms_in_HTML" title="ko/HTML/HTML5/Forms in HTML5">HTML5 웹 폼양식</a></dt>
 <dd>HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.</dd>
 <dt><a href="/ko/Sections_and_outlines_of_an_HTML5_document" title="ko/Sections and Outlines of an HTML5 document">HTML5 섹션과 아웃라인</a></dt>
 <dd>HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.</dd>
 <dt>{{ HTMLElement("mark") }} 요소</dt>
 <dd>mark 요소는 텍스트중에서의 특별한<em> 관련성</em>을 강조시키기 위해서 이용합니다.</dd>
 <dt>{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소</dt>
 <dd>주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.</dd>
</dl>

<h3 id="Canvas_기술_지원">Canvas 기술 지원</h3>

<dl>
 <dt><a href="/ko/Canvas_tutorial" title="https://developer.mozilla.org/ko/Canvas_tutorial">Canvas 튜토리얼</a></dt>
 <dd>새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.</dd>
 <dt><a href="/ko/Drawing_text_using_a_canvas" title="ko/Drawing_text_using_a_canvas"><code>canvas</code> 요소의 HTML5 text API</a></dt>
 <dd>{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.</dd>
</dl>

<h2 id="웹_애플리케이션_기능">웹 애플리케이션 기능</h2>

<dl>
 <dt><a href="/ko/HTML/Using_the_application_cache" title="ko/Offline_resources_in_Firefox">Firefox 오프 라인 자원</a></dt>
 <dd>Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.</dd>
 <dt><a href="/ko/Online_and_offline_events" title="ko/Online_and_offline_events">Online 이벤트와 Offline 이벤트</a></dt>
 <dd>Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.</dd>
 <dt><a href="/ko/DOM/Storage" title="ko/DOM/Storage">WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)</a></dt>
 <dd>클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.</dd>
 <dt><a href="/ko/HTML/Content_Editable" title="ko/HTML/Content Editable"><code>contentEditable</code> 속성： 웹 사이트 및 위키 편집 용이성</a></dt>
 <dd>HTML5 에서는 <code>contentEditable</code> 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.</dd>
 <dt><a href="/ko/Using_files_from_web_applications" title="ko/Using_files_from_web_applications">로컬 파일 사용하기</a></dt>
 <dd>새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 <a href="/ko/HTML/Element/Input#attr-type" title="ko/HTML/Element/input#attr-type"><strong>type</strong></a> 속성의 값에 <code>file</code>를 지정한 <code>{{ HTMLElement("input") }}</code> 요소에 새롭게 추가된 <a href="/ko/HTML/Element/Input#attr-multiple" title="ko/HTML/Element/input#attr-multiple"><strong>multiple</strong></a> 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.</dd>
</dl>

<h2 id="DOM_주요_기능">DOM 주요 기능</h2>

<dl>
 <dt><a href="/ko/DOM/document.getElementsByClassName" title="ko/DOM/document.getElementsByClassName">getElementsByClassName</a></dt>
 <dd>Document 및 Element 노드에 있어서의 <code>getElementsByClassName</code> 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.</dd>
 <dt><a href="/Ja/DragDrop/Drag_and_Drop" title="ko/DragDrop/Drag_and_Drop">드래그 앤 드롭</a></dt>
 <dd>HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.</dd>
 <dt><a href="/ko/Focus_management_in_HTML" title="ko/Focus_management_in_HTML">HTML 내 포커스 관리</a></dt>
 <dd>HTML5가 새로운 <code>activeElement</code> 속성과 <code>hasFocus</code> 속성이 지원되어 있습니다.</dd>
 <dt><a href="/ko/Web-based_protocol_handlers" title="ko/Web-based_protocol_handlers">웹 기반 프로토콜 핸들러</a></dt>
 <dd><code>navigator.registerProtocolHandler()</code>메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.</dd>
</dl>

<h2 id="HTML_파서">HTML 파서</h2>

<p>Gecko의 <a href="/ko/HTML/HTML5/HTML5_Parser" title="ko/HTML/HTML5/HTML5 parser">HTML5 표준 파서</a>(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}</p>

<h2 id="추가_변경사항">추가 변경사항</h2>

<ul>
 <li>HTML 문서에 있어서의 <code>localName</code> 및 <code>namespaceURI</code>는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, <code>localName</code>는 소문자를 돌려주어, HTML 요소의 <code>namespaceURI</code>는 <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>"</code>를 돌려줍니다.</li>
 <li>페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 <code>hashchange</code> 이벤트가 페이지에 보내집니다. 자세한 것은 <code><a href="/ko/DOM/window.onhashchange" title="ko/DOM/window.onhashchange">window.onhashchange</a></code>를 참조해 주십시오.</li>
 <li><code>class</code> 속성을 보다 간단하게 취급할 수 있도록 HTML5의 <code><a href="/ko/DOM/element.classList" title="ko/DOM/element.classList">element.classList</a></code>이 기술 지원되었습니다.</li>
 <li>문서에 즉시 생성되는 이벤트에 응하는 <code><a href="/ko/DOM/document.onreadystatechange" title="ko/DOM/document.onreadystatechange">document.onreadystatechange</a></code>와 <code><a href="/ko/DOM/document.readyState" title="ko/DOM/document.readyState">document.readyState</a></code>가 기술 지원되었습니다.</li>
 <li>표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.</li>
</ul>

<h2 id="HTML5의_일부로서_포함된_기술">HTML5의 일부로서 포함된 기술</h2>

<p>아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.</p>

<ul>
 <li><a href="/ko/WebGL" title="ko/WebGL">WebGL</a></li>
 <li><a href="/ko/DOM/FileReader" title="ko/DOM/FileReader">FileReader</a></li>
 <li><a href="/ko/DOM/XMLHttpRequest" title="ko/XMLHttpRequest">XMLHttpRequest</a></li>
 <li><a href="/ko/DOM/Locating_DOM_elements_using_selectors" title="ko/DOM/Locating DOM elements using selectors">querySelector(All)</a></li>
 <li><a href="/Ja/Using_geolocation" title="ko/Using geolocation">Geolocation</a></li>
 <li><a href="/ko/JavaScript/ECMAScript_5_support_in_Mozilla" title="ko/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li>
 <li><a href="/ko/CSS/CSS3" title="CSS3">CSS3</a></li>
 <li><a href="/ko/XBL2_specification_(external)" title="ko/XBL2 specification (external)">XBL2</a></li>
 <li><a href="/ko/DOM/Using_web_workers" title="ko/Using web workers">Web Workers</a></li>
 <li><a href="/ko/WebSockets" title="https://developer.mozilla.org/ko/WebSockets">Web Sockets</a></li>
 <li>JavaScript의 고속화</li>
</ul>

<h2 id="관련_문서">관련 문서</h2>

<p>웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：</p>

<ul>
 <li><a href="/ko/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li>
 <li><a href="/ko/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li>
 <li><a href="/ko/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li>
 <li><a href="/ko/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li>
 <li><a href="/ko/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li>
 <li><a href="/ko/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li>
 <li><a href="/ko/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li>
 <li><a href="/ko/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li>
 <li><a href="/ko/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li>
 <li><a href="/ko/Firefox_3.6_for_developers" title="ko/Firefox 3.6 for developers">Firefox 3.6 </a></li>
 <li><a href="/Ja/Firefox_3.5_for_developers" title="ko/Firefox 3.5 for developers">Firefox 3.5 </a></li>
 <li><a href="/ko/Firefox_3_for_developers" title="ko/Firefox 3 for developers">Firefox 3 </a></li>
 <li><a href="/ko/Firefox_2_for_developers" title="ko/Firefox 2 for developers">Firefox 2 </a></li>
 <li><a href="/ko/Firefox_1.5_for_developers" title="ko/Firefox 1.5 for developers">Firefox 1.5</a></li>
</ul>