1. Introduction to HTML5
HTML5, said to be the last version of HTML, introduces several new elements, drops several old elements and attributes, and streamlines the amount of code required to mark up a webpage. Parts of HTML5 are already supported by modern browsers.
First and foremost, the HTML5 doctype has been significantly reduced.
<!DOCTYPE html>
Elements Obsolete In HTML5
Several HTML elements become obsolete with the use of HTML5, as their functions are largely presentational and are either replaced or better performed by alternative elements and/or CSS.
| Element | Function | Notes |
|---|---|---|
| applet | Defined An Embedded Applet | Use <embed> or <object> Instead |
| acronym | Defined Acronyms | Use <abbr> Instead |
| bgsound | Use <audio> Instead | |
| dir | Defined A Directory List | Use <ul> Instead |
| frame | Defined On Particular Window Within a Frameset | |
| frameset | Defined a Frameset, Which Organized Multiple Windows | |
| noframes | Displayed Text For Browsers That Do Not Handle Frames | |
| isindex | Use an explicit form and text field combination instead. | |
| listing | ||
| xmp | Defined Preformatted Text | Use <pre> or <code> Instead |
| nextid | Use GUIDs Instead | |
| noembed | Use <object> Instead of <embed> When Fallback Necessary | |
| plaintext | Use "text/plain" MIME Type Instead | |
| rb | ||
| strike | Defined Strikethrough Text | Use <del> If Element Is Marking An Edit, Otherwise Use <s> Instead |
| basefont | Defined Default Font Properties For All Text In a Document | |
| big | Used to Make Text Bigger | Consider Using <h1>, <strong> or <mark> Instead |
| blink | Used to Make Text Blink | |
| center | Used to Center Align Text & Content | |
| font | Specified Font Face, Font Size & Font Color of Text | |
| marquee | ||
| multicol | ||
| nobr | ||
| spacer | ||
| tt | Defined Teletype Text | Consider Using <kbd>, <var>, <code> or <samp> Instead |
| u | Defined Underlined Text |
Attributes Obsolete In HTML5
A general rule of thumb for HTML5 would be to use attributes a little as possible and rely instead on CSS. The attributes that become obsolete with the use of HTML5 are:
| Attribute | Element | Notes |
|---|---|---|
| charset | <a> & <link> | Use An HTTP Content-Type Header on the Linked Resource Instead |
| coords | <a> | Use <area> Instead of <a> For Image Maps |
| shape | <a> | Use <area> Instead of <a> For Image Maps |
| methods | <a> & <link> | Use the HTTP OPTIONS Feature Instead |
| name | <a>, <embed>, <img> & <option> | Use the ID Attribute Instead |
| rev | <a> & <link> | Use the "rel" Attribute Instead |
| urn | <a> & <link> | Use the "href" Attribute Instead |
| nohref | <area> | Omitting the "href" Attribute Is Sufficient |
| profile | <head> | Unnecessary |
| version | <html> | Unnecessary |
| usemap | <input> | Use "img" Instead of "input" For Image Maps |
| longdesc | <iframe> & <img> | Use a Regular <a> Element to Link to the Description |
| lowsrc | <img> | Use a Progressing JPEG Image Instead of Two Separate Images |
| target | <link> | Unnecessary |
| scheme | <meta> | Use 1 Per Field or Make Scheme Declaration Part of Value |
| archive | <object> | Use "data" & "type" Attributes to Invoke Plugins |
| classid | <object> | Use "data" & "type" Attributes to Invoke Plugins |
| code | <object> | Use "data" & "type" Attributes to Invoke Plugins |
| codebase | <object> | Use "data" & "type" Attributes to Invoke Plugins |
| codetype | <object> | Use "data" & "type" Attributes to Invoke Plugins |
| declare | <object> | Repeat <object> Element Each Time Resource Needs Reused |
| standby | <object> | Optimize Linked Resource So It Loads Quickly Instead |
| type | <param> | Use Name & Value Attributes Without Declaring Value Types |
| valuetype | <param> | Use Name & Value Attributes Without Declaring Value Types |
| language | </script> | Use "type" Attribute Instead |
| event | </script> | Use DOM Events Mechanisms to Register Event Listeners |
| for | </script> | Use DOM Events Mechanisms to Register Event Listeners |
| datapagesize | <table> | Unnecessary |
| summary | <table> | Unnecessary |
| abbr | <td>, <th> | The "title" Attribute Can Be Used to Include Detailed Text Instead |
| axis | <td>, <th> | Use the "scope" Attribute Instead |
| datasrc | Multiple Elements! | |
| datafld | Multiple Elements! | |
| dataformatas | Multiple Elements! | |
| align | <table>, <tr>, <tbody>, <thead>, <tfoot>, <td> & <th>, <hr>, <caption>, <col>, <embed>, <iframe>, <h1> - <h6>, <div>, <p>, <object>, <legend>, <img> & <input> | Use CSS Instead |
| alink | <body> | Use CSS Instead |
| allowtransparency | <iframe> | Use CSS Instead |
| background | <body>, <table>, etc. | Use CSS Instead |
| bgcolor | <body>, <table>, <tr>, <td> & <th> | Use CSS Instead |
| border | <img> & <object> | Use CSS Instead |
| cellpadding | <table> | Use CSS Instead |
| cellspacing | <table> | Use CSS Instead |
| char | <col>, <td> & <th>, <tbody>, <thead> & <tfoot> | Use CSS Instead |
| charoff | <col>, <tr>, <td>, <th>, <tbody>, <thead> & <tfoot> | Use CSS Instead |
| clear | <br> | Use CSS Instead |
| color | <hr> | Use CSS Instead |
| compact | <menu>, <dl>, <ul> & <ol> | Use CSS Instead |
| frame | <table> | Use CSS Instead |
| frameborder | <iframe> | Use CSS Instead |
| height | <td> & <th> | Use CSS Instead |
| hspace | <embed>, <object>, <iframe>, <img> & <input> | Use CSS Instead |
| link | <body> | Use CSS Instead |
| marginbottom | <body> | Use CSS Instead |
| marginheight | <body> & <iframe> | Use CSS Instead |
| marginleft | <body> | Use CSS Instead |
| marginright | <body> | Use CSS Instead |
| margintop | <body> | Use CSS Instead |
| marginwidth | <body> & <iframe> | Use CSS Instead |
| noshade | <hr> | Use CSS Instead |
| nowrap | <td> & <th> | Use CSS Instead |
| rules | <table> | Use CSS Instead |
| scrolling | <iframe> | Use CSS Instead |
| size | <hr> | Use CSS Instead |
| text | <body> | Use CSS Instead |
| type | <ul> & <li> | Use CSS Instead |
| valign | <col>, <tr>, <td>, <th>, <tbody>, <thead> & <tfoot> | Use CSS Instead |
| vlink | <body> | Use CSS Instead |
| vspace | <iframe>, <embed>, <input>, <img> & <object> | Use CSS Instead |
| width | <table>, <td>, <th>, <pre>, <col> & <hr> | Use CSS Instead |
New HTML5 Elements
In HTML5, several new elements are introduced to improve structure, introduce new standards for media content, etc.
| Element | Usage | Description |
|---|---|---|
| <article> | Markup/Structure | Represents An Independent Piece of Content of a Document, Such As a Blog Entry or Newspaper Article |
| <aside> | Markup/Structure | Represents a Piece of Content That Is Only Slightly Related to the Rest of the Page |
| <bdi> | Markup/Structure | Represents a Span of Text That Is to Be Isolated From Its Surroundings For the Purposes of Bidirectional Text Formatting |
| <command> | Markup/Structure | Represents a Command the User Can Invoke |
| <details> | Markup/Structure | Represents Additional Information or Controls Which the User Can Obtain On Demand (Summary Element Provides Its Summary, Legend or Caption) |
| <summary> | Markup/Structure | A Caption or Summary Inside the Details Element |
| <figure> | Markup/Structure | Represents a Piece of Self-Contained Flow Content, Typically Referenced As a Single Unit From the Main Flow of the Document |
| <figcaption> | Markup/Structure | Can Be Used As a Caption (Optional) |
| <footer> | Markup/Structure | Represents a Footer For a Section (Can Contain Information About the Author, Copyright Information, Etc.) |
| <header> | Markup/Structure | Represents a Group of Introductory or Navigational Aids |
| <hgroup> | Markup/Structure | Represents the Header of a Section |
| <mark> | Markup/Structure | Represents a Run of Text In One Document Marked or Highlighted For Reference Purposes, Due to Its Relevance In Another Context |
| <meter> | Markup/Structure | Represents a Measurement Such As Disk Usage |
| <nav> | Markup/Structure | Represents a Section of the Document Intended for Navigation |
| <progress> | Markup/Structure | Represents a Completion of a Task Such As Downloading or When Performing a Series of Expensive Operations |
| <ruby> | Markup/Structure | Allows For Marking Up Ruby Annotations |
| <rt> | Markup/Structure | Allows For Ruby Annotation Explanations |
| <rp> | Markup/Structure | What to Show Browsers That Do Not Support the Ruby Element |
| <section> | Markup/Structure | Represents a Generic Document or Application Section (Can Be Used Together With h1 - h6 to Indicate Document Structure) |
| <time> | Markup/Structure | Represents a Date and/or Time |
| <wbr> | Markup/Structure | Represents a Line Break Opportunity |
| <audio> | Media Content | For Sounds, Music or Other Audio Streams |
| <video> | Media Content | For Movie Clips or Other Video Streams |
| <source> | Media Content | For Media Resources For Media Elements, Defined Inside Video or Audio Elements |
| <embed> | Media Content | Used For Plugin Content |
| <canvas> | Canvas | Used For Rendering Dynamic Bitmap Graphics On the Fly, Such As Graphs or Games |
| <datalist> | Forms | Together With the a New List Attribute For Input Can Be Used to Make Comboboxes |
| <keygen> | Forms | Represents Control For Key Pair Generation |
| <output> | Forms | Represents Some Type of Output, Such As From a Calculation Done Through Scripting |
New HTML5 Types/Attributes For Input Forms
In addition, several new form input types are introduced in HTML5, primarily to better control and validate forms (without using JavaScript) before the data is sent to the server.
| Type | Description |
|---|---|
| color | The Hexadecimal Color of An Input Value (Example: # 3366CC) |
| date | Type of Input Value Is a Date |
| datetime | Type of Input Value Is a Date and/or Time |
| datetime-local | Type of Input Value Is a Local Date/Time |
| Type of Input Value Is One or More Email Address | |
| month | Type of Input Value Is a Month |
| number | Type of Input Value Is a Number |
| range | Type of Input Value Is a Number In a Given Range |
| search | Type of Input Value Is a Search Field |
| tel | Type of Input Value Is a Telephone Number |
| time | Type of Input Value Is a Time |
| url | Type of Input Value Is a URL |
| week | Type of Input Value Is a Week |
New HTML5 Attributes For Existing Elements
Despite attempting to phase out unnecessary/excess attributes, HTML5 introduces several new attributes to existing elements.
| Attribute | Element Application | Description |
|---|---|---|
| media | <a> & <area> | Consistency With the Link Element |
| hreflang | & rel | <area> For Consistency With <a> And <link> |
| target | <base> | For Consistency With <a> Element (No Longer Deprecated For <a> and <area>) |
| value | <li> | No Longer Deprecated (Not Presentational) |
| start | <ol> | No Longer Deprecated (Not Presentational) |
| charset | <meta> | Used to Specify Character Encoding For the Document |
| autofocus | <input>, <select>, <textarea> & <button> | Focuses a Form Control During Page Load |
| placeholder | <input> & <textarea> | Represents a Hint Intended to Aid User With Data Entry |
| form | <input>, <output>, <select>, <textarea>, <button> & <fieldset> | Allows For Controls to Be Associated With a Form |
| required | <input> & <textarea> | Indicates User Has to Fill In Value to Submit Form |
| disabled | <fieldset> | Disables All Descendant Controls |
| autocomplete, min, max, multiple, pattern & step | <input> | Used to Specify Constraints |
| dirname | <input> & <textarea> | Causes Directionality of Control (As Set By User) To Be Submitted |
| maxlength & wrap | <textarea> | Controls Max. Input Length & Submitted Line Wrapping Behavior |
| novalidate | <form> | Can Be Used to Disable Form Validation Submission |
| formaction, formenctype, formmethod, formnovalidate, & formtarget | <input> & <button> | They Override Other Attributes On the Form Element |
| type & label | <menu> | Allow the Element to Transform Into a Menu |
| scoped | <style> | Can Be Used to Enable Scoped Style Sheets |
| async | <script> | Influences Script Loading & Execution |
| manifest | <html> | Points to An Application Cache Manifest |
| sizes | <link> | Can Be Used In Conjunction With the Icon Relationship |
| reversed | <ol> | Indicates That the List Order Is Descending |
| sandbox, seamless & srcdoc | <iframe> | Allows For Sandboxing Content |
HTML5 Global Attributes
HTML5 introduces several global attributes that were previously applied (in HTML 4) to only a select few elements. Now, they can be applied to all elements.
| Attribute | Description |
|---|---|
| contenteditable | Indicates That the Element Is An Editable Area |
| contextmenu | Points to a Context Menu Provided By the Author |
| data-* | Collection of Author-Defined Attributes |
| draggable & dropzone | Can Be Used Together With the New Drag & Drop API |
| hidden | Indicates That An Element Is Not Yet, Or No Longer, Relevant |
| role & aria-* | Can Be Used to Instruct Assistive Technology |
| spellcheck | Allows For Hinting Whether Content Can Be Checked For Spelling |
Elemental Changes of HTML5
With the introduction of HTML5, several elements have gained modifications to make them more useful, or better reflect how they are used on the web.
- The <a> element without an href attribute now represents a placeholder for where a link might otherwise have been placed.
- The <address> element is now scoped by the new concept of sectioning.
- The <b> element now represents a span of text to be styled differently without conveying extra importance.
- The <cite> element is now used exclusively to represent the title of a work.
- The <hr> element now represents a paragraph-level break.
- The <i> element now represents a span of text in an alternate voice/mood.
- The <label> element the browser should no longer move focus from the label to the control.
- The <menu> element is redefined to be useful for toolbars and context menus.
- The <s> element now represents contents that are no longer accurate or no longer relevant.
- The <small> element now represents contents that are no longer accurate or relevant.
- The <strong> element now represents importance rather than strong emphasis.
- The <head> element no longer allows the <object> element as a child.
- The <dl> element now represents an association list of name-value groups.
Attribute Changes of HTML5
With the introduction of HTML5, several attributes, although still allowed, are discouraged, as their functions are better performed using CSS.
- The type attribute on the <style> element is no longer required if the styling language is CSS.
- The border attribute on the <img> element is required to have "0" value if present.
- The language attribute on <script> is required to have "JavaScript" value when present.
- The name attribute on <a> should be "id" instead.
- The summary attribute on <table> should not be used.
- The width and height attribute on <img>, etc. are no longer allowed to contain percentages.
Other HTML5 Changes
Some strict previous versions of HTML required empty elements to have trailing slashes, but with HTML5 they are no longer required.
Character encoding is also made simple. Example: <meta charset="utf-8">
HTML5 introduces multiple new event attributes as well, but we will cover them, along with additional details for all of these changes, as browser support for HTML5 grows.