HTML stands for Hyper Text Markup Language . HTML5 is the latest standard version of HTML . This HTML and HTML5 tutorial for biggners as well as advanced developers .

HTML Tutorial - HTML5 Tutorial

What is HTML ?

HTML stands for Hyper Text Markup Language . HTML is the standard markup language for creating Web pages . HTML is not a programming language, it is a markup language . HTML 4.01 was a major version of HTML and it was published in 1999 . The HTML 4.01 version is widely used, but currently HTML5 version is standard . HTML5 version is published in 2012 .

What is HTML5 ?

HTML 5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it . HTML 5 is the fifth and current major version of HTML, and subsumes XHTML . HTML5 is the latest specification of the HTML language . HTML5 is the latest standard version of HTML . HTML5 is the version 5 of HTML . HTML5 is a standard markup for presenting content on the World Wide Web . The latest versions of browsers support HTML5 . All the latest mobile web browsers that come pre installed in mobile phones also supports HTML5 . In this HTML5 tutorial you can learn how to write HTML code that is compliant with the new HTML5 standards . HTML5 is also a candidate for cross platform mobile applications i.e. Progressive Web App (PWA), because it includes features designed for mobile devices .

What are the Older Versions of HTML5 ?

Following are the older versions of HTML5 .

  1. HTML 4.01
  2. XHTML 1.0

What are the Features of HTML5 Language ?

HTML5 introduces new elements and attributes that can help you building modern web sites . Following are the prominent great features introduced in HTML5 Language .

  1. Semantic Elements : These are like <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure> .
  2. Multimedia Elements : You can embed <audio> or <video> on your web pages without depend on third party plugins .
  3. Drag and Drop : Drag and drop the items from one location to another location on the same web page .
  4. Form Elements : New Elements in form are number, date, time, calendar, and range .
  5. Graphic Elements : Elements are <svg> and <canvas> .
  6. Geolocation : Now visitors can choose to share their physical location with your web application .
  7. Persistent Local Storage : To achieve without depend on third party plugins .
  8. Microdata : Microdata is a standardized way to provide additional semantics in your web pages . Microdata lets you define your own customized elements and start embedding custom properties in your web pages .
  9. Server Sent Events : HTML5 introduces events which flow from web server to the web browsers and they are called Server Sent Events (SSE) .
  10. WebSocket : A next generation bidirectional communication technology for web applications .
  11. Quotes are optional for attributes in HTML5 .
  12. Closing empty elements are optional in HTML5 .

What are the New HTML5 API's (Application Programming Interface) ?

Following are the new API's in HTML5 :

  • HTML5 Application Cache
  • HTML5 Local Storage
  • HTML5 Web Workers
  • HTML5 Drag and Drop
  • HTML5 Server Sent Events (SSE)
  • HTML5 Geolocation

Why Should I Use HTML5 ?

The most straight forward answer to that question is simply that it is the Current, "Right" version of the HTML language . There are a number of reasons to prefer HTML5, and to avoid using any of the deprecated features . Some features are practical .

  • Deprecated features will likely stop being supported .
  • HTML5 better supports for Mobile Devices as Progressive Web App (PWA) .
  • HTML5 is easy to write .
  • Search Engine Optimization (SEO) is easy with HTML5 . Because most of the search engines index mobile friendly contents .
  • HTML5 supports Server Sent Events (SSE) .
  • HTML5 gives the Geolocation of the accessing user's device geo location . We can provide contents related to that geo location .

What is the difference between HTML and HTML5 ?

HTML or Hyper Text Markup Language can be referred to as the World Wide Web's primary language . HTML has seen many updates over time . And currently the newest HTML version is HTML5 . Some of the major differences between HTML and HTML5 versions are :

Difference between HTML and HTML5

HTML5 Features HTML Features
HTML5 supports both audio and video HTML does not support both audio and video
HTML5 provides full support for JavaScript to run in the background HTML does not allow JavaScript to run within the web browser by default
HTML5's MathML and SVG can be used in text In HTML MathML and SVG usage wasn't possible
HTML5 supports new kinds of form controls, for example date and datetime, time, email, number, range, tel, url, search etc. The date and datetime, time, email, number, range, tel, url, search etc. does not support in HTML
In HTML5 Document Type Declaration is simple and easy to memorable . The HTML5 Doctype declaration is
<!DOCTYPE html>
HTML Document Type Declaration is very complex and it is not easily memorable . The HTML Doctype is like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Vector graphics like SVG is integral part of HTML5 Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash in HTML
It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices through HTML5 . It is not possible to get the user GeoLocation using HTML

What is a HTML Document ?

