Web 3.0: HTML5 & Semantic Web

November 19th 2012 - HTML5

image: moellerst

The World Wide Web started its life as a series of simple, text-based, read-only homepages whose sole purpose was to act as a digital business card and brochure. From this, Web 2.0 evolved, and this dynamic, interactive approach now informs our online life. Web 2.0 is about much more than page design; from static pages grew a community-driven, user-generated web where collaboration and information are unified.

For example, in order to rank sites according to usefulness, Google’s search engine algorithm looks at website content to learn which are the most commonly linked. Sites like Facebook and Last.fm are about user-generated content, sharing, and collaborating. Other trends, such as skip-intro animations and word-of-mouth advertising or viral marketing, have changed the way we interact with the web. But what will Web 3.0 bring us?

The semantic web

We are now in an age that some refer to as the semantic web. This is essentially a means of storing data such that it can be understood by both humans and computers. Using the new HTML5 mark-up language, we can now create a natural cycle featuring systems and software that both self-teach and self-evaluate.

Take a simple help application that runs alongside a website or web application. This is usually a set of pages, structured and categorized according to the subject matter. But if the data in the help application is stored and processed semantically (using relevant HTML article tags, for example), we can create a system that understands the questions most commonly asked, and as a result offer up not only the correct answers but also more relevant information – say, common pitfalls or additional issues to consider – before being prompted to do so. This functions as an educational tool, building user knowledge and acting as much more than just a search. Furthermore, based on the questions the user has asked, we can rewrite existing answers and create new ones that address them better. In turn, the relevant information changes according to the nature and needs of the user, in what could be called a self-editing educational cycle.

Wikipedia’s use of bots is a good example of the semantic web. The site no longer relies solely on humans to preserve the quality of its appeal; we’re not good enough. Wikipedia’s bots are able to derive sufficient meaning from the data in an entry that they can detect cases of poor use and vandalism instantly, wiping out rogue edits in seconds.

HTML5

Semantics is at the heart of HTML5, the newest revision of the HTML standard originally intended for structuring and presenting content.

W3C’s web standards are now being taken much more seriously by web browser manufacturers. Differing implementations of standards by the likes of Microsoft, Opera and Mozilla have made things very difficult for developers. Without using third-party plugins such as Adobe Flash, the creation of rich internet applications that are consistent across all platforms was close to impossible, but thanks to HTML5, cross-browser development is now straightforward. And because HTML5 is independent of device or display, we can transfer our data in any format across a variety of platforms.

HTML5’s APIs (application programming interfaces) are extremely powerful. Take WebSocket, a technique for two-way communication, and a type of ‘push’ technology; this enables us to create enterprise web applications that allow multiple users to connect, view and edit on-screen at the same time, through a browser. This could facilitate innovative presentations with on-the-fly edits from multiple locations, or enable chat rooms attached to existing applications which allow users to reach out for support.

While it’s true that this kind of capability is already available, this is through the use of additional plugins. As we progress, HTML5 and JavaScript alone are sufficient to achieve this without plugins, promoting a simpler, more standardized set of browser technology requirements.

Faster pages, better data

Why are calendar date pickers often clunky? Some of them are unpleasant colors, and they don’t seem to work reliably – certainly, they vary according to the site you’re using. HTML5 helps with this too.

The new standard is giving us access to new features inspired by native applications, such as those used commonly for data capture. The example of the date picker would traditionally have required a JavaScript library or a third party plug-in (such as Flash) to create, but these are now unnecessary overheads and can now be found natively in the browser. There are also new range sliders, progress bars, and input fields specific to contemporary content types – all of which make for better validation and therefore cleaner, truer, more useful data.

Because we require less additional code or technology, this gives us better performance and speed in our applications. We now have a lot more flexibility to create even richer web apps with improved performance, as well as better data.

Offline working

Another major HTML5 advancement is client-side storage and offline application usage. We tend to think of the web as always being ‘online’, but with the new HTML5 API we will be able to allow users to continue to input and edit data in an enterprise application even if they lose their internet or server connection. They can save on a client machine and sync with the server, continually and seamlessly.

