What’s new in HTML5 from HTML4? Make the Switch!

One of the most common questions I get asked about HTML, and HTML5 in particular, is “Should I use HTML5 or not?” Find out why you should make the switch from HTML4 to HTML5.

My answer to the question “Should I use HTML5 or not?” is always “Yes!” HTML5 is the current standard for web page designs, and all modern web browsers and editors support it. In fact, even if you’re using an older editor like FrontPage, you can modify your designs to use HTML5 by changing the doctype.

What are the Advantages to Using HTML5?

HTML5 is the standard, having replaced HTML 4.01. And many modern devices like iPhones and iPads are optimized for HTML5. Some of the differences from HTML4 include:

  • new elements or tags
  • changes to a few existing tags
  • addition of a tag removed from in HTML 4
  • a new doctype

But the number one thing you should remember about HTML5 is: it’s backwards compatible. In fact, if all you do is add the <!doctype html> to the top of your HTML 4.01 document (removing any old <!doctype> tags), you’ll be fine. Your HTML will have been switched to HTML5. It’s that easy!

The New HTML5 Elements

There are a bunch of new elements (often called tags) in HTML5:

New HTML5 Attributes

Along with all the new elements there are a bunch of new attributes.

The HTML <input type="text" /> element has a bunch of new attributes to define different input types. I strongly recommend you start using these immediately.

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

There are now a bunch of global attributes that can be added to every element:

  • accesskey
  • aria-*
  • class
  • contenteditable
  • contextmenu
  • data-*
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • lang
  • onevent (these are various event handlers like onmouseover and onplay)
  • role
  • spellcheck
  • style
  • tabindex
  • title
  • translate

There are also a bunch of new attributes added to specific elements to make them more functional.

Element(s) New Attribute
<a>
<area>
download
ping
<area> hreflang
type
rel
<base> target
<meta> charset
<table> sortable
<th> sorted
<input>
<select>
<textarea>
<button>
autofocus
<input>
<textarea>
dirname
inputmode
placeholder
<input>
<output>
<select>
<textarea>
<button>
<label>
<object>
<fieldset>
required
<fieldset> disabled
<input> autocomplete
height
list
min
max
multiple
pattern
step
width
<textarea> maxlength
wrap
<form> novalidate
<input>
<button>
formaction
formenctype
formmethod
formnovalidate
formtarget
<menu> type
label
<button> menu
<style> scoped
<script> async
crossorigin
<html> manifest
<link> crossorigin
sizes
<ol> reversed
<iframe> sandbox
seamless
srcdoc
<object> typemustmatch
<img> crossorigin
srcset

Obsolete Elements

One new feature of HTML5 is when elements are no longer used, they are marked obsolete. That means that browser makers can continue to support any of these elements and web designers who use them don’t need to go through their code to remove them. But best practices recommend that you should stop using these obsolete elements as there are better choices available in HTML5.

Obsolete Element Replaced By
<basefont>
<big>
<center>
<font>
<strike>
<tt>
CSS
<frame>
<frameset>
<noframes>
Nothing, they damage usability and accessibility. Use <iframe> if you must have frames.
<acronym> <abbr>
<appet> <object>
<isindex> form controls
<dir> <ul>
<noscript> Only conforming in HTML5, not XHTML5

New APIs in HTML5

One of the best parts of HTML5 are the new application programming interfaces or APIs. These are commands and scripts that give you more control over your HTML5 documents and let them look and act like an application and not just a web page.

The new APIs are:

  • Media APIs for video and audio playback
  • Constraint validation
  • User commands
  • Offline web applications
  • Web application registration for media types
  • Contenteditable
  • Drag and drop
  • URL History and location
  • Base64 conversion
  • Timer-based callbacks
  • Prompts
  • Printing
  • Handling search providers
  • A defined Window object
  • Microdata
  • Bitmap graphics
  • Cross-document and channel messaging
  • Run scripts in the background
  • Client-side storage
  • Bidirectional client-server communication
  • Server-to-client data push

HTML5 is Better for Web Pages

As you can see, while there are a lot of exciting new features to HTML5, there are none that are required in order to use it. In fact, it’s easy to just get started today with the doctype and then add new features as you learn them and become more comfortable with them.

It’s a good idea to start using HTML5, if you haven’t already, because it gives you more features and controls for your web designs. Plus with more and more people using mobile devices that are optimized for HTML5, you can ensure you aren’t losing your audience.

Leave a Reply

Your email address will not be published.