This post is general overview of the new HTML5 features. It describes what you can do with these, but not how. If you are looking for tutorials, check the free DZone cheat sheets or Tutorials Point for code examples.For a list of special HTML characters, see here.
Reminder
Before we cover HTML5, here is reminder about HTML. It stands for HyperText Markup Language. HTML documents are nothing more than traditional documents with text, plus extra annotations describing the nature of the corresponding text (i.e., markup).For example, some parts of the text can be marked with a header tag (<h1>, <h2>...) to denote a paragraph header. Many tags are available, they structure the document. A HTML document can contain references to other HTML documents, facilitating the navigation between HTML documents. A document can be used to collect information from users via forms.
This an example of a very simple HTML5 document:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My HTML5 Document!</title>
</head>
<body>
This is the content of the document!
</body>
</html>
HTML documents can be made more interactive and dynamic with the help of Javascript, a scripting language running inside web browsers. For example, if a mouse pointer passes over an image, one can display a special message box, and close it once the pointer leaves the image. These actions are triggered by events (mouse click, mouse hovering over an image, etc...).
Before HTML5
Before version 5 of HTML, the community was suffering from the following issues:- Multiple DOCTYPEs and Document Type Definitions (DTD) - A DOCTYPE is linking an HTML document to a DTD. DTD's were used to define different types of HTML markup. HTML 4.01 had 3 DTDs. This level of complexity did not add value. HTML5 has only one DTD, triggered by one DOCTYPE only. It is compatible with older versions of HTML.
- Different processing of invalid HTML documents - Browsers were processing invalid HTML differently, leading to different user experience. HTML5 specifies how errors should be handled.
- Users were exposed to HTML document errors - This lead to a bad user experience.
- Some HTML tags were purely presentational - These tags (bgcolor, align, big, center, etc...) have been removed in HTML5, since these are better handled with CSS.
- Usability of frames, frameset and noframes - Frames allowed one to divide the screen displaying HTML into several parts. Each part would display some HTML content. This feature has been suppressed in HTML5.
- No support for multimedia documents - Before HTML5, one needed to use 3rd party products, such as Flash to play videos, for example. HTML5 introduced new markup such as <video> to solve this issue.
- Multiple character encodings - Specifying the character encoding is now mandatory in HTML5.
New HTML5 Features
The new features of HTML5 are:- Document Object Model (DOM) - HTML5 documents are now represented as a tree structure, where each tag is a leaf, which may contain child tag leaf elements. This facilitates the selection of tags in CSS with selectors. One can also manipulate this structure (with Javascript) to add or remove elements.
- New Tags - A set of new tags (<footer>, <article>, <audio>...) to better describe the contents of HTML documents.
- New Attributes - HTML tags can have attributes (for example, the class attribute in <p class="someLayout">). HTML introduces new ones (hidden, content, editable...).
- New Input Elements - New elements can be used in forms to get input from customers (date, email, number, range...).
- Canvas - This new tags enables the drawing of graphs within HTML documents. This can be performed dynamically with Javascript.
- Mathematical Markup Language MathML - This is a set of new tags for mathematical content.
- Offline Storage - Contrary to cookies, which are limit to 4K and which are transferred with each HTTP request, this feature allows the storage of structured information on the client side.
- New Events - HTML5 defines new media, windows, form, drag-n-drop and mouse events.
- Geolocation API - This API can be used to retrieve the location of the user.
- Scalable Vector Graphics SVG - This tag enables the creation of graphics using the SVG language. This is different than canvas, since it does not require Javascript.
- Web SQL - This API offers the possibility of accessing databases on the client side.
- Server-Sent Events SSE - This is a possibility to send events from the server to the client.
- WebSockets - This features enables bidirectional communication between client and server.
- Microdata - It is a mean to parametrize HTML content, by fetching items and extracting content to be inserted from their properties.
- Web Workers - This is the possibility to run long tasks on a different thread than the Javascript thread.
No comments:
Post a Comment