Apps optimize

HTML5: The next generation of web design

Ryan Boudreaux introduces the latest updates to the HTML5 specification, shows how the major browsers are comparing so far, and suggests additional HTML5 resources for web designers.
The most recent HTML language specification classified by the W3C is available for review as the HTML5 Working Draft, and HTML5 Editor's Draft, which stipulates a number of exciting updates and changes for HTML coding practices. If you are not inclined to reading the lengthy official specifications, there is an alternative edition provided by the Web Hypertext Application Technology Working Group (WHATWG) entitled HTML5 - A technical specification for web developers, and is shown in Figure A.

Figure A

The evolution of HTML into the HTML5 specification started with initial W3C workshops in 2004. It wasn't until 2006 that the W3C announced interest in pursuing development, and then in 2007, the WHATWG began its involvement making contributions to the specifications, and at the current rate of development, it is not expected to be completed until sometime around 2020 or 2022. To address several inconsistencies of standards and implementations with respect to XHTML, the WHATWG was formed to work on the HTML5 specification. The collaborative efforts of the WHATWG include individuals from Apple, Mozilla Foundation, and Opera Software, and it is the unofficial alliance of web browser manufacturers focused on achieving a single web standard.

The WHATWG concentrates on these four themes when developing the HTML5 specifications:

  1. Technology needs to be backward-compatible.
  2. When implementing any new technologies that are proven to work then it must become a standard.
  3. Specifications need to be detailed without reverse engineering.
  4. The Document Object Model (DOM) must work with the standards.

Though the finished specification is yet to be completed, it does include some features that can be implemented today. As the fifth major revision of the core language for the Word Wide Web, what it really signifies is a simple approach for web developers to mark up code. The improvement comprises meaningful semantic elements for specifying doctype, character set, page structure, multimedia including audio and video, gradient displays, and the added ability to create some elegant forms, and much more. Along with HTML5 is CSS3, which changes the way style sheets are coded and implemented as well. The only differences between the W3C and the WHATWG specifications are mostly editorial in nature; the text in each is identical for the most part.

Tim Burners-Lee, October 2006, on reinventing HTML:

"Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, including quotes around attribute values and slashes in empty tags and namespaces all at once didn't work."

Adoption rates among web developers seems to be picking up some steam now that the HTML5 specification has matured a bit within the last several years, but challenges still exist that preclude others from making the switch, in particular due to the notion that vendors cannot agree on all aspects of the standards and implementations in a consistent manner across all platforms. The WHATWG is hoping their efforts will speed up the adoption rate for the HTML5 standard and implementation.

Browser wars again?

Maybe not, but most browsers today are now focused on HTML5 and CSS3 support, and many are moving toward a better compliance ratio. According to HTML5 accessibility, leading the pack in browser-rendering compliance of the HTML5 feature support is Google Chrome, and then in a close second comes Mozilla Firefox, followed by Internet Explorer 9, then Safari, and Opera, and then all previous versions of Internet Explorer are bringing up the rear. According to the HTML5 accessibility report, as the browsers shift toward HTML5 compliant rendering most are not graded too high at all with the highest rating of "Poor +" for Chrome.

However, HTML5 & CSS3 Readiness shows that Google Chrome is also leading the pack with HTML5 feature support when compared with seven other browsers across twenty-eight features. Their ranking differs slightly from the HTML5 accessibility with Safari 5 in second place, Opera 11 next, then Firefox 4.0 and 3.6, followed by IE 9, then IE 8, and lastly IE 7. A screenshot of the info graphic from the readiness website is displayed in Figure B below.

Figure B

When can I use... is another useful resource for determining support and compatibility of HTML5, CSS3, SVG, and more in desktop and mobile browsers. The resource provides compatibility tables, browser comparisons, and an index which includes feature support matrixes for CSS, HTML5, SVG, JS API, and others. Each table comparison shows how each browser stands with respect to supporting, not supporting, partially supporting, or the support is unknown for each element or feature; an example of the element Canvas (basic support) table is displayed in Figure C.

