HTML5 – Top 5 Changes since the Last Version

HTML is a markup language which we use to build and structure a webpage. This creates a static webpage and therefore we need to use links to other scripts such as CSS and Javascript to add presentation and additional dynamic elements. HTML has since been updated and brought changes to how we organise and present our webpages. In this article we’ll be going through the 5 top changes that came with the initial release of HTML5 in 2014.

 

Why another HTML?

Over time HTML has been modified and updated to deal with issues regarding performance, cross platform compatibility and SEO among others. This takes us up to HTML4 where XHTML was eventually introduced to deal with HTML4’s issues.  XHTML had problems of its own and is now no longer supported. This leads us to the release of the current, most advanced version, HTML5.

 

HTML5 & it’s Changes

HTML5 brought the ability to incorporate dynamic elements to a webpage. This includes responsive layouts, media playback, semantic elements, APIs and advanced search engine optimisation. These are just a few of the examples we’ll be going through in this article.

 

Native Multimedia Elements

HTML5 opened the door to multimedia content heavy websites.  Before, we had to embed our media content that would then be opened with the use of 3rd party software such as Adobe’s Flash or Microsoft Silverlight. This became the standard for websites such as Youtube and other interactive media based websites. However, the Flash player plugin was seen as unreliable and demanding on resources and eventually dropped by major developers such as Apple and Google in favour of HTML5 with its open standards of HTML, CSS and Javascript. This open standard is an advantage for HTML5 over Flash as the developer does not need experience in Actionscript or the required software and licensing to create interactive elements.

3rd party plugins also affect search engine optimisation as it is difficult for a search engine to interpret the content and acquire its keywords which brings us into the next change in HTML5, SEO.

 

SEO (Search Engine Optimisation)

Search engines use keywords and tags to rank and index what a user is looking for with the results tailored to their search term. HTML5 improves SEO with the use of special semantic elements for more accurate search results.

These special elements are useful as they can also help index content that can be difficult to search for, such as media. A user can’t search for an image or video based off their description unless there is a reference to some form of text or description to give context. By using tag elements such as <alt> or <figcaption>, I could add keywords to improve search engine results without requiring a text description on the page itself. Instead the text is hidden in the web page’s script. In the example below, our image features a caption which contains our keyword for SEO.  we also have an <alt> tag which can also contain our keywords improving SEO capabilities for an image search.

HTML5 changes HTML
<alt>and <figcaption> tags with their keywords.

This isn’t necessarily a new concept. HTML already used an earlier version of this with the use of tags such as <h1> to pick out titles, <header> to get the site’s information among others however HTML5 has improved on what has already been done.

Another example is using a tag to highlight important links. Before HTML5, any link on a webpage is seen as equal in importance to other links. With HTML5, we can highlight important links to stand out over others in our search result. For example by having our navigation links inside the tag element <nav>, we can highlight that these have greater significance over lesser links. This will then ignore elements such as the footer of the page, external links or anything else.

By better utilising these semantic elements, the more efficient the search result.

 

Semantics

I discussed the significance of using semantics for improving SEO however the improved semantics included in HTML5 have another use. Semantic elements are used to highlight the importance of the individual components of a webpage. These include; headings, articles and menus. These semantics can then be used to better organise the order and presentation of the page.

In HTML, we use the <div> tag to define a section which we would then use to contain our content. However by using <div> we’re not giving the element any significance over other <div> elements. The <div> could be used for something important but will blend in with other <div> elements on our page. HTML5 improved semantics with the use of special tags to better define key sections of our page.

By using semantic elements, we can now specify our navigation menu with <nav>, define the main focus of our content with <article>, store additional content to the side of our page with <aside> and use <footer> to book end a page. These are only a few examples of the improved semantics of HTML with many more available for you to better structure your webpage.

HTML5 changes HTML
An example of HTML5 semantics

Cross Platform Development

HTML5 greatly improves cross platform development for different devices. Developing for different device types can be difficult as different devices require different languages, plugins and other components. I already mentioned the abandoning of Adobe Flash for native elements but what else can HTML5 do to work across different platforms?

Well, HTML5 meets the growth in ubiquitous technology through responsive web design to adapt to different screen resolutions. By using HTML5 and CSS scripts, web pages can adapt their size and layouts to different devices. This can be done in different ways such as adding responsive frameworks like Bootstrap.

 

APIs (Application Programming Interface)

APIs are used by web applications to access the data of another application or system. This may sound like a website is taking your personal information. What this actually means is that the web application is using this information to utilise it’s functionality.

APIs are encountered more frequently than you’d imagine. For example, you may have used an application and seen a request to use your information. This could be your location, media, notifications or other forms of data.

HTML5 changes HTML
Geolocation API asking for permission to access your location.

In this example, the app used a Geolocation API to use your geographical position. Another example is uploading media such as images, video or audio by requesting access to the device’s storage. This is a UserMedia API. These are only a few of the APIs that come stock with HTML5 with additional ones available created by 3rd party developers.

 

Conclusion

These are only five features that I found to be the most interesting and useful. There’s also improved markup, XHTML5, error handling and more included in HTML5.

So, there you have it. Whether its media playback, APIs, responsivity, SEO or semantic design, HTML5 has brought a lot of improvements to the table.

Comment to let us know if we missed any other features or give us your opinion on HTML5.

Leave a Reply

Your email address will not be published. Required fields are marked *