HTML5 개요

각 장의 HTML5 예제

예제

<!DOCTYPE html>
<html>
<body>
<video width="420" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
 브라우저는 비디오 태그를 지원하지 않습니다.
</video>
</body>
</html>

직접 테스트

이 예제가 어떻게 실행되는지 확인하려면 '직접 테스트'를 클릭하세요.

HTML5는 무엇인가요?

HTML5는 가장 최신의 HTML 표준입니다.

HTML5는 풍부한 웹 내용을 전달하기 위해 특별히 설계되었으며, 추가 플러그인이 필요하지 않습니다.

HTML5는 새로운 의미, 그래픽 및 멀티미디어 요소를 가지고 있습니다.

HTML5는 새로운 요소와 새로운 API를 제공하여 웹 애플리케이션을 구축하는 것을 간소화합니다.

HTML5는 플랫폼 간의, 다양한 유형의 하드웨어(PC, 태블릿, 휴대폰, TV 등)에서 실행되도록 설계되었습니다.

주석:다음 장에서, 고대 버전의 브라우저가 HTML5를 처리하는 방법을 배울 것입니다.

HTML5에서 새로운 내용이 무엇인가요?

HTML5의 새로운 문서 타입 (DOCTYPE) 선언도 매우 간단합니다:

<!DOCTYPE html>
새로운 문자 인코딩 (charset) 선언도 매우 간단합니다:
<meta charset="UTF-8">

HTML5 예제:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서의 제목</title>
</head>
<body>
문서의 내용......
</body>
</html>

주석:HTML5에서 기본 문자 인코딩은 UTF-8입니다.

HTML5 - 새로운 속성 문법

HTML5 표준은 4가지 다른 속성 문법을 허용합니다.

이 예제는 <input> 태그에서 사용할 수 있는 다양한 문법을 보여줍니다：

타입 예제
비어있음 <input type="text" value="Bill Gates" disabled>
비표시된 쌍따옴표 <input type="text" value=Bill Gates>
둘러싸인 쌍따옴표 <input type="text" value="Bill Gates">
단일 쌍따옴표 <input type="text" value='Bill Gates'>

HTML5 표준에서는, 속성에 대한 필요에 따라 4가지 문법 모두를 사용할 수 있습니다.

HTML5 - 새로운 기능

HTML5의 가장 흥미로운 새로운 기능 중 일부는：

  • 새로운 의미 요소, 예를 들어 <header>, <footer>, <article>, 및 <section>.
  • 새로운 양식 컨트롤러, 예를 들어 숫자, 날짜, 시간, 캘린더 및 슬라이더.
  • 강력한 이미지 지원（<canvas>와 <svg>를 통해 제공）
  • 강력한 멀티미디어 지원（<video>와 <audio>를 통해 제공）
  • 강력한 새로운 API, 예를 들어 쿠키를 대체하는 로컬 스토리지.

HTML5 - 제거된 요소

다음 HTML 4.01 요소는 HTML5에서 제거되었습니다：

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>