HTML 입문 | HTML5 시작 | HTML5 변경사항

Tags:

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 Recommendation, 14 December 2017

웹 브라우저의 HTML5 지원

현재 최신 버전의 주요 웹 브라우저들은 모두 HTML5를 지원하고 있다.
HTML5의 새로운 요소들이 구형 버전의 웹 브라우저에서는 제대로 표현되지 못할 수도 있다.
따라서, 구형 버전의 웹 브라우저가 알지 못하는 새로운 HTML 요소를 정보를 알려줘야 한다.

다음 예제는 웹 브라우저가 알지 못하는 새로운 HTML 요소를 어떻게 다뤄야 하는지 알려주는 방법이다.

<script>document.createElement("mytag")</script>
<style>
  mytag { background-color: #fff2cc; font-size: 20px; font-weight: 600} 
</style>
<mytag>여기서만 사용할 수 있는 태그입니다.</mytag>

코드 실행

위와 같은 방법을 사용하면 모든 새로운 요소를 웹 브라우저에 표현할 수 있다.

익스플로러 8 이전 버전에서는 위와 같이 HTML 요소를 새롭게 정의하는 것을 허용하지 않는다.
따라서, 위와 같은 방식이 아닌 HTML5Shiv을 사용해야 한다.

HTML5Shiv

HTML5Shiv은 익스플로러 8과 그 이전 버전에서도 HTML5의 새로운 요소들을 자유롭게 사용할 수 있도록 하기 위해 개발된 라이브러리이다. Sjoerd Visscher에 의해 개발되었다.

GitHub에 가면 자세한 설명과 다운로드가 가능하다.
https://github.com/afarkas/html5shiv

적용 방법은 아래와 같이 라이브러리 파일을 주석 코드과 함께 <head>태그 내에 삽입하면 된다. 그러면 익스플로러 8(IE6~9)과 그 이전 버전의 브라우저만이 이 자바 스크립트 파일을 읽고 적용할 수 있게 된다.

<head>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

참조




최종 수정 : 2021-08-27