Introduction to HTML5

Introduction to HTML5

"HTML5". It's currently a buzzword when it comes to web development; but what is it really? A radical transformation from HTML as we know it? Not exactly. The syntax and core concepts of HTML remain the same, but the advent of HTML5 has added some interesting and useful tweaks, while eliminating some outdated practices. Let's take a look at some of the major changes.

New DOCTYPE

Starting from the top of your document, one of the first changes you'll encounter is the HTML5 doctype declaration; it's been simplified. Gone are the days of worrying about whether your code needed to follow STRICT or TRANSITIONAL standards; now, if you want to tell the browser that your document is HTML you just need to start it with a <!DOCTYPE html> declaration.

New Elements

One of the goals of HTML5 was a move toward more of a "semantic HTML", which means having your code be almost self-explanatory. This is accomplished by the addition of some new elements.

A basic, pre-HTML5, site layout might look something like this:

<div class="header">
   <div class="nav">
      ...
   </div>
</div>

<div class="main">
   ...
</div>

<div class="footer">
   ...
</div>

HTML5 makes things a little bit easier by offering some brand new "semantic" elements. A comprehensive list can be found here, but a few select elements are

<header> - a header area, not to be confused with the <head> tag 
<nav> - a navigation area
<main> - main content
<footer> - a footer area

So that same layout from before could be rewritten as:

<header>
   <nav>
      ...
   </nav>
</header>

<main>
   ...
</main>

<footer>
   ...
</footer>

It's a small change, but a much cleaner end result. Aside from producing code that is cleaner and more readable to humans, another benefit of semantic tags is accessibility. Semantic code can be more easily interpreted by a device like a screen reader, allowing for a better experience for any users with disabilities.

There are a few things to keep in mind about these new elements.

  • These new elements don't come with any default styling, they will act just like a <div>
  • In older browsers these elements will be treated as an inline element. If older browsers (pre IE8) are a concern you just need to add a display: block; line to the CSS of any element to get the intended behavior
  • While these elements have intended use, you won't "break" anything if you decide to use a <nav> element in place of all your <div> elements (you'd just have poorly written HTML)

New Media Tags

Before HTML5, adding audio or video to a website could be a bit tedious. It usually involved embedding an object that was hosted elsewhere. Now, native audio and video is as simple as using the new <audio> and <video> tags. The format for both is pretty standard:

<audio controls>
      <source src="test.ogg" type="audio/ogg">
      <source src="test.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
      <source src="test.mp4" type="video/mp4">
      <source src="test.ogg" type="video/ogg">
      Your browser does not support the video tag.
</video>

The audio or video element will attempt to play one of the source files that is listed in between the opening and closing tags (it will choose the first supported format that is listed). If no supported format is found, the “Your browser does not support…” text will be displayed. The presence of the controls attribute will determine if the stop/start/play controls are displayed in the media player.

New INPUT Types

HTML5 comes equipped with a whole arsenal of new INPUT types. Each one offers its own specific behavior. For instance, the <input type="number"> element is meant for... you guessed it, numbers. Within the element you can set all sorts of restrictions (minimum value, maximum value, etc.) using attributes. Some other new and useful INPUT types include email, url and range.

In my opinion, one of the main advantages of using a specific INPUT type is a better experience for mobile users. Depending on the INPUT type chosen, most mobile browsers will display a special keyboard; ie. only numeric keys when <input type="number"> is used, or having specific buttons for ".com" when <input type="email"> or <input type="url"> are used. Just like with the new semantic elements, older browsers have a contingency plan for dealing with new INPUT types; they are simply treated as <input type="text">.

Deprecated Elements

Along with adding a bunch of new stuff, HTML5 also took away a few things. Some outdated elements were shown the door:

<acronym>
<applet>
<basefont>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

While these elements officially aren't supported by HTML5, if you wrap some text in a <center> element and open your document in a browser that text would still be moved to the middle of the screen (for backwards compatibility reasons); but don't do that. The behavior accomplished by these elements can be achieved by using CSS or a different, supported, element.

So there it is, just a quick introduction into some of the major changes introduced by HTML5. When you are ready to start writing your own HTML5 the World Wide Web Consortium offers a great tool for validating your code and making sure it adheres to standards: https://validator.w3.org/.

Once you have a good grasp on HTML5 and want to start developing actual websites take a look at some of our previous articles on the Bootstrap Framework and diagnosing web errors with Fiddler2 to help you along.

Here at IT Solutions, HTML5 plays a huge part in our web and mobile development projects. If you are looking to have a solution built, we'd love to talk to you

 

ITS Email Newsletter Archive

© 2018 IT Solutions Consulting, Inc. All rights reserved. Privacy Statement
IT Solutions
Top