HTML | HTML 5 (Chapter - 5: HTML 5)

HTML5 Introduction

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
email 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.

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.

Continue to Index

Welcome to HoneyBee - The Learning Platform

By Binit Patel

HoneyBee is a learning platform which is an integrated set of informative online services that enable learners involved in education with information, tools and resources to support and enhance Teaching, Learning and Management.

Contact With Me