HTML5 Tutorial

HTML5 Tutorial

Introduction

Web programming has really taken off with the recent rise of new technologies. The job market has been very rewarding for web programmers. Consumers of web based applications come in many different shapes and sizes. Some use mobile devices and others use desktop computers. HTML5 makes it easy to develop web applications for both mobile devices and computers.

HeadingsMap Firefox Add-on

Topics to be covered

The following are the topics that will be covered in this tutorial

  • What is HTML5?
  • HTML5 vs Earlier Versions
  • HTML5 Browser Support
  • HTML5 Sample Document
  • HTML5 Outliner
  • HTML5 Reference

What is HTML5?

HTML is the acronym for Hypertext Markup Language. 5 is the revision number. HTML5 is the 5th revision of HTML. It is used to present content in a structured form on the World Wide Web. It is the fifth revision of HTML and it was finalized in 2014. The fourth revision was done in 1997. The many objective for HTML5 was to keep the information readable by humans and comprehendible by computers and other related devices.

HTML5 vs Earlier Versions

HTML5 introduces new features to the markup language that address the challenges that were faced in the earlier versions.

Support for multimedia - earlier versions of HTML lacked support for multimedia. Playing videos and audio required third party plug-ins such as Adobe Flash, Microsoft Silver light etc. These third party browser plug-ins consume more resources and on mobile devices they quickly drain the power. HTML5 comes with support for multimedia and performs better in terms of using resources compared to earlier versions.

Local storage – earlier versions relied on cookies and sessions to store data and the amount of data that could be stored was limited to 4K. HTML5 introduces local storage which allows developers to store more than 4K on the client side.

Web sockets – with HTML5, bidirectional communication is possible. This means developers can now develop applications that use sockets as opposed to using technologies such as COMET. Comet programming allows serves to push data to the browser without the browser requesting for the data. This is implemented using Ajax long polling. Web sockets provide a native way of implementing bidirectional communication and they perform better compared to web sockets

New semantic elements – HTML5 introduces new elements such as <nav>, <header<, <section>, <article> etc. that improve the presentation of information.

Geolocation – The user’s location is very important when deciding what information to present to the user. Let’s say you have a website for an online store with branches throughout the country. Knowing the location of your visitors will allow you to show them information that is relevant to their location.

Drawing Canvas – the canvas provides a two dimensional drawing surface that can be programmed with JavaScript

Drag and drop – with HTML5, users can easily drag components on a web page from one location to another.

Forms 2.0 – you can now achieve more with web forms and implement data validation without the use of JavaScript.

HTML5 Browser support

Most modern web browsers on desktop computers, laptops and mobile devices support HTML5. HTML5 has backwards compatibility which means you can use most of the features of the earlier versions when working with HTML5 but it is recommended to use features of HTML5. If your application uses the new features in HTML5, then you can use the following code snippet to detect if the user’s browser supports HTML5. If the browser does not support HTML5, then you can advise the user to download a web browser that supports HTML5

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>HTML5 Web browser support</title>
    <script type="text/javascript">
        function WebSocketSupport() {
            if ("WebSocket" in window) {
                document.getElementById("ws_support").innerHTML = "<h2>Congratulations! Your web browser supports web sockets</h2>";
            } else {
                document.getElementById("ws_support").innerHTML = "<h2>Sorry! Your web browser does not supports web sockets</h2>";
            }
        }
    </script>
</head>

<body onload="javascript: WebSocketSupport()">
    <div id="ws_support">
    </div>
</body>

</html>

The above code uses JavaScript to detect if the web browser supports HTML5. We are basically checking the availability of WebSockets which is a HTML5 feature.

HTML5 Sample Document

Let’s now look at a sample HTML5 Document. This tutorial assumes you have a working web server and you will be viewing the sample document via HTTP protocol. We need this because we will be working with HTML outliners for Google Chrome and Firefox. The add-on for Google Chrome only works with HTTP protocol.

In addition to using HTML Outliners to view the document layout, we will build a complete tutorial project and we will definitely need a web server.

Create a new project html5 in the web root. For me I am using XAMPP on windows 8.1

