Best HTML and HTML5 tutorial for beginners

html and html5 tutorial for begginersAre you searching for a good website for an HTML5 tutorial with simple examples and is specially designed for beginners? If yes then please stop searching, you are in the right place to learn HTML5 even without any prior knowledge on HTML. So let start learning and wish you the best of luck.

HTML5 is the latest version of Hypertext Markup Language for creating web pages. It’s very easy to learn even for a beginner. The interest in HTML5 is increasing day by day and the number of web professionals adopting this technology is also increasing rapidly.

The latest standard of HTML is HTML5 and it is an output of joint efforts from W3C and WHATWG. It introduces a more efficient markup to eliminate the use of external plugging like Adobe Flash Player. HTML5 also minimizes the use of scripting languages and it’s more SEO friendly. It is device independent and supported by the latest versions of all major web browsers.

In civilgyan.com I have tried to discuss the new features and changes that are included in this version in a simple manner and with sufficient examples so that anyone can learn HTML5 easily and quickly. After reading this tutorial, anyone will be able to understand the nuts and bolts of HTML5 and the full potential of this technology. So, go ahead and read the tutorial thoroughly. After finishing the HTML5 tutorial, register a domain for your website and start building your new website with this latest technology.

This website is definitely different from other HTML5 tutorials available. Because like other HTML5 tutorials this website does not discuss all HTML5 elements, but it focuses on the elements that are newly introduced in HTML5 including few very common old elements.

HTML5 Tutorial

Doctype in HTML5

<!DOCTYPE> is a special tag that is declared at the very beginning of a web page before <html> tag. It sends an instruction to the web browser about the version of HTML. <!DOCTYPE> is not an HTML tag and most of the modern browsers support this tag declaration. As HTML5 is not based on SGML, therefore no DTD reference is required in <!DOCTYPE> declaration. Moreover, this tag is also very useful for SEO.

An example of a typical HTML5 doctype tag declaration is shown below:

<!DOCTYPE html>

For example below we have given a simple HTML5 code snippet for creating a simple web page with doctype declaration:

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 page title</title>
</head>
<body>
    HTML5 page content
</body>
</html>

HTML Tag

Let’s start a discussion about the first HTML5 tag. But before starting please keep in your mind that tags are of two types – ‘opened tags’ and ‘closed tags’. Tags that don’t have got any closing tags are called opened tags. Examples of opened tags are <br>, <img> etc. On the other hand, tags that have got closing tags are called closed tags. For examples <html>, <head>, <body> etc are closed tags. <html> tag has got it’s corresponding closing tag </html>.

The HTML tag (<html>) is the root element and it is the container of all other HTML5 elements or tags. All the other HTML5 tags need to be written in the middle of <html> and </html>. The Html tag informs the browser that the document is an HTML document.

For example below we have shown a simple HTML5 code snippet with HTML tag for creating a simple web page:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 page title</title>
</head>
<body>
HTML5 page content
</body>
</html>

There are a few attributes of the Html tag. One of the most widely used attributes of HTML tags is ‘lang’. How this attribute is used has been shown below. ‘en’ represents the language ‘English’.

<html lang="en">

HEAD Tag

The head tag of HTML5 (<head>) stores the information about the HTML document and it is very important for SEO. There are several other tags like <title>, <meta>, <script>, <link> etc. are written within HTML5 head tag. The title tag must be included within the head tag because it shows the web page title in the title bar of the browser window. Except for title tag, no other tag those are written within the head tag generates any output in the browser.

Check the following lines of code for getting an idea about how to write the HTML5 head tag:

<head>
<title>HTML5 page title</title>
</head>

For example below we have shown a simple HTML5 code snippet with the head tag for creating a simple web page:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 page title</title>
</head>
<body>
HTML5 page content
</body>
</html>

BODY Tag

The body tag of HTML5 holds all the contents of a document such as text, images, tables, links, etc. The contents of HTML5 body tag are placed in between <body> and </body> and shown in the browser window. As the body tag actually generates the output on the screen so most of the HTML5 tags or elements are used within the body tag.

Check the following lines of code for getting an idea about how to write the HTML5 body tag:

