Geeks With Blogs
Phubar Baz Musings of an HTML5 Programmer

An HTML5 web application is made up of three disciplines that you must master in order to write excellent apps. It can be described by this equation:

HTML5 App = Markup + Style + Code


Markup is not that difficult to master. When writing HTML5 apps there's not much need to use all of the new HTML5 elements such as section, article and header. You can leave those constructs to the guys writing content. What you do need to know is how to lay out your HTML in such a way that you can style your app the way you want it to look. Which brings us to style.


Styling, on the other hand, is difficult to master. Understanding how to use CSS to make a page look like you want takes a lot of practice and experimentation. It doesn't hurt to read a few books on the subject (I like CSS Mastery: Advanced Web Standards Solutions). Understanding the box model is crucial to understanding how CSS works. One of the best features added to CSS in recent years is the inline-block display mode. Using it lessens the need for floats, which make creating dynamic layouts a lot easier.

My tip to learning how CSS works is to open up your browser's development tools and see what happens if you remove or change a CSS property. Often times you will find that a property you thought was necessary does absolutely nothing to your layout. In this way you can remove your misconceptions and replace them with facts about how styles work.

CSS3 makes writing visually stunning apps relatively easy. You can use transitions to make you pages look dynamic and give the user visual feedback. I like to use opacities to give the app a modern layered look. Rounded corners and shadows can go a long way toward giving your layout depth and a natural feel.


Your code is the heart of your application. Without it you have just a pretty page (assuming you did the markup and style correctly). JavaScript is the way to interact with your markup and the HTML5 framework. HTML5 contains rich APIs to interact with the elements on the page such as the canvas, video and audio. Mastering JavaScript can take a while, even for experienced programmers. While JavaScript is an easy language to learn it is difficult to master. Finding a good paradigm for writing maintainable code is crucial.

I find that treating JavaScript just as you would any other programming language is key to writing excellent apps. Gone are the days of writing a whole slew of disparate functions in one file; we are trying to write real applications here. You wouldn't do that in C# or Java, so why write apps like that in JavaScript? Use objects to encapsulate your code and make it easier to understand and maintain. Don't be afraid to break you application into multiple files. You can easily combine them into a single file when you release your app.


I truly believe that the future of application development is HTML5. HTML5 is supported by nearly every browser on every device, from smart phone to desktop. If you think JavaScript can't be used to write real applications think again. The possibilities for apps that can be written in HTML5 are limitless. Imagine writing an app that doesn't need to be installed, is automatically updated when a new version is available and can run on nearly any platform. Then stop imagining because it's already possible.

You can learn more about all of the components of web apps in my book, HTML5 Web Application Development by Example. In it you will learn how to combine markup, style and code in a maintainable way to create dynamic and interesting applications.

Posted on Thursday, October 10, 2013 11:47 AM | Back to top

Comments on this post: HTML5 App Components

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © PhubarBaz | Powered by: