Get started Bring yourself up to speed with our introductory content.

HTML5 tools and semantic elements analyzed and explained

HTML5 is still a bit of a mystery for some developers. In this tip, developers can learn about the latest in HTML technology, then find a tool or tool criteria that will help them utilize HTML5.

This article can also be found in the Premium Editorial Download: Business Information: HTML5 rewrites the rules on website, mobile app development

The buzz of late in the world of Web design is HTML5. But when developers look around, it isn't as easy as one might think to find out exactly what HTML5 is. This is because it is both a new standard in HTML and a label for a collection of tools and technologies for the future of Web and mobile development. Before delving into HTML5 tools, developers need to understand some of the new features in HTML technology.

Semantic elements

HTML5 still largely uses the existing HTML, as developers would expect. However, release 5 incorporates some new tags referred to as semantic elements. For the most part, these elements are specialized versions of the <div> tag and are geared toward making developers' content friendlier to both cascading style sheet (CSS) webpages and to Web crawlers like Googlebot.

In the past, if developers wanted to define some portion of their webpage as a panel containing all of their navigation elements (buttons, links, etc.), they might have created a <div> tag and given it the identification (ID) of nav. This would work perfectly well, and many Web developers did precisely this.

That is how the new <nav> tag came into existence. A survey was done of thousands of websites, and the pattern emerged that <div> tags with an ID of nav or navigation were abundant.

What does that mean for IT people? Not a lot, on the surface of it, but when one explores the world of search engine optimization, one discovers that as far as a Web robot is concerned, a <div> is a <div> is a <div>, but a <nav> tells the Web robot something it might not have easily understood before. It is exactly this kind of understanding that improves a website's overall rating and placement in search engine results.

Following this logic, a host of other new tags emerge, such as <header>, <footer>, <section>, <article>, <figure>, <figcaption> and <aside>. These too are simply new versions of <div> tags, but now they exist as ways of arranging content that a Web crawler can more easily categorize. Thus, a company's Web rating improves.

Add to these tags a series of other elements, which are designed to improve what webpages can do overall by helping a browser understand audio, video, geolocation and animated content, and one has the heart and soul of the new HTML5 semantic elements.

The rest of HTML5

A lot of confusion arises from the idea that HTML5 is not just HTML but is also an umbrella term that enfolds CSS3, Javascript and PHP technologies. Developers need to understand that these new semantic elements exist to simplify coding a webpage and that the use of CSS3 is to bring a visually appealing design.

Javascript is a way to add behaviors on the webpage, but with the new elements <audio>, <video> and <canvas> and with application program interface elements like geolocation, Javascript now has simplified ways to handle this content for a webpage.

Even more interesting is that designing applications for mobile devices follows the same paradigms as designing webpages. Each screen in a mobile application is analogous to a webpage in terms of following a markup language design system.

So, HTML5 comes into its own.

HTML5 tools

Now comes the fun part. What tools do developers use to tap into this realm of technologies? HTML5 tools should bring these technologies together in a way that makes sense for novices and experts.

Let's take a quick look at DaVinci Studio, Embarcadero HTML5 Builder and Google Web Designer (Beta), which represent a good cross-section of the tool types and features that developers should use to find the tool that works best for them.

DaVinci Studio

DaVinci Studio

DaVinci Studio started as a plug-in for the Eclipse development platform. It became its own environment as its popularity grew. Eclipse is a widely used product. Familiarity with it across so many development organizations makes DaVinci Studio a viable tool for both developers experienced with and developers new to the world of HTML5.

The limitation of DaVinci Studio is that it is directly geared toward creating mobile content. However, since DaVinci Studio is built on the Eclipse framework, it does have the ability to switch among multiple development perspectives, allowing developers to create whatever they need. This is great for developers who are already used to the Eclipse paradigm, but new developers can get lost switching among perspectives or trying to figure out what additional tools they might need to install.

DaVinci Studio also offers a visual designer with many drag-and-drop components and editing capabilities for designing the screens in question. The code for these designs is automatically written to files in Eclipse, but there is not an easy way of going from the designer to Eclipse and back again. Changes are reflected in both the designer and Eclipse, depending on where developers do their editing, but the user interface feels clunky.

Embarcadero HTML5 Builder

Embarcadero HTML5 Builder

Embarcadero technology has many similarities to Borland, in part because the former bought the software tools division of the latter in 2008. One of the features of Borland products was two-way tools, or tools that would respond to either visual designing or direct-code editing. This design idea grew, took hold and has been something Borland has always excelled at.