<body>
HTML5 page content
</body>

For example below we have shown a simple HTML5 code snippet with body tag for creating a simple web page:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 page title</title>
</head>
<body>
HTML5 page content
</body>
</html>

HEADER Tag

Several new tags or elements have been added in HTML5. The header tag (<header>) is one of them. It is used as the header of one or more sections or as a header of the document. HTML5 header tag should be used as a container of introductory contents like <h1> – <h6> tags, table of contents, search form, logo, etc. with or without navigational links. More than the header element can be used in an HTML5 document and it is generally placed at the beginning of the document or <article> tag.

Important points need to be remembered:

  1. <header> and <head> tags are completely different.
  2. A <header> tag can’t be placed within <footer> or <address> tag. Also header element can’t be placed within another header element.
  3. HTML5 header element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support header element.

There are few HTML5 header tag examples given below:

Below the header tag is used as document header

<header>
<h1>This is the heading of the page</h1>
   With some supplementary information
</header>

Below the header element is used as article header

<article>
<header>
<h1>Title of this article</h1>
      By Vijay Sahu
   </header>
   Contents of the article
</article>

Footer Tag

The <footer> tag is one of such tags that are newly introduced in HTML5. It is used as the footer of one or more sections or as a footer of the document just like <header> tag. HTML5 <footer> element usually contains information about the author of the document, copyright information, terms of use, privacy policy, contact information, etc. More than one <footer> tag can be used in an HTML5 document and it is generally placed at the end of the document or <article> tag.

An important point needs to be remembered:

  • Contact information should not be placed directly within the <footer> element, it should be placed within <address> tag.

Web browser support:

HTML5 <footer> element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this tag.

There are few HTML5 <footer> tag examples given below:

Below the <footer> element is used as a document footer.

<footer>
<ul>
<li>Copyright</li>
<li>Sitemap</li>
<li>Terms of Use</li>
<li>Privacy Policy</li>  
<li>Contact</li>
</ul>
</footer>

Below the <footer> tag is used as an article footer.

<article>
   Article content
<footer>
Footer info for the article
</footer>
</article>

Below the <footer> element is used as section footer.

<section>
Section content
<footer>
Footer info for the section
</footer>
</section>

NAV Tag

Another newly added tag in HTML5 is the nav tag (<nav>). HTML5 nav tag defines the section for navigation links in a document. It is not mandatory to place all the links of a document in the nav element, but the major navigational links should be placed under it. This element can be used in more than one place within a document. But the nav element should be placed in such places in a document so that visitors can easily access the navigational links.

An important point needs to be remembered:

  • HTML5 nav element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support the nav element.

There is an HTML5 nav tag example given below:

<nav>
   <a href="/">Home</a> | <a href="/blog/">Web Design Blog</a> | <a href="/sitemap.html">Sitemap</a> | <a href="/contact-us.html">Contact Us</a>
</nav>

ARTICLE Tag

The article tag (<article>) represents an independent component of a document, page, or website which is distributable and reusable. Sources of HTML5 article element could be a blog post, forum post, news story, user-submitted comment, etc. The article element generally contains a heading (usually within header element), the paragraph tag (<p>), and sometimes footer tag.

An important point needs to be remembered:

  • HTML5 article element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support article elements.

There are some HTML5 article tag examples given below:

A simple example of the article tag

<article>
   <h1>This is the heading of the article</h1>
   <p>The content of the article</p>
</article>

More structured example of article tag

<article>
   <header>
      <h1>This is the heading of the article</h1>
      <p>Written By: Vijay Sahu</p>
   </header>
   <p>More content ....</p>
   <footer>
      <p><small>Footer content</small></p>
   </footer>
</article>

SECTION Tag

The section tag (<section>) is a generic semantic element of HTML5 which represents a generic document or application section. This element is called semantic because it provides meaning to both web browsers and humans about the enclosed content. Usually, there should be a heading immediately after the section tag is followed by relevant content.

