HTML Tutorial | Getting Started with HTML5 | HTML5 Changes

Tags:

Elements and Types Added in HTML5

  • Semantic elements: <header>, <nav>, <main>, <section>, <aside>, <article>, <footer>, <figure>
  • Multimedia elements: <video>, <audio>
  • Graphics elements: <canvas>, <svg>
  • Input element types: number, date, time, calendar, range

JavaScript APIs Added in HTML5

  • Geolocation
  • Drag and Drop
  • Web Storage
  • Application Cache
  • Web Worker
  • Server Sent Events

Existing Elements Removed in HTML5

Removed element Description
<acronym> Replaced by the <abbr> tag
<applet> Replaced by the <object> tag
<basefont> Use CSS instead
<big> Use CSS instead
<center> Use CSS instead
<dir> Replaced by the <ul> tag
<font> Use CSS instead
<frame> Removed
<frameset> Removed
<noframes> Removed
<strike> Use CSS instead
<tt> Use CSS instead

 

For more information about the changes in HTML5, refer to the official W3C site.

W3C Recommendation, 14 December 2017

Web Browser Support for HTML5

Current versions of major web browsers all support HTML5.
However, new HTML5 elements may not render correctly in older browser versions.
Therefore, you need to tell older browsers how to handle new HTML elements they do not recognize.

The following example shows how to tell a browser how to handle a new HTML element it does not recognize.

<script>document.createElement("mytag")</script>
<style>
  mytag { background-color: #fff2cc; font-size: 20px; font-weight: 600} 
</style>
<mytag>This tag is used only here.</mytag>

Run code

Using this method, you can display any new element in a web browser.

Internet Explorer versions earlier than 8 do not allow HTML elements to be newly defined this way.
Therefore, you need to use HTML5Shiv instead of the method above.

HTML5Shiv

HTML5Shiv is a library developed so that new HTML5 elements can be used freely in Internet Explorer 8 and earlier. It was developed by Sjoerd Visscher.

Detailed documentation and downloads are available on GitHub.
https://github.com/afarkas/html5shiv

To apply it, insert the library file inside the <head> tag together with the conditional comment shown below. Then only Internet Explorer 8 and earlier browsers (IE6-9) will read and apply this JavaScript file.

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

References