Translate

Wednesday 1 May 2013

Basic HTML5 tutorial for Beginners

Hi Buddy,
Today, I'm gonna take you through the very basic and simple - Introduction to HTML5. This simple tutorial is for Newbies/Beginners, who are just starting off with HTML5.

This tutorial contains the following:
  1. Definition/Description of HTML5
  2. Difference between HTML4 and HTML5
  3. What's new in HTML5
  4. Working HTML5 example with few new HTML5 standard Tags/Elements

What is HTML5?

HTML5 is the latest standards for Hyper Text Markup Language. Previous standard that is still in practice is
HTML4/XHTML1.0.

Difference between HTML4 and HTML5

These two standards duffer mainly with their Doc-type definition.

HTML4 uses the
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>

Where:
HTML4 Doc-type says - If this particular Doc-type is defined in the HTML Page, then it is going to parse that particular Page as HTML4 page. While parsing, the Parser/processor will look out for HTML4 Elements/Tags.
If any other Elements related to other Standards/Version like HTML5 - Then, they will be judged as Warnings and Errors. Traditional Browsers like Internet Explorer will be the first one's to show them off as Errors and Warnings. Other than that, they differ using their own set of New Elements/Tags. and so on...

What's New in HTML5?

HTML5 has introduced many Elements/Tags to be used as HTML5 Elements. There are regular Markup Elements, Multimedia Elements and many more. Some of them are listed out for your ease.

Markup Tags/Elements like:

<header></header>
<nav></nav>
<article></article>
<summary></summary>
<footer></footer> etc...

Form Tags/Elements like:

<input type="search" placeholder="Search here" >
<input type="tel" placeholder="Input your telephone number here" >
<input type="email" placeholder="Enter your email id here" >
<input type="range" >

Multimedia Tags/Elements like:

<video></video>
<audio></audio>
<canvas></canvas>

Other functionality like:

Local storage
Geo location etc

All the above will be explained in my next tutorial "HTML5 tutorial for intermediates".

Working HTML5 example with few new HTML5 standard Tags/Elements.

This example is a Simple Web Page which will contain some of the Markup Elements used.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Basic Example</title>
<style>
html {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 16px;
    color: #555555;
}
</style>
</head>
<body>
<div class="container">
  <!-- HTML5 Header Tag -->
  <header>
    <h1>Header region</h1>
  </header>
  <!-- HTML5 Header Tag -->
  <!-- HTML5 Nav Tag -->
  <nav>
    <ul>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">Lorem ipsum</a></li>
      <li><a href="#">Lorem ipsum</a></li>
    </ul>
  </nav>
  <!-- HTML5 Nav Tag -->
  <!-- HTML5 Aside Tag -->
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore .</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim .</p>
  </aside>
  <!-- HTML5 Aside Tag -->
  <!-- HTML5 Article Tag -->
  <article>
    <!-- HTML5 Section Tag -->
    <section>
      <h2>Lorem ipsum dolor sit amet,</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ...</p>
    </section>
    <!-- HTML5 Section Tag -->
  </article>
  <!-- HTML5 Article Tag -->
  <!-- HTML5 Footer Tag -->
  <footer>
  <p>&copy; Copyright | _Copyright Holder__</p>
</footer>
  <!-- HTML5 Footer Tag -->
</div>
</body>
</html>

So guys, As I told you - I have used few HTML5 Elements in the above example. I have Commented on every usage of the HTML5 Elements, so that it would be just as easy as I deliver it out of my mouth!!

Any doubt or Queries just Write back to me or leave a Comment.
 
Created by: StormStriker Sumesh

+1