Basics of HTML5

HTML5 is no more difficult to learn than any other version of HTML. But there are a few things you can do to make it easier and more cost-effective to using it.

Start with the Doctype

The easiest way to start using HTML5 is to change the doctype you use in your documents. You can do this by simply making the first line of your HTML documents read:

<doctype html>

But if you use a WYSIWYG editor, you can also change it there. For example, in Dreamweaver CC, in the “New Document” window, you can choose HTML5 as the DocType from one of several choices.

Dreamweaver Using HTML5 Doctype
How to add the HTML5 doctype to a new Dreamweaver document

In the CoffeeCup Web Editor, you use the template “HTML 5” when you’re opening a new document to create a new HTML5 document.
CofeeCup Web Editor Using HTML5 Doctype
How to add the HTML5 doctype to a CoffeeCup Web Editor page

And many web editors these days default to HTML5. If you’re using an editor like Tummult Hype, Macaw, or CoffeeCup Responsive Design Layout Maker Pro you don’t have to worry about the doctype, as these editors use HTML5 automatically.
Hype, Responsive Layout Maker, Macaw
Many modern web editors use HTML5 automatically.

Your First HTML5 Document

As I said above, all you need to have an HTML5 document is the correct doctype. But there are a few other tags that can help. Here’s a really basic HTML5 template that I start all my web pages with:

Change the highlighted lines to your own content

HTML5 is an Improvement to HTML 4.01

One question I get asked all the time is how difficult is it to learn HTML5 if you already know HTML 4.01 or any other version of HTML. The great news is that HTML5 isn’t really all that different from HTML 4.01. In fact, if all you do is add the doctype listed above and then writing your pages exactly as you did before, you will have joined the millions of designers using HTML5.

But one of the reasons to use HTML5 is because of all the improvements there are in it. There are dozens of new tags that add more functionality to your pages. None of the new tags are absolutely critical to any web page, but they add useful features that can enhance your pages and make them more useful to your customers.

Some of the tags I find most useful include:

  • The sectioning tags: <article>, <nav>, <footer>, etc.
  • Text semantics tags like <data> and <time>
  • Embedded content: <canvas>, <video>, and <audio>
  • The new forms tags and attributes

Learn about all the new HTML5 tags.

Scripting APIs Give You So Much More to Do On Your Sites

HTML5 offers a bunch of new APIs or application programming interfaces to help designers and developers offer more features on your websites.

  • Web Application APIs—these let your web pages act more like applications on a computer or tablet. There is support for error handling and events and can make your pages more interactive and useful.
  • Video and audio APIs—with more than just the <video> and <audio> tags, the new APIs help you to play back video and audio that are embedded directly in your web pages.
  • Offline web applications—this API helps you store information so that a customer using your web application on a mobile device doesn’t have to be connected to the internet to use the application.
  • Contenteditable—While Internet Explorer has supported this attribute for a few years, HTML5 has added an API to support it more widely.
  • Drag and Drop—This is a functionality that desktop applications have had for years, but until recently, web designers were stuck fiddling and futzing with different scripts to get drag and drop to work.
  • History API—Most people don’t understand the value of the History API because it’s not a visible functionality. But this API can make your web applications work more effectively by giving URIs to dynamic pages that don’t have URLs and changing the visible URL or any URIs in the history of the browser.

Where to Learn More About HTML5

There are lots of places online to learn HTML5, these are some of my favorite resources:

And of course, you can learn all about HTML5 from my book: Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours.
Buy Now: Teach Yourself HTML5 Mobile Application Development in 24 Hours

Leave a Reply

Your email address will not be published.