HTML5 is a new and current version of HTML language with new elements and attributes.
It is a set of new technologies for creating more powerful websites, and it has introduced the API(Application Programming Interface) and DOM(Document Object Model).
Features:
- HTML5 has introduced new multimedia features that supports audio and video control using
- It has graphics elements including vector graphics and tags.
- It is introduced with two semantic tags <article> and <section> to help you increase your search engine visibility.
- It enables is to design more effective forms as there are different types of inputs, search and different fields for different purposes.
- HTML5 introduced geo-location services which makes one’s location information readily available.
- It gives an offline application cache facility that will load the page the user has visited even if the user is offline. This feature will help to load files much faster and reduces the load on the server.
Note: The default character encoding used by HTML5 is UTF-8.
New Added Elements in HTML5:
The new elements are:
HTML5 has introduced new semantic elements like <header>, <footer>, <article>, and <section>.
HTML5 has introduced new attributes of form elements like the number, date, time, calendar, and range.
It has introduced new graphic elements like <svg> and <canvas>.
It has introduced new multimedia elements like <audio> and <video>.
New APIs in HTML5:
- HTML Geolocation
- HTML Drag and Drop
- HTML Local Storage
- HTML Application Cache
- HTML Web Workers
- HTML SSE
Removed elements from HTML 5:
The elements which are removed from HTML 5 are listed below:
Removed Elements | Use Instead Elements |
---|---|
<acronym> | <abbr> |
<applet> | <object> |
<basefont> | CSS |
<big> | CSS |
<center> | CSS |
<dir> | <ul> |
<font> | CSS |
<frame> | |
<frameset> | |
<noframes> | |
<isindex> | <abbr> |
<strike> | CSS, <s> or <del></td> |
<tt> | CSS |
HTML Versions:
Different versions of HTML are:
Version | Year |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
HTML5 Browser Support:
HTML5 is supported in all modern browsers.
In all browsers, unrecognized elements are automatically handled as inline elements.
There might be a problem with some old browsers like Internat Explorer 6,7,8 which may not open the web page properly.
You can instruct older browsers to handle “unknown” HTML elements.
Define Semantic Elements as Block Elements:
The semantic elements defined by HTML5 are all block-level elements.
To fix the correct behavior of these elements in older browsers, you can set CSS display property for these elements to block.
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Add New Elements to HTML:
New elements can be added to an HTML page using a browser trick.
In this example, a new element is added called <demo> to an HTML page and defines the style for it.
The document.createElement(“demo”) JavaScript statement is needed to create a new element in IE 9, and earlier.
Example:
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("demo")</script>
<style>
demo {
display: block;
background-color: #f7f7f7;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h2> Heading </h2>
<demo> The demo Element </demo>
</body>
</html>