Mark provided this book for free on the web (under a Creative Commons By 3.0 license), in addition to a published, for-sale version entitled HTML5: Up and Running from O’Reilly. This is a very unusual setup, but one we’ve collectively benefitted from. Many HTML5 Doctor articles feature links to this book, and the sudden loss of this valuable resource was a little shocking.

The interwebs soon mobilised, however, and now there are several copies of this book, including:

• diveintohtml5.info and diveinto.org (GitHub)
• mislav.uniqpath.com (GitHub)
• diveintohtml5.ep.io (GitHub)
• A bunch of forks, site archives, and PDFs on GitHub and elsewhere, such as Mislav Marohnić’s beautiful PDF eBook

There are also several partial translations, including:

• Chinese: diveintohtml5.com (GitHub)
• Japanese: GitHub and hail2u.net
• Czech: kniha.html5.cz (GitHub)
• French: jeremyselier.com

(Please leave a comment if you know of any others!)

Jonathan Neal is coordinating diveintohtml5.info and diveinto.org, and has added the following to the book’s title page:

Mark Pilgrim has stopped maintaining this project, and we want it to continue. We’re not just patching broken links and updating APIs. We plan to actively maintain it; refreshing, updating, and reflecting the relevant and current state of HTML5, just as it had been during Mark’s tenure.

We doctors feel the same way and plan to help keep the book updated. To that end, we’ve set up a mirror at diveinto.html5doctor.com, and we’ll be experimenting with using GitHub to contribute.

We’d like to publicly thank Mark Pilgrim for both writing this wonderful reference on HTML5 (and all his other writing over the years), and for making Dive into HTML5 available under a CC-By license that makes it possible for us to mirror it here. We’re interested to see where this brave new world of distributed community editing collectively takes us, and we invite you to pitch in.

Dive into HTML5… on HTML5 Doctor originally appeared on HTML5 Doctor on October 17, 2011.

Here are the most common questions we’re asked, with non-technical answers. Journos – you’re welcome to use these answers (a citation would be nice but isn’t required).

We’ll add new questions and answers as they are asked.

What is HTML5?

Depends what you mean. There are 3 different uses of the phrase "HTML5":

The HTML5 specification

The most accurate meaning of HTML5 is the specification that is developed by two groups, the W3C and WHATWG, together. There are different versions of the core HTML5 specification.

It is a much-needed evolution of the language that web pages are written in, and is designed for writing Web applications (dynamic interactive web pages that do something). Its predecessor, HTML4, dating from the late 1990s, was written for Web Pages (static, hyperlinked documents of text, images, forms).

Key facts:

• It’s designed to make web pages interoperable across browsers. These days, people use multiple browsers (For example, IE at work, Safari/ Opera on their phone, Opera/ Firefox at home) and it’s stupid and annoying if a website doesn’t work everywhere.
• All the browser manufacturers – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) – are working together, along with loads of other individuals and organisations: Netflix, Adobe, IBM, HP, BBC etc.
• It’s designed to extend the capabilities of the current web, without breaking existing web pages
• It competes with plugins like Microsoft Silverlight and Adobe Flash (which themselves were developed to plug the holes in fossilized HTML4 standard)

HTML5 and close friends

In addition to the core HTML5 specification, the WHATWG developed other specifications such as Web Workers, Web Sockets, Web Database. These add more features useful in applications, games and the like.

(Many of these have been part of the core spec at some point, but moved out for procedural/ organisational reasons. They are all grouped together in a specification called Web Applications 1.0).

New, Exciting Web Technologies

When most non-developers (and many less-informed developers) say “HTML5″ they are referring to a whole slew of technologies: Core HTML5, its friends and others entirely unrelated technologies, such as Geolocation (the ability for your browser to “know” its location), Device Orientation, Touch Events, CSS3 animations (that can replace very simple Flash animations), SVG (a way of describing graphics that look crisp and unpixellated at any screensize) and, the new kid on the block, WebGL, a port of a popular 3D graphics library to the Web that allows 3D graphics and games in the browser.

Many of these are developed by the W3C; WebGL is developed by Khronos Group.

It’s also important to note that many so-called "HTML5" demos are nothing to do with HTML5 at all; many Google Doodles, for example, use DHTML – an HTML 4 technology from the turn of the millennium.

