(HTML5 01) HTML5 소개

in HTML

SoloLearn HTML 번역


Introduction to HTML5

HTML5 소개


  • When writing HTML5 documents, one of the first new features that you’ll notice is the doc type declaration:
    • HTML5 문서를 작성할 때 가장 먼저 알아챌 수 있는 기능 중 하나는 doc type 선언이다.
<!DOCTYPE HTML>


  • The character encoding (charset) declaration is also simplified:
    • 문자 인코딩(charset) 선언도 단순화되었다.
<meta charset="UTF-8">


New Elements in HTML5

  • <article>
  • <aside>: Defines content aside from the page content.
    • 페이지의 content를 제외하고 content를 정의한다.
  • <audio>: Defines sound content.
    • 사운드 content를 정의한다.
  • <canvas>: Used to draw graphics, on the fly, via scripting (usually JavaScript).
    • 스크립팅을 통해 즉시 그래픽을 그리는 데 사용된다.
  • <datalist>: Specifies a list of pre-defined options for input controls.
    • input control에 대해 미리 정의된 옵션 list를 지정한다.
  • <details>
  • <embed>: Defines a container for an external (non-HTML) application.
    • 외부 (HTML이 아닌) 애플리케이션에 대한 컨테이너를 정의한다.
  • <footer>: Defines a footer for a document or section.
    • 문서나 섹션의 footer를 정의한다.
  • <header>: Defines a header for a document or section.
    • 문서나 섹션의 header를 정의한다.
  • <nav>: Defines navigation section.
    • 네비게이션 섹션을 정의한다.
  • <output>
  • <progress>: Represents the progress of a task.
    • 작업 진행 상황을 나타낸다.
  • <section>: Defines a section in a document.
    • 문서의 섹션을 정의한다.
  • <video>: Defines video content.
    • 비디오 content를 정의한다.


The default character encoding in HTML5 is UTF-8.

HTML5의 기본 문자 인코딩은 UTF-8이다.


New in HTML5

HTML5의 새로운 기능


Forms

form


  • The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user experiences.
    • Web Forms 2.0 명세를 사용하면 보다 강력한 form을 생성하고, 더 설득력 있는 사용자 경험을 얻을 수 있다.
  • Date pickers, color pickers, and numeric stepper controls have been added.
    • 날짜 선택기, 숫자 stepper control이 추가되었다.
  • Input field types now include email, search, and URL.
    • input field type에 이메일, 검색, URL이 포함된다.
  • PUT and DELETE form methods are now supported.
    • PUT과 DELETE form 메소드가 지원된다.


Integrated API

통합 API


  • Drag and Drop
    • 드래그 & 드랍
  • Audio and Video
  • Offline Web Applications
  • History
  • Local Storage
    • 로컬 저장소
  • Geolocation
    • 지리적 위치
  • Web Messaging
    • 웹 메시지


QUIZ

  • Drag and drop from the options below to create a valid HTML5 doctype:
    • 유효한 HTML5 doctype을 생성해라.
<!DOCTYPE HTML>
<html>
   <head>
      <title>Title</title>
   </head>
   <body>
      The content of the document
   </body>
</html>


  • Which element/feature is not new in HTML5?
    • HTML5에서 새로 추가되지 않은 element/기능은 무엇인가?

[ ] Geolocation

[ ] Drag and drop

[ ] Audio and video elements

[ ] Image