Introduction to HTML5
Since the internet first became popular in the 90s, HTML (hypertext markup language) has been the standard language for structuring, networking, and supplying cross-platform content on the World Wide Web. Development of further editions was essentially put on the back burner since the publication of HTML 4.01 in December 1999. The internet itself, however, experienced no such slowdown. Surfing the web today is a much different experience than it was around the turn of the millennium. In addition to texts and pictures, multimedia elements are what make today’s internet what it is. Throw in the growing popularity of mobile use, and it quickly becomes clear that today’s changing internet landscape has long since outgrown the previous century’s markup language.
This arrested development has forced websites to rely on a diverse collection of plugins in order to help them satisfy the demands of programmers, publishers, and consumers. A side effect of this makeshift solution is that gaps in security and incompatibilities have become an ever-increasing occurrence. The fifth version of HTML should help bring an end to these inconveniences. In October 2014, the World Wide Web Consortium (W3C) revealed the basic framework of HTML5, which is to serve as the core language for the WWW. But not everyone has adopted the latest version. A large portion of website operators still run their sites on the old version or have moved on to compromises like XHTML. This will all change soon enough.
Developing HTML5
Unlike its predecessor, the fifth installment of the hypertext markup language is a product of two different groups of developers. W3C’s decision to defer HTML 4.01’s continued development, instead opting to proceed with XHTML, left many organizations up in arms over the standardization committee’s move. This lagging development of new web standards proved to be a thorn in the side of software companies and browser developers. What followed was the founding of a new task force, Web Hypertext Application Technology Working Group (WHATWG), whose goal was to continue the development of HTML standards and focus more on embedding applications. In 2004 WHATWG presented its first version of HTML5. This was enough to convince W3C to put a working group together with the goal of continuing HTML5’s development based on WHATWG’s version. In 2009 the W3C announced its decision to discontinue XHTML’s development and instead concentrate on HTML5 specifications together with WHATWG.
Why HTML5?
During the early days of the internet, most websites were simply there for displaying content. Since then, their purpose has taken on an approach that centers on interacting with online offers. Gone are the days when website visitors saw themselves as mere recipients of content; they now also want to be appreciated as active users. Site owners can satisfy this need by offering interactive contact forms, comment functions, or social media integration. Online games that are loaded directly into browsers are further examples. With HTML 4.01, all of this was only possible with the use of external plugins.
This is where HTML5 is really able to flex its muscles: in addition to angle bracket HTML tags, HTML5 framework contains specified labels (see below), multimedia elements as well as countless program user interfaces (application programming interfaces, APIs) that are available in combination with JavaScript. Proprietary plugins from private providers, like Adobe Flash, are soon to be a thing of the past. HTML5 programmers are able to work independently of software companies, which allows them to develop secure, barrier-free websites.The following provides an overview of some of the central HTML elements.
New HTML elements
One ground breaking HTML5 development is the introduction of elements for semantic labeling. While HTML 4.01 only allowed rough structuring options though various div elements, special tags like <section>, <nav>, <article>, <aside>, <header>, <footer>, or <main> make it possible to define which type of content is associated with each respective element.
Tag | Function |
<section> | Defines a section within an HTML5 document. |
<nav> | Defines a section as a navigation bar. Generally links to subpages are located here. |
<article> | Categorizes a section as discrete content within an HTML5 document. |
<aside> | Defines a section as a side note. |
<header> | Defines a section as a header. Normally, this is where logos, the site’s titles, and navigation are found. |
<footer> | Defines a section as a footer. Generally, this is where contact information or copyright notices are placed. |
<main> | Characterizes a section as the main content of a website. The main tag can only be used one time per HTML5 document. |
Semantically labeling website sections offers one large advantage: it makes it easier for search engines to crawl HTML documents. Website owners that make it easier for crawlers to interpret HTML5 documents by using the right tags have good chances of a better ranking in the search results.
Multimedia integration
With HTML, adding videos and audio files is just as easy as integrating images. The HTML5 elements <audio> and <video> remove the need to use plugins.
Tag | Function |
<audio> | Labels a file as an audio file. |
<video> | Labels video content including its audio track. |
Programming interface
Programmers can integrate JavaScript objects as APIs into HTML5 documents. The following features a selection of such HTML5 elements that make it easier for programmers to meet the basic requirements of modern web design.
API | Function |
Canvas | With the canvas element, programmers are able to define a certain area of a document with HTML5; this enables dynamic bitmap graphics to be added with the help of JavaScript. In addition to lines, rectangles, and circular curves, this element also supports Bézier curves, color gradients, and graphics in PNG, GIF, and JPEG formats. One classic application for <canvas> involves integrating diagrams. Examples range from complex applications to online games. |
Drag and drop | Drag and drop makes it possible to move objects within a HTML5 document or between two websites. |
Offline applications | With API offline applications, web apps on HTML5 pages are also available to users, even when there’s no internet connection. This is especially relevant for mobile internet use via smartphone; all of the necessary content is loaded into the application cache. |
Geolocation | In HTML5, Geolocation makes it possible to read out the current location of website visitors. When loading a HTML5 page with Geolocation API, users are asked if they’d like to reveal their current location. |
Working with HTML5
There are many HTML5 tutorials online that show users the ropes of the new markup language. One great starting point is the website. A selection of helpful resources for web developers is also provided by the Mozilla Developer Network. The tagging language is generally supported by current versions of the most popular web editors, eliminating the need to purchase a special HTML5 editor. As is the case with every official web standard, W3C also provides a markup validation service. This tool lets users check a well-formed HTML markup, an important step in ensuring high quality.
Related articles
Bootstrap Tutorial: the first steps with the Twitter framework
Bootstrap is one of the best solutions when it comes to creating websites for all devices with little effort. But what exactly lies behind the framework that was originally planned to be used as an internal optimization tool for Twitter? Can total beginners with no CSS, JavaScript, or HTML experience also achieve attractive results?
WCAG - W3C guidelines for easily accessible web content
The W3C’s Web Content Accessibility Guidelines (WCAG) offers website operators a list of suggestions for the creation of making their web offers accessible. To this end, WCAG is based on 4 principles: Perceptibility, usability, intelligibility, and robustness. These are supported by 12 fundamental guidelines on how to tailor web content for people with sensory, motor, or cognitive limitations.
Modern web development: the basics
The trends driving web development are moving away from static web presences and heading increasingly in the direction of interactive content. Even though languages like HTML and CSS still rule the roost, a growing number of developers prefer the server-side programming language, PHP, for dynamic websites. Client-side script languages like JavaScript make it possible for a site to react to user…
Web development: HTML5 puts Flash on the sidelines
Flash is an unpopular tool for good reason — security gaps, programming errors, and stability problems are rampant. Has any software been the focus of such heated security debates more often than Adobe’s multimedia solution? For years, Flash was the quasi-standard for all online animations but the Flash-era is almost at an end. Since version 5, HTML has offered native multimedia functions,…
Shadow DOM: A DOM subtree for encapsulated code blocks
HTML, CSS, and JavaScript are the basic tools of modern web development. But these standard web languages begin to reveal their weaknesses when you want to customize and reuse individual blocks of code. That’s where shadow DOM technology, part of the Web Components suite, comes in: It allows you to create encapsulated blocks of code that have their own scope and are unaffected by document-wide…