HTML5 변경사항
HTML5에서 추가된 요소 및 타입
- 의미(semantic) 요소 : <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
- 멀티미디어 요소 : <video>, <audio>
- 그래픽 요소 : <canvas>, <svg>
- input 요소의 타입 : number, date, time, calendar, range
HTML5에서 추가된 자바스크립트 API
- Geolocation
- Drag and Drop
- Web Storage
- Application Cache
- Web Worker
- Server Sent Events
HTML5에서 삭제된 기존 요소
| 삭제된 기존 요소 | 설명 |
|---|---|
| <acronym> | <abbr> 태그로 대체 |
| <applet> | <object> 태그로 대체 |
| <basefont> | CSS로 적용 |
| <big> | CSS로 적용 |
| <center> | CSS로 적용 |
| <dir> | <ul> 태그로 대체 |
| <font> | CSS로 적용 |
| <frame> | 삭제 |
| <frameset> | 삭제 |
| <noframes> | 삭제 |
| <strike> | CSS로 적용 |
| <tt> | CSS로 적용 |
HTML5에서 변경된 사항들에 대한 더 자세한 정보를 원한다면, W3C 공식 사이트를 방문하여 확인할 수 있습니다.
W3C HTML5 Recommendation 28 October 2014 =>
웹 브라우저의 HTML5 지원
현재 최신 버전의 주요 웹 브라우저들은 모두 HTML5를 지원하고 있습니다.
하지만 HTML5의 새로운 요소들이 구형 버전의 웹 브라우저에서는 제대로 표현되지 못할 수도 있습니다.
따라서 구형 버전의 웹 브라우저에 자신이 알지 못하는 새로운 HTML 요소를 다루는 방법을 알려줘야만 합니다.
다음 예제는 웹 브라우저가 알지 못하는 새로운 HTML 요소를 어떻게 다뤄야 하는지 알려주는 방법을 보여줍니다.
예제
<script>document.createElement("newPara")</script>
<style>
newPara { background-color: #F0F0F0; display: block; padding: 10px; font-size: 14px; }
</style>
...
<newPara>우리 수업에서만 사용하는 단락입니다!</newPara>
위와 같은 방법을 사용하면 모든 새로운 요소를 웹 브라우저에 설명할 수 있습니다.
하지만 익스플로러 8과 그 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않습니다.
따라서 위와 같은 방법이 아닌 HTML Shiv 방법을 사용해야 합니다.
HTML Shiv 방법
우선 아래의 주석 코드를 <head>태그 내에 삽입합니다.
그러면 익스플로러 8과 그 이전 버전의 브라우저만이 이 자바 스크립트 파일을 읽고 적용할 것입니다.
이와 같은 방법으로 익스플로러 8과 그 이전 버전에서도 HTML5의 새로운 요소들을 자유롭게 사용할 수 있습니다.
이러한 방법을 HTML Shiv 방법이라고 하며, Sjoerd Visscher에 의해 개발되었습니다.
예제
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