Why has HTML5 been invented?

HTML 4 was creaking at the seams for the new breed of applications. Some things were impossible and needed plugins like Adobe Flash or Microsoft Silverlight; other things required elaborate hacks on undocumented features, which wasn’t a robust foundation for websites that make money for their owners.

How many HTML5-compliant browsers are there?

It depends on your definition. Because HTML5 extends HTML4, by definition all browsers have some HTML5 features.

If, on the other hand, you want to know which browsers include all Core HTML5 features, none of them do. They are all implementing pieces of the specification (which is 700+ pages long) but none implement all.

Disregarding all the hype, the modern versions of the browsers are all around the same level of implementation (although different browsers implement different features at different times, depending on the needs of their customers).

Who’s driving HTML5?

It began in Opera, in 2004, edited by Ian Hickson. Gradually all the other browser manufacturers joined. Hickson left Opera and joined Google, where he continues to edit the spec.

It’s fairest to say that browser manufacturers collaboratively drive the spec, with the W3C and many other organisations and individuals. Ultimately, it’s driven by the needs of Web developers.

Who’s using HTML5?

Lots of people – not just tech companies: Boston Globe Newspaper; Nationwide Building Society, Yell.com and hundreds more. HTML5gallery.com showcases many HTML5 sites.

When will HTML5 be ready?

Perhaps 2012. Perhaps 2022. It doesn’t matter; what matters is that a lot of it is implemented in browsers now, so it can be used now.

Saying that we can’t use HTML5 because it isn’t finished is like saying we can’t speak English because it isn’t finished.

Is HTML5 incompatible with Internet Explorer?

Nope. IE9 has good support. Support for some APIs can be patched into older browsers with a technique called polyfilling with JavaScript, or with plugins like Flash and Silverlight. Support for <canvas> can be faked in IE<9. It’s generally the slow JavaScript engines in older browsers that cause problems. Video content can use a Flash fallback in older versions of all browsers.

It’s worth noting that many of the features in HTML5 (like contenteditable, the Drag and Drop API) were invented by Microsoft and were included in IE5.

Is HTML5 just about mobile?

Absolutely not. Behind HTML5 are some Design Principles, one of which states that it’s about universal access:

Features should be designed for universal access…Features should, when possible, work across different platforms, devices, and media.

That said, there are several features that are useful on Mobile. If you’re looking at "real" HTML5, then the ability to continue to interact with a website even when offline via Application Cache (“Appcache”) is a useful one.

The fact that you can use HTML5 <canvas> for animations on devices that, by choice or necessity, can’t use Adobe Flash can be advantageous.

In the broader "New Exciting Web Techologies" definition of HTML5, Geolocation is a huge feature.

Will HTML5 kill Adobe Flash?

No – or we hope not. For years Flash was the only way to add video to a page; now there is HTML5. This competition means both are getting better, which is great for developers.

Apple decided not to allow Flash on their iOS devices, which is what gave HTML5 video a great boost. It’s important to note that HTML5 multimedia on iOS is hardly a perfect platform:

• HTML5 video issues on the iPad and how to solve them
• Unsolved HTML5 video issues on iOS
• Audio Sprites (and fixes for iOS)

For video that uses adaptive bit-rate streaming, or Digital Rights Management (DRM), Flash remains a useful cross-browser tool.

It’s also necessary to realise that Flash does more than simply video. Some its basic functions like simple gaming have been usurped by HTML5 <canvas>, and the kind of trivial animations that it used to be used for (things spinning on hover, for example) are moved into CSS 3. However, for ease of authoring sophisticated animated content like games and cartoons, it’s much easier for authors to write in Flash as Adobe’s authoring environment has many tools (tweening, timelines) that make it easy for visual developers. This will change as companies develop pleasant authoring environments for <canvas>, but it isn’t there yet.

(Adobe recently released a preview of a timeline-driven authoring environment for non-Flash animations called Adobe Edge. Ignore its claims to be "HTML5"; in its current early incarnation, it’s simply flying HTML 4<div>s around with JavaScript.)

Will HTML5 kill mobile Apps?

