HTML5: Meet the new kid on the block

May 9th, 2013 by Nathan Damm Leave a reply »

You may have recently heard about HTML5 but it’s more than just a new online buzzword. As the name implies, it is still HTML (Hypertext Markup Language) and it still works generally the same way HTML always has but, what you may not know is how it’s different or how it can be used.

The W3C (World Wide Web Consortium) says HTML5 is the cornerstone of the Open Web Platform, a full programming environment for cross-platform applications with access to device capabilities. What does this mean to developers and the future of the web? HTML5 adds features directly to HTML that previously required multiple technologies. It also includes features to improve organization of content, access of content for people with disabilities, Search Engine Optimization and functionality across devices.

What’s different about HTML5?

The new elements of HTML5

 HTML5 still uses the standard elements such as <div> and <p> but now includes many new elements such as:

•  <header>

•  <nav>

•  <menu>

•  <footer>

•  <article>

•  <section>

•  <aside>

How can these elements help?

These new elements serve multiple purposes that are helpful to developers, users and search engines.

Developers can use these new elements to better organize and label their code making it neater and easier to read. With multiple developers working on files, these elements standardize code allowing designers and developers to immediately understand the structure of a page. Developers can also make their code more efficient by using these elements with CSS to reduce the amount of classes and/or id’s in the document.

Web users with disabilities will have an improved experience with the use of these new elements. Using these elements, devices can better understand and interpret the content on the page, its purpose and its importance which makes it easier and faster for users with disabilities to access the information they need. Elements such as <figcaption> provide visually impaired users descriptions of supporting images using content hierarchy such as a title and paragraph.

Search engines use the improved organization of content to provide their users the relevant and up-to-date information they need. Search engine bots can use these elements to quickly outline the content of a website and more accurately decide if the content is relevant to the keywords of a search.

Interactivity is now easier and more capable

HTML elements have new attributes

HTML5 now includes built in interactivity by using simple element attributes. The type of interactivity that these attributes provide was previously accomplished using scripts. Now developers can save time and creatively use the built in functionality to create applications that function across various devices.

An example of this powerful added interactivity is the content editable attribute. Adding the attribute contenteditable=“true” to an element allows users to type and edit any text within the element. Another example of this added interactivity is found in online forms. Form fields are now able to understand the type of information they’re asking users for. Adding the attribute type=“email” to an input element gives it the ability to validate weather the text is in a valid email format or not.

Examples of HTML5 Elements

Examples of HTML5 Elements

 

The rock star power of HTML5

HTML5 now includes the new jaw-dropping element <canvas>. This simple element is capable of handling very powerful effects, graphics, animations and interactions. Designers and developers can now create complex and interactive online applications that are usable on computers, tablets and mobile devices.

Canvas uses built in functionality with outside technologies such as Javascript or WebGL to create anything from online video games, interactive graphs, applications, interactive animations and more. Although its uses can be complex and intricate, it can also be used to create subtle enhancements that add but do not overpower a site’s design. In the end it is up to designers and developers to decide how and when this powerful technology should be used.

Canvas is still new but its use is quickly growing. Its full potential is yet to be seen but as older browsers and devices are replaced by HTML5 supported technology, its place and capabilities will be realized.

HTML5: Canvas Element

HTML5: Canvas Element

 

Conclusion

HTML5 is packed full of new features that improve a user’s experience, save developer’s time, increase efficiency and enhance Search Engine Optimization.

Older websites can easily be updated with these new features as there is nothing to install or include. You simply start using its new elements and features. Inherently, the new features of HTML5 are not compatible with older browsers but there are tools that allow these browsers to understand most of the new features.

As always, it is important to understand your site’s technical needs and who will be using your site when deciding on which features to include. However, we can rest assured that HTML5 will prove be a powerful and beneficial tool as we move into the future of web design.

Advertisement

Leave a Reply