Figure C

What does HTML5 change?

As I briefly mentioned, there are major changes in the doctype declaration, the character set declaration, language values declaration, the way HTML documents are structured and sectioned, how scripts are called, and much more. The move toward semantic markup means that generally the use of IDs is recommended and the use of classes and Divs is now outdated and unnecessary. That's right; I said Divs are now a thing of the past! With the structural and sectional elements available in HTML5, the use of Divs should only be added to HTML code as a last resort, and when all other element options have been exhausted. In essence HTML5 cures the cases of Div-itis and Class-itis.

How does the HTML5 specification affect me?

Why wait until 2020 or even 2022 as some speculate, when the specification is expected to be completed, when today many of the feature elements are already being adopted by browsers and user agents? This means that web developers can start using several elements of HTML5 and CSS3 even though the entire specification has not been completed.

Future posts on the HTML5 matter will focus on the new coding practices and will dive deeper into each of the elements and features that can be implemented today, with the significance that most browsers will support usage for rendering web documents written in the HTML5 language.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

27 comments
mbluett
mbluett

I remain unconvinced that some of the new tags are worthwhile. From what I can tell tags like ASIDE, SECTION, and ARTICLE are meant for coders to be able to "interpret" HTML code created by other coders. The problem is the word "interpret" gets in the way. I have read multiple posts regarding these tags and have come to the conclusion that there is a great deal of confusion as to when to use them. Given this confusion, where is the standard? And where is the advantage?

Tink!
Tink!

should we be leaning more toward using HTML5 then?

sdow
sdow

Can someone tell me how to interpret Figure B? Pretty as a peacock, but pretty hard to figure out... and I love puzzles! The colors are browsers - got that... the legend has 4 years listed and we have a couple dozen columns - huh?

Marc Thibault
Marc Thibault

It's more than passing strange to hear about web design tools from someone who uses a 60em wide text line. The whiplash makes it hard to concentrate.

grayknight
grayknight

Looks like Firefox 6 is in the lead, followed by IE9, then Safari, then Chrome.

disasterboy.info
disasterboy.info

I hope for the right standards/options (layout, font, digital rights, compression and security) and new editing tools. Then we can see HTML5 compliance ensure the decay of the pdf.

koos
koos

All that is great, but some web hosting companies does not support HTML5 and CSS3 yet. I understand (from googling quite a bit) that it is mostly the browser compatibilty, but with my bad luck my hosting company told me that it will not work on their servers? I am a reseller and it is not just a case of just use another hosting provider...

dogknees
dogknees

The sentence doesn't even make sense as written, and these people are designing languages! Perhaps learn the one you use first.

kingkong88
kingkong88

HTML the language is one thing. What about tools? Or are we expected to hand code with notepad/vi?

simple simon
simple simon

I have a website, non commercial, which I hand code using CuteHTML. Its image rich (sort of a like a well illustrated book) with most pages using tables, as well as div tabs, the align tab, the center tab, and more. General font layout uses CSS. It does not use php, XML, or the DOM. For most pages tables are a must, as its vitally important to keep annotations and explanations very closely aligned to images. The web site has been built over a decade and I do not have either the time or the inclination to change the whole thing just to please desk-bound pen pushers who want to keep changing standards. Maybe I am misunderstanding whats going on here, but even though HTML is supposed to be going to be backwards compatible I am alarmed that eventually my website will be rendered unviewable by the changes. After all, why deprecate an attribute if it is not intended to stop supporting it? The Internet is not just about large corporations selling their products, nor just about governments making it easy for citizens to access information. Its a very democratic institution where ordinary people stand shoulder to shoulder with everyone else. I have my concern that when planning the changes not enough is being done to ensure that the ordinary people who create and publish online are not going to be left in the gutter. I see this as an issue related to the stifling of freedom of speech, and not just simply making changes designed to help corporate web content creators to innovate. Simon citytransport.info

matiasb
matiasb