Most of the people mess-up HTML5 section element with a div element and use it for making structural divisions or for implementing styles within a document. This is the technically incorrect approach. For doing this div element must be used instead of the section element. As the div element is a non-semantic element, so it should be used in case of structural divisions and style implementations where semantic values of the enclosed content are not considered.

An important point needs to be remembered:

  • HTML5 section element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support section element.

There is an HTML5 section tag example given below:

<section>
   <h1>This is the heading of the section</h1>
   <p>The content of the section</p>
</section>

HGROUP Tag

The hgroup element (<hgroup>) is used to the group heading with associated sub-headings. More specifically it can say that HTML5 hgroup tag is used for grouping <h1> – <h6> tags. It works just like a container of two or more related heading elements.

An important point needs to be remembered:

  • HTML5 hgroup element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support hgroup tag.

There is an HTML5 hgroup element example given below:

<article>
    <hgroup>
        <h1>Title of article goes here</h1>
        <h2>Sub-title of article goes here</h2>
    </hgroup>
    <p>Article content goes here...</p>
</article>

ASIDE Tag

The aside tag (<aside>) represents content that is related to its surrounding content in an HTML5 document, but it can still have individual importance. The aside element is usually used in the sidebar of a document. For example, it can be used for showing some quotes or important parts from a large article in the sidebar.

An important point needs to be remembered:

  • HTML5 aside element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support article elements.

There is an HTML5 aside tag example given below:

<article>
   <hgroup>
      <h1>Title of article goes here</h1>
      <h2>Sub-title of article goes here</h2>
   </hgroup>
   <p>Article content goes here...</p>
</article>

FIGURE Tag

The <figure> tag is used to mark up one or more images in an HTML5 document. It specifies a self-contained content that is independent of the main flow of the document. So if the <figure> element is removed then there is no effect in the output as well as the flow of the document. This tag is also newly introduced in HTML5.
Web browser support:

HTML5 <figure> tag is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this element.

There are some HTML5 <figure> element examples given below:

The <figure> tag with an image.

<figure>
   <img src="sunrise.jpg" alt="The photo of Sunrise" width="400" height="300">
</figure>

FIGCAPTION Tag

The <figcaption> tag defines a caption within a <figure> element. The HTML5 <figcaption> element must be used immediate after <figure> tag or just before </figure> tag, that means this element must be either first or last child element of its parent <figure> element. Only one <figcaption> tag can be used within a <figure> element of a HTML5 document. This tag is also newly introduced in HTML5.
Web browser support:

HTML5 <figcaption> element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this element.

There are some HTML5 <figcaption> tag examples given below:

<figure>
   <img src="sunrise.jpg" alt="The photo of Sunrise" width="400" height="300">
   <figcaption>Sunrise at Puri - posted by A. Smith</figcaption>
</figure>

AUDIO Tag

Before HTML5, the audio files could not be played on a web page without the support of third party plug-ins like Adobe Flash Player, Apple QuickTime Player, etc. But HTML5 defines a new element – <audio> which provides native audio playback support in the browser. The <audio> tag specifies a way to embed an audio file within a web page.
Web browser support:

HTML5 <audio> element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this element.

There is a HTML5 <audio> tag example given below:

<audio controls="controls" loop="loop" autoplay="autoplay" preload="none">
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

The text written between <audio> and </audio> tags is displayed if the browser does not support <audio> element.

HTML5 Audio Tags:

<audio> It defines the sound content
<source> It defines the attributes of the media resource

Supported Audio Formats with Mime Types:

Presently three audio file formats are supported by HTML5 <audio> element.

MP3 audio/MPEG
OGG audio/Ogg
WAV audio/wav

Attributes of Audio Element with Functionality:

CONTROLS The control attribute adds a default audio control with options like play, stop, pause, volume
SRC The src attribute defines a valid source path of audio file
LOOP The loop attribute specifies whether the audio file should be repeatedly played
AUTOPLAY The autoplay attribute helps to start playing an audio file automatically
PRELOAD The preload attribute specifies when the audio file gets preloaded. Possible values are – none / metadata / auto.

Supported Audio Formats with Mime Types:

