Introduction
HTML stands for HyperText Markup Language and is a language for describing web pages. Web pages consist of markup tags and plain text.
HTML History
- 1995 - HTML 2.0 the first standardized version of HTML
- 1997 - HTML 3.2 but was largely ignored by browser developers
- 1999 - HTML 4.0 the standard for web authoring
- 2004 - The Web Hypertext Application Technology Working Group (WHATWG) begins work on what will become HTML5
- 2007 - The World Wide Web Consortium (W3C) adopts WHATWG's work and renames it to HTML5
- 2010 - Apple and Google push for public adoption of HTML5
HTML5
A new version of HTML will soon be the standard for web pages and supported in the latest browsers. HTML5 will be the new standard for HTML, XHTML, and the HTML DOM.
Note: HTML5 has not been approved by the World Wide Web Consortium (W3C), therefore, the HTML5 specific areas of this guide are subject to change.
HTML5 - New Features
Some of the new features in HTML5 are:
- Functions for embedding audio, video, and graphics
- Client-side data storage
- Interactive documents
- New structural elements
<article>,<header>,<footer>,<nav>,<section>, and<figure> - New form controls calendar, date, time, email, url, search
- JavaScript enhancements
HTML5 - Browser Support
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, Opera, and Microsoft Internet Explorer 9.0 all support many of the new HTML5 features.
In addition, the mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.
Specific browsers supporting HTML5 are:
- IE 9+ (Windows)
- Firefox 3.0+ (all operating systems)
- Safari 3.0+ (Windows, OS X, and iPhone OS 1.0+ operating systems)
- Chrome
3.0.195+ (Windows)
5.0.375+ (all operating systems) - Opera 9.5+ (all operating systems)
Note: With all the current "buzz" regarding HTML5, support for various HTML5 features within browsers varies almost daily. HTML feature support information listed within the Quick Guide may become outdated quickly. Refer to the internet for updated information and watch for updates to the Quick Guide.
Recommendation: When developing web pages using HTML5, it is recommended to detect support for individual HTML5 features using JavaScript. To help with this, use Modernizr, a JavaScript library that detects support for HTML5 and CSS3 features.
HTML5 - New/Updated Elements
Since HTML4.01 was approved, some HTML elements are now obsolete, never used, or not used the way they were intended. These elements have been removed or re-written in HTML5.
In addition, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.
New Markup Elements
The following table lists the new elements for better structure:
| Tag | Description |
|---|---|
| <article> | For external content, like text from a news-article, blog, forum, or any other content from an external source |
| <aside> | For content aside from the content it is placed in. The aside content should be related to the surrounding content |
| <command> | A button, or a radiobutton, or a checkbox |
| <details> | For describing details about a document, or parts of a document |
| <summary> | A caption, or summary, inside the details element |
| <figure> | For grouping a section of stand-alone content, could be a video |
| <figcaption> | The caption of the figure section |
| <footer> | For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information |
| <header> | For an introduction of a document or section, could include navigation |
| <hgroup> | For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings |
| <mark> | For text that should be highlighted |
| <meter> | For a measurement, used only if the maximum and minimum values are known |
| <nav> | For a section of navigation |
| <progress> | The state of a work in progress |
| <ruby> | For ruby annotation (Chinese notes or characters) |
| <rt> | For explanation of the ruby annotation |
| <rp> | What to show browsers that do not support the ruby element |
| <section> | For a section in a document. Such as chapters, headers, footers, or any other sections of the document |
| <time> | For defining a time or a date, or both |
| <wbr> | Word break. For defining a line-break opportunity. |
New Media Elements
HTML5 provides a new standard for media content:
| Tag | Description |
|---|---|
| <audio> | For multimedia content, sounds, music or other audio streams |
| <video> | For video content, such as a movie clip or other video streams |
| <source> | For media resources for media elements, defined inside video or audio elements |
| <embed> | For embedded content, such as a plug-in |
New Canvas Element
The canvas element uses JavaScript to make drawings on a web page.
| Tag | Description |
|---|---|
| <canvas> | For making graphics with a script |
New Form Elements
HTML5 offers more form elements, with more functionality:
| Tag | Description |
|---|---|
| <datalist> | A list of options for input values |
| <keygen> | Generate keys to authenticate users |
| <output> | For different types of output, such as output written by a script |
New Input Type Attribute Values
Also, the input element's type attribute has many new values, for better input control before sending it to the server:
| Type | Description |
|---|---|
| tel | The input value is of type telephone number |
| search | The input field is a search field |
| url | The input value is a URL |
| The input value is one or more email addresses | |
| datetime | The input value is a date and/or time |
| date | The input value is a date |
| month | The input value is a month |
| week | The input value is a week |
| time | The input value is of type time |
| datetime-local | The input value is a local date/time |
| number | The input value is a number |
| range | The input value is a number in a given range |
| color | The input value is a hexadecimal color, like #FF8800 |