HTML5 (in the broadest sense of "New Exciting Web Technologies") significantly enhance the capabilities of the Web. Two years ago, to access the Global Positioning System on the phone, you had to write a native app in C++ or Java or.NET or Objective C depending on platform. If you wanted to target all platforms, you write the same app multiple times. Now, you can access Geolocation data from JavaScript on every platform (and on laptops too!), by the user visiting a URL rather than downloading an app.

Open web technologies are providing access to the device’s camera and orientation, the system contact book, peer-to-peer in-browser video conferencing, the devices’ file system, and many more. JavaScript engines are becoming almost as fast as native code, so the technical niche for native applications on high-end smartphones still exists, but is becoming smaller. On less sophisticated devices that can’t run fast JavaScript or a full web browser, native apps are still an important product.

There are non-technical reasons for apps, too. Operators like them very much: they can control distribution and therefore extract money from both purchasers and vendors. Whereas many people dislike the idea of a monolithic appstore and app approval process, some consumers value it. Appstores offer curation – consumers feel that the apps are vetted and therefore won’t wreck their phones, steal their identities or (shudder) expose them to Internet smut.

Apps built for one specific device can be highly integrated with the User Interface and User Experience conventions of that device. Some people see this as a compelling advantage. However, uptake of the Web doesn’t seem to have suffered because authors make one single website rather than different websites for Linux, Mac and Windows.

Any further questions?

If you have any further questions, you can ask the doctor, or analysts/ accredited journalists can ask your author for a briefing.

HTML5: briefing notes for journalists and analysts originally appeared on HTML5 Doctor on September 20, 2011.

<!-- HTML 4-style code -->
<div id="wrapper">
  <div id="header">  
    <h1>My super duper page</h1>
    <!-- Header content -->
  </div>
  <div id="main">
    <!-- Page content -->
  </div>
  <div id="secondary">
    <!-- Secondary content -->
  </div>
  <div id="footer">
    <!-- Footer content -->
  </div>
</div>

<!-- Don’t copy this code! It’s wrong! -->
<section id="wrapper">
  <header>  
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <section id="main">
    <!-- Page content -->
  </section>
  <section id="secondary">
    <!-- Secondary content -->
  </section>
  <footer>
    <!-- Footer content -->
  </footer>
</section>

<body>
  <header>  
    <h1>My super duper page</h1>
    <!-- Header content -->
  </header>
  <div role="main">
    <!-- Page content -->
  </div>
  <aside role="complementary">
    <!-- Secondary content -->
  </aside>
  <footer>
    <!-- Footer content -->
  </footer>
</body>

<!-- Don’t copy this code! No need for header here -->
<article>
  <header>  
    <h1>My best blog post</h1>
  </header>
  <!-- Article content -->
</article>

<article>  
  <h1>My best blog post</h1>
  <!-- Article content -->
</article>

<!-- Don’t copy this code! No need for hgroup here -->
<header>
  <hgroup>  
    <h1>My best blog post</h1>
  </hgroup>
  <p>by Rich Clark</p>
</header>

<header>
  <h1>My best blog post</h1>
  <p>by Rich Clark</p>
</header>

<!-- Don’t copy this code! No need for header here -->
<header>
  <hgroup>  
    <h1>My company</h1>
    <h2>Established 1893</h2>
  </hgroup>
</header>

<hgroup>  
  <h1>My company</h1>
  <h2>Established 1893</h2>
</hgroup>

<!-- Don’t copy this code! It’s wrong! -->
<header>
  <h1>
    <figure>
      <img src="/img/mylogo.png" alt="My company" class="hide" />
    </figure>
    My company name
  </h1>
</header>

<!-- Don’t copy this code! It’s wrong! -->
<header>  
  <figure>
    <img src="/img/mylogo.png" alt="My company" />
  </figure>
</header>

<header>  
  <h1>My company name</h1>
  <!-- More stuff in here -->
</header>

<!-- Don’t copy this code! It’s attribute overload! -->
<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/scripts.js"></script>

<link rel="stylesheet" href="css/styles.css" />
<script src="js/scripts.js"></script>

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="true" />
<!-- Another bad example -->
<input type="email" name="email" required="1" />

<!-- Don’t copy this code! It’s wrong! -->
<input type="email" name="email" required="false" />

<input type="email" name="email" required />