Internet Explorer 9+ MP3
Firefox 3.6+ Wav, Ogg
Chrome 6+ MP3, Wav, Ogg
Safari 5+ MP3, Wav
Opera 10+ Wav, Ogg

SOURCE Tag

The <source> tag is used to specify multiple media resources for media elements like <audio> and <video>. This element allows the user to specify alternative audio or video files that the web browser may select from based on its media type or codec support. The <source> element is newly introduced in HTML5.
Web browser support:

HTML5 <source> tag is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this tag.

There is a HTML5 <source> element example given below:

<audio controls="controls">
    <source src="sound.mp3" type="audio/mpeg">
    <source src="sound.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

The text written between <audio> and </audio> tags is displayed if the browser does not support <audio> element.

Attributes:

media Specifies the type of media resource
src Specifies the URL or the path of the media files
type Specifies the MIME type of the media resource

TIME Tag

The <time> tag is another newly introduced HTML5 element. It defines extra semantic information like time (24-hour format) or date (with or without time zone offset) on a web page. The <time> element of HTML5 does not render anything, so it won’t make any difference in the output. But it encodes the date and time in a way that can be read by web browsers and generates smarter search results produced by search engines.
Web browser support:

HTML5 <time> tag is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support this element.

There is a HTML5 <time> element example given below:

<p>Our shop is opened at <time>10:00</time> every morning.</p>

 

When this tag is used without any attributes then the content enclosed between <time> and </time> must be a valid date or time.

The HTML5 <time> element has an attribute ‘datetime’. In the following examples, I would like to show how to use ‘datetime’ attribute with this element.

<time datetime="2012-11-25">25<sup>th</sup> November</time>
<time datetime="18:00">starts at 6pm</time>
<time datetime="2012-11-25T18:00+00:00">6pm on the festival day</time>

When the datetime attribute is used with the <time> tag then the content can be anything.


MARK Tag

The <mark> tag is used to highlight some parts of the text of a document to indicate its importance to the users. It also draws extra attention of users to the highlighted text. This element is also newly introduced in HTML5.
Web browser support:

HTML5 <mark> element is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support <mark> tag.

There is a HTML5 <mark> element example given below:

<h1>About <mark>HTML5</mark></h1>
<p>
<mark>HTML5</mark> 
is the fifth version of HyperText Markup Language. Many elements like header, footer, audio, video etc. have been introduced in 
<mark>HTML5</mark>.
</p>

MAIN Tag

One of the latest HTML5 elements is the <main> element. The <main> tag specifies the main content of a HTML5 document. The content inside the <main> element should be unique across all other pages of the website that means repetitive contents like navigational links, common forms, menus, sidebars, logos, etc. should not be used within <main> tag.

Important points need to be remembered:

  • Only one <main> tag can be used in a HTML5 document.
  • <main> tag must be the parent of the HTML5 elements like – <article>, <header>, <footer>, <aside> and <nav>.

Web Browser Support:

<main> element is presently supported by almost all the latest web browsers like Firefox, Chrome, Safari, and Opera. Only Internet Explorer does not support this HTML5 element yet.

There is a HTML5 <main> element example given below:

<main>
    <h1>Search Engine Optimization</h1>
    <p>Search Engine Optimization (SEO) is a technique to make a website popular by improving search ranking for popular and relevant keywords.</p>
    <article>
        <h1>White Hat SEO</h1>
        <p>White Hat SEO is a practice used to improve search performance using all approved SEO methods without violating the search engine guidelines.</p>
    </article>
    <article>
        <h1>Black Hat SEO</h1>
        <p>Black Hat SEO is an aggressive SEO tactics which focuses only on search engines, not on natural human audience. Most of the time it does not obey the search engine guidelines.</p>
    </article>
</main>

BDI Tag

The <bdi> tag ensures a part of the text must be formatted in a different direction from the text surrounding it. BDI stands for Bi-directional Isolation. The <bdi> element is useful to embed unknown directional text into a fixed directional document. This element is also newly introduced in HTML5.
Web browser support:

Presently HTML5 <bdi> tag is only supported by the latest versions of Mozilla Firefox and Google Chrome. Other popular web browsers don’t support this element till now.

There is a HTML5 <bdi> element example given below:

