Introduction to HTML5

Charlie R. Claywell
Reviewed by Vikki Olds
HTML 5

Since HTML is the language that drives the Web, to truly harness the power of the Internet you need to understand HTML5. This latest HTML version introduces significant improvements that change how pages display and how interactivity is delivered. It also reduces the need for browser plug-ins. When you master HTML5, you will be able to create dynamic, powerful websites that work equally as well on a desktop unit as they do on a smartphone or tablet.

The Beginning of HTML5

There is no doubt that the abundance of devices, along with expectations from users and site owners for highly interactive and engaging sites, drove the need for HTML5. The World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) joined forces in 2006 to create it. The project started with parameters that included:

  • Reducing the need and dependency on browser plugins like Flash to deliver content
  • Using less scripting, instead replace scripting with markup
  • Having features based on HTML, CSS, DOM, and JavaScript
  • Ensuring the markup language is device-independent

What HTML5 Offers

No Plugins

One of the key components of HTML5 is the concept that browsers should not have to rely on a plugin for content to be displayed. Changes to the markup language were required to accommodate situations that in the past could only be solved by using a plugin. Because of this, HTML5 includes new tags with their attributes and properties designed to handle everything from animation to movies on the Web.

Device Independent

Another important part to the system is that it is cross-platform, meaning that HTML5 works on a variety of devices, including Netbooks, smart TVs, laptops and even smartphones. Because of this important improvement, designers can now more easily build sites with a broader spectrum of features. The new standard took away around a dozen obsolete tags.

Browser Support

Although all the major browsers support HTML5 in theory, in practice it is a work in progress. Each of the five major browsers (Internet Explorer, Firefox, Chrome, Safari and Opera) implement more of the HTML5 functionality with each version they release.

More Page Control

The changes created in HTML5 center around several basic themes, including:

  • More structural content options
  • New tags to accommodate the various media options
  • Interactive tags like canvas that incorporate the power of JavaScript
  • New elements for forms that improve design and usability

Five Tips and Tricks

Although it would be impossible to explain everything HTML5 offers in a single article, there are important changes you will want to learn, including the five listed below. An effective method for learning all the new standards is dividing them into manageable segments and becoming proficient with the concepts in each unit before moving on to the next.

1. Image Centering

With HTML5's removal of the <center> tag, centering an image is accomplished differently now. A couple of ways to do it are:

  • IMG {margin:auto;display:block;}
  • Create a <div> and style it with text-align:center: div.center-image {text-align:center}

2. Audio

The audio tag specifies audio files like MP3, Wav, and Ogg. Support for these formats varies by browser but if you use a Ogg and a MP3 file the five major browsers will be covered. The src attribute is required, the other five are not. Those include: autoplay, controls, loop, muted and preload. Always include text between the on/off tag as this will display in browsers that do not support the audio tag.

<audio controls>

src="horse.ogg" type="audio/ogg">

src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio tag.

</audio>

3. Video

The video tag designates content like movies clips or streaming video. Currently three formats are supported by the tag: MP4, WebM, and Ogg. All the major browsers support one or more of the formats, with Chrome supporting all three. Just like with the audio tag, any text placed between the on/off tag will display inside a browser that does not support the tag. In addition to the optional attributes the audio tag has, the video tag also has a width and height attribute to control the size of the video player and a poster attribute which can be used to display an image as the video downloads.

<video width="320" height="240" controls>

src="movie.mp4" type="video/mp4">

src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

4. Canvas

The canvas feature allows the user to create a real time change of an image or graphic inside their browser. For example, the user can click on a data point and the script will process the user's actions and display the graphic created by those actions.

5. Geolocation

This standard that uses the HTML5 Geolocation API to find users' geographical location is a powerful tool especially with smartphones and mobile sites. The code inside of the HTML document uses a programming method to accesses the API and encloses the function with script tags. Due to potential privacy concerns, users must allow their location to be accessed and revealed.

Mastering the Changes

If you want to fully explore the changes and start using them, a great place to start is with the tutorials offered by W3Schools.com and Udemy. W3schools' Try-It Editor lets you experiment with the coding to help you understand the new standard. The Udemy HTML5 course gives you access to 37 lectures (ranging from 5-30 minutes each) and quizzes to improve your skill level.

Introduction to HTML5