Thanks to Ian Devlin, Derek Johnson, Tady Walsh, the HTML5 Gallery curators, and the HTML5 Doctors for their input to this article.

Avoiding common HTML5 mistakes originally appeared on HTML5 Doctor on July 26, 2011.

Yay.

Jeremy Keith snapped five doctors together at our booth at the Web Directions/ @media conference. Left to right you can see Mike Robinson, Jack Osborne, Rich Clark and Remy Sharp with Bruce in the foreground. Missing are Tom Leadbetter, Oli Studholme and Brandan Lennox.

We also got a nice pic with two of the Ubelly team—back-end specialist Dr Andrew Spooner and Ms Alex Ball.

Thanks Ubelly! And, from Bruce, thanks to Opera for letting me sneak some doctoring in during work time.

If you have an award or large quantities of banknotes to give us, just get in touch.

The Doctors win a Critter award originally appeared on HTML5 Doctor on May 30, 2011.

We hope you will agree that this redesign is a long time overdue, as this summer will see the Doctor turn two!

When we decided to create the site our mission statement was simple; create excellent content. We like to think we have achieved this by publishing high quality articles and quizzes. However, because of this the aesthetics of the site have remained the same and we felt it was time we gave the surgery a lick of paint. Now that we’ve built up a good base on content, we felt that the time was right to give the site some much needed TLC.

Redesigning a website is hard, redesigning a website which is used by tens of thousands of people is even harder and is probably the main reason why our redesign process dates back to 18th August and is only just seeing the light of day.

More than just a redesign

The project kicked off when our good friend, Oliver Ker, was approached to inject new life into our brand. What we were looking for was an instantly recognisable symbol, something which people would be able to relate to HTML5. We think Oli has done a stellar job with our new branding and it provides us with an instantly recognisable identity to build upon. If you are interested in finding out more about the creative process then head over to Olivers blog and see what he has to say.

Once we had a brand to work from we decided to start mocking up possible solutions for a direction we could take the site in. We were all in agreement as to which areas of the site needed addressing; it had to be simpler in all aspects, easier to read and utilise more of the newer technologies available.

Undoubtedly, you will have heard or experienced for yourself the issues faced when trying to design your own site and this site was certainly no different.

We considered multiple different design solutions – probably one for each Doctor – and it was only at our fifth attempt that we finally started to head in the direction which is now presented before you. The multiple design directions we went down is something I will cover on my own blog as it is out with the scope of this article.

Layout

Barring a select few pages such as the element index (previously the glossary), HTML5 Doctor is represented with a three column layout, the first column is slim and narrow which contains meta information for items related to the page/post.

The second column is the main content holder which is where all the page, post(s) and comment(s) content appear.

The final column, which for want of a better word is essentially our sidebar that contains an array of information such as element index links, related posts, categories and authors, a twitter display which pulls out hashtags and advertisment blocks.

At the top of the site we’ve completed reworked the header which should hopefully make navigating the site much easier. We’ve provided users with two different navigation bars; the top menu provides an easy way to access all our secondary content and we’ve also introduced our ‘Doctor network’ dropdown to provide access to our sister site HTML5 Gallery. Our main menu, located on the light blue bar, has been minimised to extremes, offering links to exisiting articles, the element index and our contact page. We’ve moved our search element higher up the page and plan to introduce breadcrumbs.

Page structure

Time to break down individual pages:

Homepage

With this being the most visited page on the site we wanted to try and do something a little special with it and for a long time we were devoid of any ideas until Doctor. Oli (@boblet) came up with an idea which would help offer up all the valuable information that is scattered throughout the site and pull it all together.

First up we display our most recent article, which sits front and centre to provide it with the attention it deserves. The following item is the quick reference guide which links through to each entry in the element index. There are two very special things about our quick reference guide which we are very proud about:

1. The hover states within this section have been created in canvas, by canvas supremo Rob Hawkes. Although this might not be the correct choice – many would argue SVG – we felt that this provided a fair trade-off and allowed us to use this new technology.
2. Second is that we can use this guide to promote a special subject – special subjects will have a bright orange background – which stands out from the regular hover states.

After the reference guide we display a few more posts.

HTML5 Doctor Article/Single page