So, it should be no surprise that with HTML5 Builder, this two-way paradigm continues and is extremely well-integrated into the nature of the product. The Borland products refined the process of visually designing applications and content, then switching over and editing the code for an even finer level of control -- a process that other companies have copied ever since.

What is perhaps the beauty of HTML5 Builder, though, is that from the beginning it helps developers organize what they are doing. It also configures itself to the task at hand. For example, if a development team is building a client-side Web application, HTML5 Builder gives them the correct set of client-side tools and hides the things they don't need or can't use. HTML5 Builder also will configure itself when developers are building something to run on a server, mobile client or mobile server.

Building Web content without data access is often a fool's errand these days, so HTML5 Builder is set up to help developers get to their data. Visual components that can be added to webpages or mobile Web content give the developer an easy way to create the necessary data connections and retrieve the data-driven content they want with only a few clicks. HTML5 Builder generates all the code developers need. Given how complicated working with data on the Web can sometimes be, especially for new developers, having a tool that makes it easy to do and understand can make all the difference between a good website and a great one.

Google Web Designer (Beta)

Google Web Designer (Beta)

Let's face it, Google owns the Internet -- if not in reality, then certainly in identity. We don't "Bing" things, we "Google" them, even when we use Bing to do it. Google is shaping the Internet, so when it brings out a new product -- even one in beta -- it is worth the time to pay attention and find out more.

Google has a whole new vision for the future, a new design methodology it's calling Material Design. The new Google Web Designer is a big part of that. Developers should learn about it as early as possible. Material Design is not worth explaining at this point because by the time it has been defined, it's likely to have changed. This entire concept is still evolving. Developers should check it out for themselves and keep an eye on where Google is going with it.

In the meantime, one of the first things developers can do is download the Google Web Designer Beta product and start playing with it. But be forewarned, this product is very definitely still a beta product. There are things missing, and the user interface is a bit challenging to deal with at first. It seems to be rough around the edges and not as robust as one might expect. Nevertheless, it holds great promise.

As with other tools, Google Web Designer is a visual designer and generates code on the fly. It responds as a well-integrated, two-way tool. It is entirely focused on the creation of HTML and CSS code, though it does make room for creating Javascript as well. Also, its focus currently is more on creating ads that work with Google services.

A rather amazing feature of Google Web Designer is its built-in ability to create animations in a timeline-based methodology very similar to Flash. The resulting animations are created using CSS code, so developers don't need special plug-ins or animation engines in order to get the same kinds of animation results.

Other than still being a beta product, the Google product's main limitation is that the code generated relies on WebKit. A lot. This means that the resulting Web content created by Google Web Designer won't work as well in Firefox or Internet Explorer. This limitation is a significant one because HTML5 standards are not yet completely set. Locking itself into one particular technology could be a bad move for Google.

Still, to stress it again, this is a beta product, but Google is pretty smart. It may not be too long before releases of this product provide the kind of flexibility to make this tool a serious contender.

Final analysis

In the end, the tool developers choose is the one that gets the job done for their company. The real secret to choosing an HTML5 tool is spending the time to analyze the company's needs first. Take the time to think it through. Don't just be dazzled by all the amazing bells and whistles that any given product offers. Once developers have answered the questions and done their research, they can find the tool that best fits their needs. One question developers might overlook in their rush to find the perfect tool is, "What makes the process easiest for you to understand?"

Learning any new development environment is a challenge. Developers come to any new tool set with preconceived notions of how things are supposed to work based on their understanding of the environments they came from. HTML5 is not just a new set of terms and tags to be used with any other HTML, it is an emerging paradigm that combines a number of technologies many have been involved with for years.

Tim Converse Tim Converse

With the right set of HTML5 tools and a clear idea of how this new world is supposed to fit together, developers can actually make the Web and mobile content experience the game changer everyone has been calling for.

Tim Converse is the director of software quality assurance and technical support operations at SiO2 Corp. With over 20 years of experience in the software industry, Tim has worked with companies like Borland, Electronic Data Systems and HP in a wide variety of roles, from technical support and quality assurance to application and Web development. Never satisfied with what he knows, he is currently expanding his horizons with security and mobile development technologies. Tim specializes in quality assurance technologies and is an advocate for test-driven development.

Dig Deeper on Java Development Tools

Join the conversation

1 comment

Send me notifications when other members comment.

Please create a username to comment.

Have you tried any of these HTML5 tools?