Create a new file sample_html5_document.html

Add the following code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Movies Library</title>
</head>

<body>
    <header>
        <h1>Movies rental library</h1>
        <p>Rent movies online.</p>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Movies</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <header>
                <h2>Movie Reviews</h2>
            </header>

            <h3>John English II</h3>
            <p>...and then Mr. Bean fell in love</p>
            <section>
                <header>
                    <h3>Comments</h3>
                    <p>To leave a comment you must <a href="#" title="Join our community">register</a> or <a href="#" title="sign in">sign in</a>.</p>
                </header>
                <article>
                    <h4><span>John Doe</span> wrote this on December 13th, 2015 at 13:13 </h4>
                    <p>Wow! one of the best movies that I have ever watched.</p>
                </article>
            </section>
    </main>
    <aside>
        <h2>Movies Coming Soon</h2>
        <article>
            <header>
                <h3>Pirates of the Caribbean: Dead Men Tell No Tales</h3>
                <p>Directed by: Joachim Rønning, Espen Sandberg</p>
                <p>Release date: on 7 July, 2017</p>
            </header>
            <p>Captain Jack Sparrow searches for the trident of Poseidon.</p>
        </article>
        <article>
            <header>
                <h3>Game of Thrones</h3>
                <p>Directed by: Jeremy Podeswa</p>
                <p>Release date: on 06/26/14</p>
            </header>
            <p>A Song of Ice and Fire.</p>
        </article>
    </aside>
    </article>

    <footer>
        <p>Copyright 2015 | All rights reserved</p>
    </footer>

</body>

</html>

HERE,

  • <!DOCTYPE html> is used to declare a HTML5 document
  • <html lang="en">…</html> is the opening HTML. lang="en" attribute sets the document language to English
  • <header>…</header> is a HTML5 element that specifies the header for the document or section
  • <nav>…</nav> is a HTML5 element that defines a set of navigation links
  • <main>…</main> is a HTML5 element that specifies main content of the document
  • <article>…</article> is a HTML5 element that defines an article
  • <section>…</section> is a HTML5 element that defines a document section
  • <aside>…</aside> is a HTML5 element that defines a section of content within the main content. This is usually used for sidebars.
  • <footer>…</footer> is a HTML5 element that defines the footer of the document

Load the following URL in your web browser

http://localhost/html5/sample_html5_document.html

You will get results similar to the ones shown below

HTML5 Sample Document

HTML5 Outliner

Using HTML5 headings and elements properly is very important. This will improve the page’s visibility in search engines and improve readability and accessibility. We will install HTML5 Outliner for Google Chrome and HeadingsMap for Firefox

Let’s start with Google Chrome

Browse to the URL https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en and add the extension to Google Chrome

You will notice the following icon in the tool bar when you view the document via the local server

Google Chrome HTML5 Outliner Extension

Click on the layout icon and you will get the above layout. The above layout is generated based on the headings in the HTML5 document. This is very useful when you want to preview the layout of the document.

Let’s now preview the layout in Firefox using HeadingsMap

Open the following URL in Firefox https://addons.mozilla.org/en-US/firefox/addon/headingsmap/developers

Click on Add to Firefox button

This will install HeadingsMap add-on for Firefox

Load the following URL for the sample HTML5 document in Firefox

http://localhost/html5/sample_html5_document.html

Press Alt + O on the keyboard

You will get the following headings sidebar

HeadingsMap Firefox Add-on

HeadingsMap will show you the document outline and the HTML5 elements responsible for the particular content

HTML5 Reference

The HTML5 Vocabulary, Syntax and APIs specification reference can be found on h http://www.w3.org/TR/html5/ I encourage you to bookmark it and use it for reference whenever you need to.

Summary

HTML5 is the most recent revision of HTML5 as of this writing and introduces new elements and features that simplify developing web applications. Most modern day browsers support HTML5 so you should be comfortable developing applications in HTML5.

What’s next?

The next tutorial in the series will look at HTML5 Attributes and Events. If you found this tutorial helpful, then you can support us by sharing the tutorial link on your favourite social network. Thanks for your support.

Related Tutorials