HTML5 Tutorial - HTML

Last updated on June 4th, 2024

HTML Tutorial

HTML5 Tutorial

HTML and HTML5 Tutorial

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML documents published on the Web, but is not compatible with the more mysterious SGML features of HTML 4.

This HTML5 complete tutorial is useful for beginners as well as experienced and those who do not know what is HTML and HTML5 ? In this tutorial we cover HTML5 latest specification.

What is HTML5 ?

HTML5 is the fifth and current major version of HTML, and subsumes XHTML. HTML5 is the latest specification of the HTML. HTML5 is used to build modern web sites.

HTML5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it. 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 is HTML5 Tutorial ?

HTML5 tutorial is a HTML tutorial that trains beginners and experienced web designers and developers for building modern responsive web sites with examples using HTML5.

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 are the Older Versions of HTML5 ?

Following are the older versions of HTML5.

HTML 4.01
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.

Semantic Elements

These are like <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure>.

Multimedia Elements

You can embed <audio> or <video> on your web pages without depend on third party plugins.

Drag and Drop

Drag and drop the items from one location to another location on the same web page.

Form Elements

Forms 2.0 improvements to HTML web forms where new attributes have been introduced for <input> tag. New Elements in form are number, date, time, calendar, and range.

Graphic Elements

Elements are <svg> and <canvas>.

Geolocation

Now visitors can choose to share their physical location with your web application.

Persistent Local Storage

With persistent local storage, web applications can store data locally within the user's browser. To achieve without depend on third party plugins. Before HTML5, web application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. You can learn more about HTML5 Local Storage.

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. This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.

Server Sent Events

HTML5 introduces events which flow from web server to the web browsers and they are called Server Sent Events (SSE).

WebSocket

A next generation bidirectional communication technology for web applications.

Quotes

Quotes are optional for attributes in HTML5.

Closing Empty Elements

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>. HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between. The difference between start tags and end tags is that the latter includes a slash before the tag name.

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

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

<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. Here is a complete list of HTML5 Elements.

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. Elements may contain attributes that are used to set various properties of an element. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.

Following is the example of an HTML5 attributes which illustrates how to mark up a h1 element with an attribute named id using a value of "page-heading" :

HTML Attribute Example

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

Attributes may only be specified within start tags and must never be used in end tags. HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

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 ?

HTML Editor : Any text editor Notepad or Notepad++
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

<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>

<main>

</main>

</footer>

</body>

</html>

Basic HTML5 Document ( Page ) Structure Example

<!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:

How to Declare DOCTYPE in HTML5 ?

<!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>.