This crossover of client-side storage and cloud computing means that we will think less in terms of devices and more in terms of data; because data is the most important asset of any application. This is a dramatic change in the user experience, as traditionally we have always ‘saved’ our documents; this classic paradigm may no longer be required, removing an entire level from user interfaces and therefore simplifying them. Of course, caution is always advisable as removing control from the user could potentially limit their ability; a shift towards automating this will take some time for most users to get used to.

Virtual reality

Web 3.0 is changing the way we engage with and navigate our applications and websites. Virtual reality is now freely available, with devices like Xbox Kinect becoming more popular. Instead of touch-screen technology, the next generation of devices could use your eyes, voice and gestures as a means to navigate and interact. This is all the more true now that web applications are cross-platform, not reliant on a particular operating system and, if produced well, implement sound responsive design.

A note of caution

Of course, one must be cautious and realistic with all of these new mechanisms. Touch-screen technology is ideal for the simple collection of consumer data (say, in a showroom), but for enterprise applications that require large amounts of data to be processed, viewed and manipulated on-screen, the user experience should probably not take place on an iPad. This is not a device to be used for eight hours a day.

As with all new technological advancements, context is all-important. The reason a keyboard and mouse are great for desktop application is that they are efficient, tactile and sensory. By limiting this choice, you could also restrict the possibilities of the enterprise software you create. Bill Buxton, Principal Researcher at Microsoft put it most succinctly: “Everything is best for something and worst for something else. The desktop PC will continue to exist and develop for the many things for which it is well suited, and other devices will take over from it for the things for which it is less well suited.”

We should always remain focused on the digital environments we are creating, and design the best technology experience for that.

Final thought

HTML5 standards are changing and developing all the time. They give us a great deal of scope to produce excellent user experiences, enhancing the browser so it can mimic operating systems, with heightened performance and better data. New user experience paradigms and form elements such as sliders and calendars are now all native to the client’s browser.

But we should always think of context. Sometimes, traditional methods of engaging with our customers remain the most appropriate, and each time we consider the use of a new capability we should ask ourselves whether we are truly helping our users. Users are, after all, the interface designer’s ultimate responsibility.

12 comments to...“Web 3.0: HTML5 & Semantic Web”

Really well written article. One of the things I thought of when reading this is how these new trends also lend themselves better to accessibility standards. With things like instant validation that can relay the data instantly to those users who may not have the use of their vision or hearing, they can now stay on track when viewing a webpage. It makes the use of the web for every audience so much better than it used to be. Additionally, the tablet and smart phone market really forced many of the browsers to fall in line as to ensure they can distribute content to their audience regardless of device. Definitely interesting to see how each component of the new web pushes the others forward. Can’t wait to see where we can go from here!


Thanks for your kind comment 🙂 An interesting thought is will the future of engagement rely on the web and the mechanism to drive it or will there be a new driver?


Avatar 至尊电视棒破解版

佩服,佩服,可以转载吗?


有请


May I simply just say what a comfort to find an individual who really knows what they are talking about on the net.
You certainly realize how to bring a problem to
light and make it important. More people have to read this and understand this
side of the story. I can’t believe you’re not more popular because you definitely possess the gift.


Avatar Zygor Guides

Admiring the dedication you put into your website and detailed information you
present. It’s awesome to come across a blog every once in a while that isn’t the same out of date rehashed material.
Wonderful read! I’ve saved your site and I’m adding your RSS feeds to my Google account.


Avatar vanessarobins

Ahaa, its good dialogue about this article here at this weblog, I have read all that,
so now me also commenting at this place.


Avatar osvaldopotts

I used to be suggested this website by my cousin. I’m now not sure whether this post is written by means of him as nobody else understand such special approximately my difficulty. You’re incredible!

Thank you!


Avatar marina.lima

Excellent article. I’m dealing with many of these issues as well..


I would like to thank you for the efforts you have
put in writing this site. I’m hoping to check out the same high-grade content from you later on as well. In fact, your creative writing abilities has encouraged me to get my own site now 😉


Avatar benedict

Great post !!!


Avatar terrance

I love your blog.. very nice colors & theme. Did you create
this website yourself or did you hire someone to do it for you?
Plz answer back as I’m looking to construct my own blog and would like to know where u got
this from. thanks a lot