Although HTML5 clearly represents a big step forward for web applications and what they are capable of, getting started with HTML5 is not all that difficult, especially if you already have a solid knowledge of HTML4.
In fact, the syntax of coding up a standard web page will be largely the same in many respects (differing mainly in instances where new tags or functionality are introduced). This is because HTML5 is designed to be backwards compatible so as not to break the millions of existing webpages already coded in HTML 4. Switching the entire web over to HTML5 will take years if not decades, and therefore it’s important to make HTML5 backwards compatible to previous versions of the HTML standard.
The HTML5 Specification
So while the syntax of writing simple HTML on the front end might not be a drastic departure, it’s important to note that the HTML5 spec covers much greater ground than HTML4 ever did. This is because HTML5 is intended as a successor not just to HTML4, but also to XHTML 1.0, and DOM Level2. These standards have now been rolled into HTML. The HTML5 spec also contains detailed parsing rules that are intended to greatly improve the interoperability of browsers and how they interpret webpages.
Of course, as a web developer or web designer, these back-end changes won’t be your major concern. So the most relevant part of the new standard will be places where HTML5 does diverge from HTML 4 in terms of the actual code, and understanding all the extra new features that have been added in to HTML5.
The HTML5 Doctype
One major difference in terms of coding is the simplification of the HTML doctype. Most webpages currently use some variation of the HTML4 doctype, of which there are many variations. All of this adds extra text to your HTML documents despite the fact that doctypes are often interpreted identically by browsers.
Clearing away some of this complexity, HTML5 introduces a much simpler format, which is simply:
<!DOCTYPE HTML>
HTML5 Character Encoding
HTML5 also simplifies some of the intricacies of specifying character encoding, simply requiring a tag with a charset attribute:
<meta charset=”UTF=8” />
New Elements in HTML5
A number of new elements are introduces in HTML5 that are intended to help browsers and applications better understand the structure and meaning of HTML pages.
These new elements include article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, ruby, section, source, summary, time and video. Several new attributes have also been added to existing elements to improve their functionality.
Forms in HTML5
Forms also see major updates in functionality as part of HTML5. In fact, improvements to forms were one of the main goals of HTML5 from the beginning, with the earlier Web Forms 2.0 specification being integrated into the HTML5 spec. The result is new forms and input types that allow you to create more powerful forms and inputs. HTML5 adds new controls to choose from such as date pickers, color pickers and numeric stepper controls, as well as new input types such as email, search and URL.
All of this intends to provide much richer functionality around HTML forms. HTML5 also introduces support for the put and delete form methods, allowing for submission of form input to a much wider array of applications.
HTML5 APIs
HTML5 introduces a number of integrated APIs which intend to make developing rich web applications much easier and standardize functionality that was previously only available via plugins. These APIs include the video and audio APIs, an offline apps API, an API to make page content directly editable, drag and drop functionality, local storage, and an API to control application protocols and media types. Other APIs like geolocation and web messaging will also be available to developers, although they are not technically considered part of the HTML5 spec.
Deprecated Tags
One of the main features of HTML5 is its back compatibility. With millions of pages on the web written in HTML4, it would be unrealistic to try to drop support for many elements, even those deprecated in HTML5.
Therefore, the HTML5 spec offers a different set of recommendations for authors and for user agents (browsers). Deprecated elements should not be used by authors, but browser makers should still provide support for these elements in order to ensure that backwards compatibility is maintained.
The following tags are being deprecated in HTML5: acronym, applet, basefont, big, center, dir, frame, frameset, font, isindex, noframes, s, strike, tt and u.
Some of these are all presentational tags that violated the style/ content separation that has served HTML so well. The styling previously made possible by these tags should now be implemented only via CSS. Others (such as frames) have been deprecated for accessibility reasons, and still others (like isindex) due to “obsolescence” - in other words, lack of use.
Deprecated Attributes
Several tag attributes have also been removed for various reasons. In general, these are presentational attributes, dropped in keeping with the content/style separation rule. In the table tag, for instance, the bgcolor attribute is gone, and the height and width attributes have been stripped from the td and tr tags.