Beginner’s Guide To HTML5

Published On: 23 Jun, 2016

HTML5 is supported in almost all major browsers like Chrome, Firefox, Safari, Internet Explorer (Latest version). If you are developing web applications for older browsers, there are javascript libraries like html5shim available, which acts as polyfill code.

HTML5 introduced many semantic elements like <article>, <header>, <footer>, <section> etc., form elements’ attributes like <date>, <phone>, <calender>, <time> etc., graphic elements like <canvas> and multimedia elements like <audio> and <video>. The list doesn’t just ends-up here as HTML5 also provide awesome built-in APIs like Drag and Drop, GeoLocation, Local Storage, Web Workers, Application Cache and SSE(Server-Sent Events) which we’ll learn in upcoming lessons.

In this lesson, we’re going to learn about semantic, multimedia and form elements and their attributes. So without further delay, let’s get started.

Basic structure of HTML5 page:-


<!-- Instead of long doctype declaration like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, we've a very short one in HTML5. -->
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  Content of page
</body>
</html>

Semantic Elements Of HTML5

While developing web pages with lots of content, one have to decide what content goes where. Let’s say the webpage contains top navigation, right rail related articles section, main article content and a footer section. Though humans can understand all these different sections as organized contents, crawlers can’t. They have no idea which content represents which part of the page because, all they see is just the HTML code (you’ll see when view-source the page).

That’s the place where semantic elements come handy. They help crawlers understand all the different sections of the webpage. E.g. content inside <nav> tag will be considered as navigation links and so on. Using these semantics may help the website in improving search engine rankings. So, let’s study some of the semantic elements that HTML5 has provided.

Article Tag

In the days when we were using HTML, we had to take care of font customization in different pages of website like article content, header, links etc. Now, HTML5 provides us this basic functionality by providing article tag.

It also provides some extra tags which we can incorporate inside article tag. They are header, footer, nav, section, summary etc. An article can be properly partitioned using section tags. Article can have any number of section tags.

So the layout of Article tag would be as shown below.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <nav>Navigation Bar</nav>
    <article>
      <header>Header Section(may contain h1)</header>
      <section>Section 1</section>
      <section>Section 2</section>
      <footer>Footer section</footer>
    </article>
  </body>
</html>

Navigation Tag

In HTML, when some navigation bar has to be setup, we create list of urls and inject them inside some div tags, add styles like inline-block to bring each navigation piece side-by-side. Then, either through css or js, we add code to display second hierarchical navigation elements and so on.. Ah..so much code to accomplish one small task? You’ll feel amazed when you come to know about HTML5’s <nav> tag. Using this tag, most of the styles are handled by browser itself. Only additional css need to added if required.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <nav>
      <a href="/nav1">Nav Piece - 1</a> |
      <a href="/nav2">Nav Piece - 2</a> |
      <a href="/nav3">Nav Piece - 3</a> |
      <a href="/nav4">Nav Piece - 4</a>
    </nav>
    <article>
      <header>Header Section(may contain h1)</header>
      <section>Section 1</section>
      <section>Section 2</section>
      <footer>Footer section</footer>
    </article>
  </body>
</html>

Details Tag

Imagine a day when you have to implement hide/show functionality on certain part of the content. In normal HTML way, we add a container and fill it with content that would be hidden. Then, add some css to hide this container. Add some javascript code to hide/show the hidden content. So much code... ? No way!, you may say. That’s where <details> tag come into picture. Take a look at below code to get an idea on how easy it is.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <nav>Navigation Bar</nav>
    <article>
      <header>Header Section(may contain h1)</header>
      <section>Section 1</section>
      <section>Section 2</section>
      <details>
        <summary>Show more content</summary>
        <p>Hidden content bla bla bla...</p>
      </details>
      <footer>Footer section</footer>
    </article>
  </body>
</html>

Form Elements Of HTML5

HTML5 introduced so many new elements that ease our life at work. Many of the form interactions and validations are now built-in into the browser itself so that you can get rid of unnecessary javascript validations. Let’s check some of them now.

DataList Tag

<datalist> tag can be used as an alternative to jQuery’s auto-population, though it’s not that powerful. But this tag may come in handy if you’re showing only few data elements as auto-populated list.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
  </head>
  <body>
    <form action="/interests.php" method="post">
      <label>Which languages are you interested in?</label>
      <input list="langList" name="languages">
      <datalist id="langList">
        <option value="JavaScript">
        <option value="PHP">
        <option value="Cobol">
        <option value="C-Sharp">
        <option value="Java">
      </datalist>
      <input type="submit">
    </form>
  </body>