HTML Document is a combination of HTML Tags . In other words HTML Document which contains Hyper Text Markup . The HTML Document file has an extension .html, .htm and .xhtml

What is a HTML5 Document ?

HTML5 Document is a combination of HTML5 supported Tags . The HTML5 Document file has an extension .html

What are the Other Names of HTML Document ?

HTML Document other names as Follows :

  • Web Page
  • Web Document
  • Hyper Text Document
  • HTML Document

What is a Tag in HTML ?

The Tag is an element of a HTML Document . Tag name surrounded by angle brackets . That is a text that which it was enclosed between < and > . Example for Tag is <html>, <body>, <title> .

What is an Element in HTML ?

The Element is nothing but a Tag in HTML . An Element also has start tag and end tag in between text . Sometimes you may hear start and end tags are called opening and closing tags . Example for start and end tags or opening and closing tags :

HTML Element Example

1
2
3
  
<title>This is my HTML Title Tag.</title>
        

In the above example notice that the end tag has the same name as start tag except the end tag begins with forward slash before the tag name . In the above example's title tag is called as title element . However there are some elements only has a start tag . Example <br> element . The <br> element does not have end tag and does not have text .

What is an Attribute in HTML ?

An Attribute is allow to add additional information for an Element . An attribute if present, it is located in start tag after the tag name . An Attribute example as follows :

HTML Attribute Example

1
2
3
  
<h1 id="page-heading">This is HTML Page Heading</h1>
  

Explanation for HTML5 Attribute

In the above example id="page-heading" is an attribute . The first part of the attribute is attribute name that is id . The attribute name is followed by equal = sign and followed by the value that is page-heading .

Softwares required to Create HTML5 Document ?

  1. HTML Editor : Any text editor Notepad or Notepad++
  2. Browser : Any browser Chrome or Firefox or Edge or Internet Explorer .

How to create HTML5 Document ?

If you know how to create HTML documents, as the same way you can create HTML5 documents . Don't be afraid to create HTML5 documents . Because the basics of HTML language and HTML5 language are same . Avoid using deprecated HTML features in HTML5 document ( page ) creation and learn how to use new features that compliance with HTML5 .

When using multiple tags, the tags must be closed in the order in which they were opened .

Before going to how to write HTML5 document ( page ) I am discussing HTML document ( page ) rough structure . Following is the HTML document ( page ) structure .

<html>
<head>
</head>
<body>
</body>
</html>

HTML document ( page ) has two sections one is head section other is body section . In the head section you can define the title of the web page, css styles, linking css files, linking font files, javascript and as well as linking javascript files and so on . What you defined in the head section of html document ( page ) it will not display in the browser except title of web page .

Don't confuse with head and header . The <head> is the HTML's tag and <header> is the HTML5's tag .

In the body section your contents in the form of html tags like heading tags which are from <h1> to <h6> and paragraph tag <p> . What you defined in the body section it will display in browser .

Basic HTML Document Example

1
2
3
4
5
6
7
8
9
<html>
  <head>
    <title>This is My HTML Page Title</title>
  </head>
  <body>
    <h1>This is My HTML Page Heading</h1>
    <p>This is My Paragraph</p>
  </body>
</html>

Now we are going to write HTML5 document ( page ) . The HTML5 document ( page ) structure look like HTML document ( page ) . But in the HTML5 document ( page ) the body section is divided into three parts .

  • header : The header section contains website navbar and navigation links .
  • main : The main section contains website contents or the main contents of a html5 document ( page ) .
  • footer : The footer section contains website footer .

Following is the HTML5 document ( page ) structure . Follow easy steps and start building your own website.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>

Basic HTML5 Document ( Page ) Structure Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
  <head>
    <title>This is My HTML5 Page Structure Example</title>
  </head>
  <body>
    <header>
      <h1>This is My HTML5 Page Heading</h1>
    </header>
    <main>
      <p>This is HTML5 page contents</p>
    </main>
    <footer>
      <p>This is HTML5 page footer</p>
    </footer>
  </body>
</html>

What is New in HTML5 ?

The DOCTYPE declaration for HTML5 is very simple:

What is New in HTML5 ?

1
2
3
  
<!DOCTYPE html>
  

New HTML5 Elements

New semantic elements like <header>, <footer>, <article>, and <section>.

New attributes of form elements like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

What are Semantic Elements ?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.

HTML5 Semantic Tags Structure

Examples of semantic HTML tags include <nav>, <footer> and <section>. There are many more semantic HTML5 tags that can be used (for example <blockquote> and <em>). HTML5 tags that divide the page content into its basic parts are <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.