Login |
Contact Us |
Site Map |
Resources
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>
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 |
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 |
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 |
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 |
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 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 |
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.
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.
Some strict previous versions of HTML required empty elements (elements without closing tags, such as
and ) to have trailing slashes, but with HTML5 they are no longer required.
The language attribute is made easier now, with HTML5. Example: <html lang="en">
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.
Previous