HTML5 Tutorial

Written By:

Updated on

HTML5 Tutorial rating ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 147 reviews
  1. Home
  2. Frontend
  3. HTML5 Tutorial
  1. HTML5
  2. HTML5 Stack
  3. Why HTML5
  4. Html5 Browsers
  5. Html5 Features
  6. Html5 Doctype
  7. Html5 Template

HTML5

HTML5 is the latest version of HTML, the markup language used to build structure or content on World Wide Web. HTML5 is the latest web standard by W3C. Earlier HTML was used only to build webpage structure, but HTML5 is a full on package to build websites, handle presentation, add functionalities and Web APIs.

HTML5 is the recommended version to build modern web applications as it is light and fastest version of Hypertext Mark up Language, the code that describes web pages. HTML5 was formed in 2009 and start supporting in browsers in 2010 onwards.

html5 tutorial
HTML5 Tutorial

HTML5 Stack

Html5 is the combination of three web technologies:→


HTML → to build webpage structure,
CSS → to enhance look and feel( presentation layer), and
Javascript → to add functionality to HTML elements.

The term HTML5 means not only HTML, it is a combination of HTML, CSS and Javascript with APIs. For example, drawing and animation using canvas, offline storage, microdata, audio and video, drag and drop, geolocation, embedded fonts, web APIs etc. HTML5 includes new semantic tags and some old tags( with redefinition ).

HTML + CSS + JAVASCRIPT = HTML5

Why HTML5

HTML5 has been designed to deliver almost everything you'd want to do on web without requiring additional software such as browser plugins. It does everything from animation to apps, music to movies, and can also be used to build complicated web applications that run in your browser.

HTML5 isn't proprietary, so you don't need to pay royalties to use it. It's also cross-platform, which means it doesn't care whether you're using a tablet or a smart phone, a net-book, notebook, ultra-book or a Smart TV if your browser supports HTML5, it should work flawlessly.

HTML5 Changed Elements

These elements were already there in HTML4/XHTML. But in HTML5, the definition or usage has been changed.

  1. a tag is now Hyperlink, not anchor
  2. a tag <a> can have both inline and block child elements.
  3. b tag is offset text conventionally styled in bold
  4. i tag is offset text conventionally styled in italic
  5. u tag is offset text conventionally styled with an underline
  6. cite tag is cited title of work
  7. hr tag is Thematic Break, not Horizontal Rule
  8. input tag is Input Control.
  9. meta tag is meta data.
  10. s tag is struck text.
  11. small tag is small print.
  12. dl tag is description list, not definition list.

To learn html5, you should be familiar with HTML, CSS and JavaScript basics. This tutorial will cover HTML5 and CSS3 thoroughly with live examples and code.

HTML Versions

Year Achievement
1989 HTML Formed
1995 HTML 2
1995 CSS
1995 JAVASCRIPT
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2001 XHTML 1.1
2009 HTML5
2015 HTML5.1
2017 HTML5.2
2021 HTML5.3

HTML5 Browsers Support

HTML5 is supported by all major browsers now. The first browser support of html5 was seen in 2010. Here is the list of supported browsers for html5.

  • Chrome 5 and above
  • Firefox 4 and above
  • Opera 11 and latest versions
  • Safari 5.1 for Mac, Iphone and Ipads
  • Internet Explorer 9 and above
  • Edge 12 and above Browsers

For Legacy browser support, we can use third party javascript. HTML5 Support on old browsers for tags supports. But it is recommended to use latest browsers.

HTML5 new Features

HTML5 new features includes semantic elements, media tags (Audio & Video), Canvas, SVG, Geolocation, Web Storages, CSS3 etc. Here is a complete list of HTML5 Features.

HTML5 Features Use
New Semantic Tags<header>, <nav>, <section>, <article>, <footer> etc.
HTML5 New Tags
Audio and Video<audio> & <video> Html5 Audio Video Tutorial
New Form ControlsNew attributes, New input types, progress bar etc. HTML5 Form Tutorial
SVG<svg> Tag for vector based drawings, shapes, pie and bar graphs, maps etc. SVG Tutorial
Canvas<canvas> tag for 2-d drawings using javascript. Canvas Tutorial
CSS3New Selectors & properties for better styling, transition, transformation, animations, embedded fonts, filters, multi-column layouts and responsive web design. Css3 Tutorial
GeolocationTo Detect user physical location. Html5 Geolocation
Web StorageTo store upto 5mb data on front end either as local or session storage. Local and Session Storage
MicrodataTo tell search engines our page structure.
Drag, drop and touchNew Events in javascript.

HTML5 Doctype

HTML5 Doctype is short, and easy to remember. Unlike, HTML4 and XHTML, there is no DTD. As per W3C, same doctype will be used in later versions of HTML.


<!DOCTYPE HTML>     // New and shorter Doctype, no DTD Required

HTML5 Template

Default Template for HTML5 based websites.

<!doctype html>				  
<html lang="en">            //lang embedded in html
<head>

<title>HTML5 Page</title>
<meta charset="utf-8">      //Short charset meta tag
<link href="style.css" rel="stylesheet"> //No Type attribute
<script src="file.js"></script>    //No Type attribute required
</head>

<body>
    <h1>My First HTML5 page.</h1>
</body>

</html>