Hi! is there any estimation about the time it will take for web browsers to be fully HTML5 compliant? I ask this because, for example, when we talk about HTML5 we're also talking about websocket, and nowadays this protocol isn't fully supported by some major browsers.

blakjak.au
blakjak.au

Every new HTML/CSS/JS feature you use pushes you further out of reach of the older browsers. That said, browsers are free including the best ones (Chromium, Firefox). I'm of the opinion that we *should* stop supporting ancient browsers, because the longer we code to accommodate the lowest common denominator, the longer it's gonna take to move forward. You need to know how to gracefully degrade your Javascript and CSS to accommodate older browsers to a point, but don't let it stop you from learning new stuff. So yes, move towards HTML5 and CSS3, but remember that you can only push it so far before your work becomes unusable to too many people, it's a fine line.

Duke E Love
Duke E Love

It has *nothing* to do with your hosting company. A HTML document is just a plain text file just like a notepad .txt file except it is named .html. As stated before all HTML5 and CSS3 are a set of instructions, delivered in the form of a plain text document, that tell your browser how to behave. If I were you I would consider getting another hosting company because they obviously have NO idea what they are talking about. None.

blakjak.au
blakjak.au

HTML and CSS are browser technologies, they affect how the browser renders a page and how the browser fetches resources from the server. The server doesn't need to "support" them unless you're using some kind of CMS (content management system) that generate the HTML documents for you.

blakjak.au
blakjak.au

As a web and application developer of 7 years, I've always "hand coded" everything from php/mysql websites to .Net apps, covering functionality, layout, databases, the only thing I use "tools" for is graphics manipulation and compiling binaries. I use VIM on linux (with a comprehensive .vimrc that adds mouse support, syntax highlighting and windows-style copy/paste shortcuts), on windows I use Visual Studio, but when developing websites I wouldn't go near an IDE, who needs the bloat from the vaguely helpful abstraction? What tools to you currently use? What makes you think they won't also be updated?

MikeDean123
MikeDean123

I have the same concern you have. What if the site can't be viewed anymore? What will the solution be? Roll back to a former version? glaucoma symptoms

gbatuyong
gbatuyong

Tables are NOT a must for page layout. Tables are for data. CSS is for layout. Design that hinged on using old school methods (hardcoded tables and deprecated tags) are going to look odd on current and next-generation devices like tablets and smartphones. Some may not adapt ???but neither did the dinosaurs. Competition between old and new businesses has forced everyone to rethink their public web presence.

xeno.zentag
xeno.zentag

I agree with your frustration at how often the standards change for web design. Just because a new standard comes out every 2-5 years is not a good enough reason to revamp a huge design, such as your own website which sounds like you've worked hard on for the past decade. I am an independent web designer, and I love using the dynamic server side languages to add a little pizzazz. I'm also excited for the new standards because they make creating websites that are viewable to everyone easier. Finally, the same elements are being supported and rendered to look the same to almost anyone, without having to modify the design to fix a bug for such-and-such browser, or for such-and-such version. I am not intimidated by the large corporations, because I can implement the standards easier myself. I enjoy making and designing a site that renders beautifully in every browser, which was not possible with the older standards. Also, as the browsers support more and more of the current standards (all now agree on at least 60%) that means if your site changes just a few deprecated tags, it should still render as good as new! I've learned that a website must evolve over time. Keeping up with web trends is what will keep your site well visited, and increasing your readership. If those don't matter, then your site will simply decline in usage. it's a chore, and it's not fun sometimes, but it needs to be kept in check. There's always a bit of bad code somewhere that needs to be reworked. Finally, I must point out that the same corporations you blame for the breakneck pace of innovation and change are actually holding back the standards from going too far. The only reason that IE6 and the standards that are supported by older browsers are still supported are because of large organizations who still use them! If it wasn't for those organizations, we would all be using the latest 2-3 versions of any of the popular browsers, and forget about old standards nearly completely! So, try not to give those corporations such a hard time ;)