<ul>
    <li>Member <bdi>VIJAY</bdi>: 7 points</li>
    <li>Member <bdi>AJAY</bdi>: 6 points</li>
    <li>Member <bdi>RAKESH</bdi>: 8 points</li>
</ul>

WBR Tag

Another newly introduced HTML5 element is the <wbr> tag which is used to specify a breakpoint in a very long word or string. If a word or a string is too long in a document then sometimes the browser may break it at the wrong place so it will be very difficult to read or it does not get broken at all which hampers the page layout. To overcome these problems the HTML5 <wbr> element is ideal.

The main difference between <wbr> tag and <br> tag is that <br> element forces to break a line. On the other hand, <wbr> element breaks a line at the specified breakpoints only if required.
Web browser support:

HTML5 <wbr> tag is supported by the latest versions of all web browsers except Internet Explorer.

There is a HTML5 <wbr> element example given below:

For the functioning of AJAX, one of the very important objects is XML<wbr>Http<wbr>Request.

ADDRESS Tag

The <address> tag is used to define contact information of the author for an HTML5 document or article. The information like the name of the author, author’s website address, postal address, email address for sending feedback, phone number, etc. are generally included within HTML5 <address> element. If the <address> tag is used inside the <body> element then it represents the contact information for the HTML5 document. On the other hand, if the <address> element is kept inside the <article> element then it represents the contact information for that corresponding article.
Important points need to be remembered:

  • The <address> tag must not be used to define any arbitrary contact information unless it is related to the author of the document or article. In that case, the contact information should be shown simply using the <p> tag.
  • Most of the web browsers add a line break before and after the <address> element by default. The contact information under <address> tag is shown as italic in most of the web browsers.
  • The <address> element is usually added within <footer> element.

Web browser support:

HTML5 <address> tag is supported by latest versions of all web browsers. Internet Explorer 8 or earlier versions of Internet Explorer do not support <address> element.

There is a HTML5 <address> tag example given below:

<address>
    Written by <a href="https://www.facebook.com/vijaysahuofficialpage">Vijay Sahu</a>
 
    Website: www.civilgyan.com
</address>

KEYGEN Tag

The <keygen> tag represents a key pair generated control for a form. When the form is submitted, the local key is stored in the local key store and the public key is sent to the webserver. The <keygen> element is newly introduced in HTML5.
Web browser support:

HTML5 <keygen> tag is supported by the latest versions of all web browsers except Internet Explorer.

There is a HTML5 <keygen> element example given below:

<form id="keygen_form" method="post">
   Username: <input type="text" name="username">
   Password: <input type="password" name="password">
   Encryption: <keygen name="keycode">
   <input type="submit" name="submt" value="Submit">
</form>

OUTPUT Tag

The <output> tag is used to show the result of a calculation performed by a script. Often JavaScript is used to calculate the result. This tag is also used to display the result of the user’s interaction with form elements. For example, the range slider can be used to adjust the tax rate and the value can be shown by <output> element. This tag is also newly introduced in HTML5.
Web browser support:

HTML5 <output> tag is supported by the latest versions of all web browsers except Internet Explorer and Safari.

There is a HTML5 <output> element example given below:

<form name="output_form" onsubmit="return false" oninput="result.value = parseInt(num1.value) + parseInt(num2.value)">
   Number 1: <input type="number" name="num1" step="any" value="0"> +
   Number 2: <input type="number" name="num2" step="any" value="0"> =
   <output name="result"></output>
</form>


PROGRESS Tag

The <progress> tag is used to represent the progress of a task. It actually creates a visual progress bar that represents the progress of a specific job. Often JavaScript is used to supply attribute values of <progress> element. HTML5 <progress> tag is newly introduced.

The <progress> element is not suitable to represent a gauge (for example disk space usage, the relevance of SQL queries, etc.).
Web browser support:

HTML5 <progress> element is supported by latest versions of all web browsers. Internet Explorer 9 or earlier versions of Internet Explorer do not support this element.

There is a HTML5 <progress> element example given below:

<progress value="40" max="100"></progress>

Leave a Reply