HTML5 Tutorial for Beginners

Before you start learning html5 tags, make sure you are familiar with basic html page designing. Html5 is just next version of html with some additional tag that will help designing responsive web pages.

Here is an example of canvas tag using svg, now you can create circle, rectangle on web pages using simple html tags.

<svg id="svgelem" height="100" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="green" />
<rect id="rect1" width="50" height="50" fill="blue"></rect>
</svg>

What is HTML5?

Learn new tags of html, html5 is just advanced html version.

HTML5 is the upgraded version of HTML, here we learn additions html tag for responsive web page designing, tags which were not available in earlier version of html, we always recommand that you should Learn HTML before learning HTML5.

Basic HTML document structure remain same

DOCTYPE declaration

<!DOCTYPE HTML>

Character encoding (charset) declaration

<meta charset="UTF-8">

Actually html5 is same as html file in terms of document structure, but there are many new tags or elements have been introduced, which were not there earlier html

How to use HTML5 features and attributes

In html document structure there is no difference, html5 are just additional tags , which can be added in html document.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
All content will come here
</body>
</html>

Now you can add additional three structural html5 elements (<header>, <section>, <footer>) in regular html structure

<header> </header>
<section> </section>
<footer> </footer>

Header

section

What's New in HTML5?

There are many new tags have been introduced which helps web designer and developer to represent many creative ideas more efficiently

In this HTML5 tutorial we have provided 50+ HTML5 tags including header, footer, audio, video, datalist, article etc. After learning this HTML5 tutorial you should be able to start professional html5 web designing.

HTML5 Tags Examples

Here are some of very useful html5 tags you must know