What is the difference between HTML4 and HTML5?

-

What is the difference between HTML4 and HTML5?

The main difference in HTML4 and HTML5 are the document types. HTML4 has three different document types whether HTML5 has only one document type. The example of HTML4 document types are as follow;

1- Transitional Doctype:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

2- Frameset Doctype:

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd"

3- Strict Doctype:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"

HTML5 is the latest revision of XHTML that supports the latest browsers. It is quite helping for browsers to understand the latest techniques like flash, animations, audio and videos etc. HTML5 is also said to be the semantic coding that is helpful in SEO. It's mostly using in making mobile apps now a days. There are some differences in html4 and html5 tags. HTML5 has introduced some new elements (tags).

 Kindly note XHTML was the revision of HTML4 whereas, HTML5 is the latest revision implemented by World Wide Web Consortium. XHTML is based on xml which is "extensible markup language" and it's quite stricter than html4.01. It has some set of rules which html4 doesn't have. The major difference is to use lowercase in tags as well as proper starting and closing of tags. 

See the difference of how to make a website starting with basic coding blocks in HTML4 and HTML5. The difference of tags can be seen as mentioned below;

Basic HTML4 / XHTML building blocks:



All information has it's own div. What is div? (Div is a container or a block that keeps the data in it and make it visible on website). We can make our website beautiful by applying styling to div or child elements. Element can be anything inside div, that can span, heading tags (h1, h2, h3, h4, h5, h6), paragraph tag (p tag) etc.

 Header, Footer, Sidebar, Aside and Main are wrapped in separate div tags. Whereas,

Basic HTML5 building block is:



HTML5 tags are changed with respective of their content. header div is wrapped in header tag, sidebar is wrapped in aside, aside is also wrapped in aside, main content is wrapped in main's tag and content of footer is wrapped in footer tag. these are just the basic tags that are shown in the picture mentioned above. There are a lot more, you can visit HTML Element's page to view those elements and their usage.

There are also changes in Meta tag for encoding a web page, below mention example is an 

HTML4 Meta encoding example;

==> < meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

And for HTML5 encoding example is as follow;

==> < meta charset="utf-8" >

Now, as you know that HTML5 has some difference in tags so therefore, if we want to make it compatible with IE (internet explorer or Edge) we must have to add the IE (Internet Explorer or Edge) support script to enable HTML5 tags in Internet explorer. Following is the example of IE script;

< script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js" >

Example of semantic elements for HTML5 is as follows;

  1. Header
  2. Nav
  3. Section
  4. Article
  5. Footer
  6. SVG
  7. Canvas
  8. Audio
  9. Video

If you really want to learn how to make a website then you must understand these basics of html language which are standardized and updated by World Wide Web in the form of html5. Firstly, you must understand properly that "What is the difference between HTML4 and HTML5" and after that you should start making your website.

Comments

Post a Comment

Please leave your comments or feedback at here....

Popular posts from this blog

What is Heading in html and how to add h1 in a web page or post?

-
Image
What is Heading in html and how to add h1 in a web page or post? Heading is the most important part of our website. It helps us in search engine optimization. It shows that there is some title to specific post. It behaves like a name to some post. It also express that what may be the article downwards or what can be the content that will be under it. It summarize the content. Like if someone come and open google and type there "List of restaurants in NY", Google will show the details about the particular search and will show a list of pages which will have the same text in their title. This was the simplest example for heading, which clearly shows that headings play an important role in getting traffic. List of Heading Tags h1 - The biggest heading in font size and line height h2 - Smaller than h1 h3 - Smaller than h2 h4 - Smaller than h3 h5 - Smaller than h4 h6 - Smaller than h5 We can utilize these headings like this; <h1>Your Heading</h...
Read more

What is img tag and how to add src (source or path) in html website?

-
Image
What is img tag and how to add src (source or path) in html website? Images are the best option to increase the SEO and the importance of your website. The text you type may be consists of hundreds and thousands words but a small picture can illustrates all the meaning to your post. It is really very simple to add images using "img tag". Image has some compulsory attributes that includes, width, height, src and alt as well. These are the mandatory attributes for showing an image in your website. You can assign width, height and also add the path in img src using src attribute which demonstrates the location of your image. We use image tag to include an image to the post or a page. This image tag consists of “src, width, Height and Alt” attribute that gives the identity to the image that how much the width and height this image contains and what is the alternate text of the image. Alternative text is very important for SEO (search engine optimization) purposes. There ...
Read more