techrepublic
techrepublic

Hi @SimpleSimon, I do think you may be slightly misunderstanding what's going on. Web technology is always progressing, and browsers will inevitably add new features and capabilities, particularly as demand for functionality increases. If there are no standards in place, you end up with the horribly messy situation we had back in the 1990s where you practically had to write different pages for different browsers - for instance, IE introduced ActiveX control that didn't work in any other browser, Netscape introduced the tag, and so on. This made it much harder to produce a good website, whether you were a professional developer or (as I was then) an amateur. As for deprecating elements, the point has already been made that this doesn't mean they're not going to work - it's starting the (very gentle) slope towards phasing that functionality out. Although I appreciate your concerns, this is actually a good thing. I will still use tables for a number of things, but using and CSS makes for better, more flexible sites. This and other changes to specifications also make web browsing easier for those with disabilities, and for those who use smartphones and tablets to browse the web. The guys who develop and document these standards are highly competent engineers, developers, and the like - not Brussels-style bureaucrats - although I admit that I find their documentation pretty tough reading in its unsummarised state! Rest assured, your site will keep working for a good while longer - and even if by 2020 it starts to come apart at the seams, people will still be able to get at the content - even if not quite as it was intended to look. Al

lharris@HariTech.com
lharris@HariTech.com

Because it's a way of saying that there is a better way. Deprecating something does not mean it will not be supported in the future. It's a way of saying that the feature is no longer the desired way from the point of the person(s) defining in this case the HTML5 standard. Most of the time deprecated features will continue to work, just look to Microsoft Windows. However there may be a time or a situation when the feature will be removed. Most of the 'mobile' versions of various operating systems have eliminated many deprecated features to reduce the footprint and improve reliability or performance. Chances are your web site will run just fine into the future when accessed from major browsers. If however you are rebuilding some or all of it in the future look to use current features and remove the deprecated ones.

xeno.zentag
xeno.zentag

A short answer: No web browser will be 100% compatible with all web standards by the WC3. The closest you can hope for is the standards you want to use will be supported in the majority of browsers in the upcoming versions. Because of the quickening pace of browser development, and depending on the company/browser the next versions will all be released within the next year. Plan to use the standards, but make sure you program for backwards compatibility. My blurb: As was said in the article, the HTML5 spec will be developed over the next 10 years. As new implementations occur and standards complied with, standards will continue to evolve until the next 'standard' is heralded. Seeing how quickly this standard has been brought into existence (only 6 years!) a new standard won't take long, so forgive me for being a tiny bit skeptical about this standard lasting another 10 years. As for the individual companies/browsers compliance with the published standards, I say look at the new development trend for all the browsers on the market today. Chrome took the lead with an intensely high turnover for version numbers (12 versions in only about 2 years!) compared with the more traditional development cycle of Microsoft (9 versions in 16 years) and Mozilla (5[ish] versions in 17 years). Chrome has incited an incredible new development trend, which is forcing other browsers to push updates (and improve standards compliance) more frequently than ever. Although Chrome is leading the pack for now, both IE and FF have changed to allow for faster updates. According to CanIUse.com, 88% of the current standards are supported by Chrome, followed by 84% by FireFox and only 62% by Internet Explorer. (See http://caniuse.com/#cats=CSS,HTML5 bottom of page). According to the same page, projections indicate that 70% of standards will be supported in the 'far future'.

Dethpod
Dethpod

Is DreamWeaver CS 5.5 and Aptana 3 (and 2). Both are fantastic. Both are designed specifically for building web gui's and are simply outstanding at what they do. Never mind DW's wussywig stuff. Where it really shines is as text editor for Javascript HTML and CSS. Both have support for CSS 3 and the html5 spec. But if you are dead set against using an IDE for web apps then you probably won't change your mind no matter how good the product is.

blakjak.au
blakjak.au