</html>

Output Tag

Another awesome HTML5 tag using which dynamic mathematical calculations can be displayed to the user without adding additional JavaScript code. E.g. below code displays two sliders to the user. Based on slider value, “addition” operation is performed and output is injected into <output> tag.

This awesome tag is not supported in Internet Explorer.

<!DOCTYPE html>
<html>
  <body>
    <form oninput="op.value = parseInt(ip_1.value) + parseInt(ip_2.value)">0
      <input type="range" id="ip_1" value="0">100
      +
      <input type="range" id="ip_2" value="0">100
      =
      <output name="op" for="ip_1 ip_2"></output>
    </form>
  </body>
</html>

input Tag enhancements

HTML5 adds new attributes to input tag. Many of the attributes help in applying validations without adding any JavaScript code. So, let’s check them.


<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <!--
      type="number" restricts input values to be always number.
      No JavaScript validation required.
    -->
    <input type="number" />

    <!--
      type="date" brings you almost all feature that jQuery UI provides you.
    -->
    <input type="date" />

    <!--
      type="color" brings you a Color chooser API.
    -->
    <input type="color" />

    <!--
      type="range" provides you range of numbers with slider.
    -->
    <input type="range" />

    <!--
      type="email" brings you text field with built-in email validation.
      No JavaScript required here.
    -->
    <input type="email" />

    <!--
      If you want to take user's focus to some textbox after pageload without using JavaScript,
      just put autofocus attribute.
    -->
    <input type="text" autofocus />

    <!--
      "pattern" attribute is much more cool. What JavaScript does with all pattern matching can now be accomplished
      with this attribute.
    -->
    <input type="text" pattern="([1-9][0-9]{4})|([A-Za-z][0-9][A-Za-z][0-9][A-Za-z][0-9])" placeholder="Enter US/Canada Zipcode" />

    <!--
      "placeholder" attribute helps you tell user what a textbox wants.
    -->
    <input type="text" placeholder="Enter your name" />

    <!--
      "required" attribute if applied makes that text field input mandatory.
    -->
    <input type="text" required />
  </body>
</html>

Multimedia Elements Of HTML5

Well! Someone might think why multimedia elements were added when flash player can do the work. But with these HTML5 multimedia tags, you can watch videos or listen audios without installing flash player.

Audio Tag

This tag is used to play audio in the browser. However this is not completely supported in all the versions of browsers.


<audio controls>
  <source src="TestAudio.ogg" type="audio/ogg">
  <source src="TestAudio.mp3" type="audio/mpeg">
  Audio is not supported in this version of browser.
</audio>

Video Tag

Video tag loads video into the browser so that we can watch it without having Flash installed. This is advantageous for us right!


<video width="320" height="240" controls>
  <source src="TestVideo.mp4" type="video/mp4">
  <source src="TestVideo.ogg" type="video/ogg">
  Video is not supported in this version of browser.
</video>

In Internet Explorer 9 and 10 when you run the code with audio or video tags, it says “Error: Invalid file format bla bla bla....” and at the bottom, browser asks to “Allow Blocked Content”. Just allow it and enjoy.

Well. That’s all I’ve for today. Hope you’ve learnt many basic things about HTML5 and ready to take next steps. Thanks you.

Like this blog ? Share it on your favourite social network.
Search powered by Google

Didn’t find what you were looking for? Try here.

Template Monster

Where you can search over 26K+ Premium Templates.

Now, get flat 10% discount by using “b3fbdxkv49mosrt59dsh0dx29” promo-code.

Email NewsLetter

By subscribing, you’ll get access to latest blogs and other resources. Also, whenever there is any new content addition here, you’ll receive those updates directly to your inbox.

NOTE: I’m a strict antispammer. So you don’t have to worry about spams.

This website is designed by keeping modern browsers in mind. Never mind about legacy browsers. It’s high time we upgrade ourselves.

The website and its contents are created, edited and maintained solely by me (Santosh K Shetty). No one else shall possess any kind of resources unless explicitely mentioned.

Some of the Creative Credit goes to FreePik.

Copyright © from Jun 2014 to May 2018

Table  Of  Contents
On this page,