This layout follows on from that of the homepage. Here we have a meta column on the left which offers up a series of quick links for categories, tags and will when applicable show links to translated versions of the article. The main column is obviously where the article and comments will appear and the third column is where all the extra information appears.

Element Index

We’ve restyled the index so it is in fitting with the new design and we’ve added in all the content and code examples that were missing from the previous iteration. We’re sorry for being lazy and not finishing it when we first launched.

A word on technologies

At the start of this article we touched on the fact that we wanted to introduce some of the newer technologies (or perhaps more wide spread) available to the site. Some of the things we have included are:

• @font-face: We’ve used Quicksand on our heading levels as this ties into our branding. Quicksand is a free font which can be downloaded here.
• CSS3: last-child, first-child, (n)th-of-type, border-radius, canvas, gradients, box-shadow.
• There are a few more easter eggs hidden under our lab coats but we’ll let you find them for yourself

Our prescription

As we’ve said above, everything is still a work in progress, we will continue to evolve the site moving forward. Essentially, we felt that now was as good a time as any to push this out into the wild and let our readers form an opinion and offer up there thoughts on the design. If we didn’t do it now, we’d be forever arguing over the semantics of the design, the leading here and the letter spacing there. So feel free to leave a comment and tell us what you think, whether it covers design/semantics/typography. We look forward to hearing from you. Enjoy.

Injecting new life into the Doctor originally appeared on HTML5 Doctor on May 26, 2011.

.net Awards Nomination originally appeared on HTML5 Doctor on August 26, 2010.

What we’ve done

The site was launched publicly a year ago today and what a year it’s been. We could never have expected the level of interest we’ve had nor that the site would be so well received. We’d like to thank you all for reading, commenting and linking to our articles. We intended the site to have a community feel and feel we’re continuing to work towards that.

Having met through twitter and then in person at FOWD 2009 the idea was formed over a few beers. The name derives from a certain Mr Zeldman’s “Ask Dr Web” (“A complete guide to web design”). You can find a little more on our history over on the about page.

We started with five doctors (Jack, Tom, Mike, Bruce & Rich), which became six just before launch when Remy came on board. We’ve since grown to seven with the indomitable Mr Studholme joining our ranks several months ago. Extra credit should also go to Brandan Lennox who knuckles away in the background studiously editing our copy. Between us we’ve managed to crank out more than a post a week, which we hope will increase in the coming year.

We’ve also had several guest authors who have covered some great topics such as audio in the browser, why designers should care about HTML5 and data attributes so thanks to Mark, Cennydd & Chris.

Last November we launched the glossary which offers an introductory view to HTML5 elements with code examples and links to our more in depth articles. It’s been a well used resource and we’re adding to it all the time, slowly building it up to be a complete resource.

In terms of events at least one of our team has spoken at a number of events in the past year, not least Bruce (with Martin Kliehm) being voted the 4th best talk at SXSWi. Also, earlier this month we ran a HTML5 clinic at Web Directions @Media in London. I think we managed to help quite a few people out down there. Remember to get in touch if you’re looking for someone to talk HTML5 at your event or you feel you need an emergency clinic setting up.

Future Plans

That’s enough looking back, now let’s start looking forward. We’ve got some cracking posts and super developments in the works for the coming months. I can’t say much more than that right now but I can tell you we’ll have articles on web forms, canvas, microdata and taking your applications offline in the not too distant future.

What we’d really love to do is to start writing articles that you, our readers want. So here’s your chance, if you’ve got a topic you’d like us to cover or an idea for the site then please leave a comment below. We’ll take a look through them and get writing.

A small gift

Everyone likes to receive a present on their birthday right? Well for our birthday we decided to give you a present, in the form of a handy flowchart to help you choose the most semantically appropriate HTML5 element. Those lucky folk who attended @media already received have a hard copy but here’s the electronic version you asked for.

Inspired by an original version sent in by Piotr (one of our readers) and developed by Oli the chart helps guide you through those tricky differences between header, footer, aside, section, article, figure and yes, div. It’s available in either pdf or png format.

We hope you find it useful and we’d love to hear any feedback you might have.

All that’s left for us to say is thanks for a great first year and here’s to the next one!

Happy 1st Birthday us originally appeared on HTML5 Doctor on June 29, 2010.