I wasn't asking for an opinion, I was replying to KingKong88 as he was asking what tools he is expected to use for HTML5, I was expressing my opinion and asking what he currently uses. To clarify my points: I use VS when I need to, to develop .Net because there is NO alternative - when working on a group development project in .Net - to that particular suite. I use Eclipse for developing for android because I'm new to Android (and only a little experienced with Java) and the android team and community recommend eclipse and fully support it with their SDK. If you have an alternative suggestion I'd be happy to hear it? Regarding dreamweaver, you're right, I HAVE already made up my mind about DW, because I've used it quite a bit both on windows and OSX (I did say that I've used it in my previous post, if you want to assume that that was for 5 minutes, that's your problem, not mine). In my experience, on OSX it quickly eats up in excess of 500mb of ram and 1gb of swap (on my previous employer's iMac with 2GB ram and a coreDuo 2ghz). My experience on windows is no better, though at the time I was running a system that only had 1GB of ram and a single core 3ghz P4 - and DW quickly ate 500mb of RAM, just to edit HTML/CSS/JS/PHP/ASP code and run the FTP client. Maybe there are some "wiz-bang" features of dreamweaver that I don't know about, but I would hardly expect them to run any better than the really simple features that I do know about - so the only time I even consider using it is when I have no choice because my employer has dictated my development environment, which hasn't been the case for over 4 years. That said, maybe DW is 10 times better now that it was then, maybe when next I have $600 to blow on a code editor, and I feel like using Windows or buying a new Mac (rather than using linux, which is my current OS of choice as I am predominantly web application developer and work mostly in PHP and Perl) then maybe I'll give it another look in. My primary development environment is linux. VIM is free, fast, powerful, and I've never ONCE thought about how much RAM or CPU resources it might use, it's just not even a factor. But you know what I really like about VIM? I don't have to have any special software installed on my development machine, heck I don't even have to have a dedicated development machine. So long as I have a solid WIFI connection an XTERM capable terminal emulator and a web browser, I have all of my coding, compiling, runtime, file management, version control, deployment and documentation tools available. This means the cost to my employer to maintain my rig is exactly the cost of the hardware and it really doesn't have to be special hardware, a crappy $300 laptop will more than cover the performance needs. The cost to me to maintain an identical working setup at home? Exactly the cost of the hardware. You couldn't buy Dreamweaver the cost of my entire development needs, and I'd shudder to think how awfully it would run on the minimum hardware that would flawless cover my dev requirements, and because the end result is still a web page to run in a web browser there is no *outcome* that dreamweaver can provide, that I can't achieve without it, even if there IS some kill-feature I'm missing out on. But it's fine. As you suggested, I've clearly come to this unlearned opinion without thought or consideration.

Dethpod
Dethpod

You asked, I told you what I thought. But you are more interested in being right and arguing your point than learning. >>I'm dead set against using anything that hogs heaps of ram and cpu cycles to essentially provide syntax highlighting. DW does quite a bit more than that. But it takes more than five minutes to form a learned opinion. What I find funny is that you site two monster resource hogs: Eclipse and VS but are adverse to other lesser resource hogs to work with HTML, CSS and JS. I am using DW 5.5 right now with ~ 30 files open and it is using 75 megs of ram... and Eclipse (granted I used a lot of plugins) is @ 450 megs... but that is normal for Eclipse being open all day long. That said, try out Aptana if you hate DW. BTW. DW is to HTML 5, CSS and JS what VS is to MS technologies to lesser degree. But then again the web is still an infant technology.

blakjak.au
blakjak.au

I'm dead set against using anything that hogs heaps of ram and cpu cycles to essentially provide syntax highlighting. I can get syntax highlighting, tab-completion etc from VIM, without having to know the old-school vi-mutant keystrokes and without sacrificing a gig of RAM to a glorified text editor. If an IDE provides a convincingly better/more efficient coding experience, I'll use it (e.g. eclipse for Android dev or VStudio for .Net dev), but for HTML/CSS/JS every IDE I've tried thus far (especially DW) is a waste of time, money, hardware or some combination thereof.