{"id":9898,"date":"2010-04-10T04:15:19","date_gmt":"2010-04-10T04:15:19","guid":{"rendered":"https:\/\/www.amitbhawani.com\/blog\/?p=9898"},"modified":"2010-04-10T04:16:07","modified_gmt":"2010-04-10T04:16:07","slug":"html5-html4-comparison","status":"publish","type":"post","link":"https:\/\/www.amitbhawani.com\/blog\/html5-html4-comparison\/","title":{"rendered":"HTML5 vs HTML4 Tags & Elements Comparison"},"content":{"rendered":"

Years back the first computer language i learnt by reading a book and practicing on my computer was the HTML. The awesome book which i still own is called as the ‘Black Book of HTML’ a recommended publication for anyone who has just started learning about the computers and programming because this is something which could be the base of all. Time passed away and now we are into the era of HTML5<\/a> where the HTML elements are handled with better rules and lower number of errors. Most of the Tags are still the same but there are a few new Tags being introduced which directly make you understand the element you are referring to.<\/p>\n

The new functions, tags introduced in the HTML 5 are useful in directly embedding video files, audio files, graphics, data storage and documents. There are thousands of companies which implement this like the Apple iPad which supports HTML5 and does not support Adobe Flash which is the very reason developers are more interested in this and are learning about all the new tags.<\/p>\n

You can understand What is HTML5<\/a> from our other article, but in this article we are going to give you a short example on how these Markups would look and would it be easy to write them and also understand them at the same time.<\/p>\n

Here is a HTML4 based Mark up which gives you a brief idea on the Elements used in the current time. While most of the Blogs would have a header, then the design is divided into different columns or sections being the content and sidebars, hence the Markup codes would show it under the sidebar, post class followed by the last footer section which is also the closing part.<\/p>\n

\"HTML4<\/a><\/p>\n

It was analyzed by the HTML 5 Editor from Google that out of Billions of pages, the website developers were using footer, header, nav, menu, content, and main tags more often and in HTML4 they could not Mark up the footer or header elements of its own, hence it was needed for a better version of HTML. The following sample of code is based on the HTML 5 Mark up.<\/p>\n

\"HTML5<\/a><\/p>\n

You can easily find the difference between both the HTML versions where in all the elements are marked in such a way that you can easily understand them.<\/p>\n

Sample Mark Up Code :<\/strong> Here is a sample code which would be the beginning of writing a page based on HTML5.
\n<body>
\n <header>...<\/header>
\n <nav>...<\/nav>
\n <article>
\n <section>
\n ...
\n <\/section>
\n <\/article>
\n <aside>...<\/aside>
\n <footer>...<\/footer>
\n<\/body><\/code><\/p>\n

The whole code is marked up in such a way that anyone can easily recognize them and find out the value of the same. The Header Tag is listed under the body section and it represents the Header Part of the page which can include sub-headings and by lines as shown below.<\/p>\n

<header>
\n <h1>Understanding HTML 5<\/h1>
\n <p class="byline">By Amit Bhawani<\/p>
\n<\/header><\/code>
\n<header>
\n <h1>Amit Bhawani Blog<\/h1>
\n <h2>Learn Technology in Simple Ways<\/h2>
\n<\/header><\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Years back the first computer language i learnt by reading a book and practicing on my computer was the HTML. The awesome book which i still own is called as the ‘Black Book of HTML’ a recommended publication for anyone who has just started learning about the computers and programming because this is something which […]<\/p>\n","protected":false},"author":1,"featured_media":19728,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1310],"tags":[],"class_list":{"0":"post-9898","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guides","8":"entry"},"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/12\/HTML4-Blog-Markup-Codes.png?fit=400%2C214&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":9900,"url":"https:\/\/www.amitbhawani.com\/blog\/what-is-html5\/","url_meta":{"origin":9898,"position":0},"title":"What is HTML5","author":"Amit Bhawani","date":"April 10, 2010","format":false,"excerpt":"HTML5 - The Next Step In Internet Evolution The World Wide Web has come along ways since the early days of silent, frozen, simple text based pages with low quality graphics. The days when we were amazed if a company even had a website are long gone. And the advent\u2026","rel":"","context":"In "What is Guide"","block_context":{"text":"What is Guide","link":"https:\/\/www.amitbhawani.com\/blog\/category\/what-is\/"},"img":{"alt_text":"HTML5 Logo","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/04\/HTML5-Logo.jpg?fit=400%2C321&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5437,"url":"https:\/\/www.amitbhawani.com\/blog\/embed-pdf-doc-files-blog-posts\/","url_meta":{"origin":9898,"position":1},"title":"How to Embed PDF & Doc Files in Web Pages","author":"Amit Bhawani","date":"August 21, 2009","format":false,"excerpt":"I run a stock markets related blog where i write on different companies on a daily basis and keep linking to their income and revenue reports on regular basis in order to keep my visitors updated on the news related to different companies where they invest. Generally i host all\u2026","rel":"","context":"In "How to Guide"","block_context":{"text":"How to Guide","link":"https:\/\/www.amitbhawani.com\/blog\/category\/how-to\/"},"img":{"alt_text":"Scribd","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2009\/08\/scribd-logo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":10623,"url":"https:\/\/www.amitbhawani.com\/blog\/download-multiple-images-from-flickr-high-quality-pictures\/","url_meta":{"origin":9898,"position":2},"title":"Download Multiple Images from Flickr – High Quality Pictures","author":"Amit Bhawani","date":"April 28, 2010","format":false,"excerpt":"Am looking to download around 380 Original High Quality Photos from one of my friends Flickr account which were snapped on our recent holiday but it seems like there is no direct option for this. I have been clicking on each of the photos and then clicking on the option\u2026","rel":"","context":"In "Web Tools"","block_context":{"text":"Web Tools","link":"https:\/\/www.amitbhawani.com\/blog\/category\/web-tools\/"},"img":{"alt_text":"Bulk Download Flickr Photos","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/04\/Bulk-Download-Flickr-Photos-1-300x242.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":14443,"url":"https:\/\/www.amitbhawani.com\/blog\/add-tags-google-places-listing-increase-business-customers\/","url_meta":{"origin":9898,"position":3},"title":"Add Google Tags to Google Places Listing to Increase Business Customers","author":"Amit Bhawani","date":"September 21, 2010","format":false,"excerpt":"Google Places is one of the best service when you are looking to convert the Online visitors reach your offline business and the scope of this opportunity is just increasing every single day. Most of the Business locations in known cities and towns are listed on the Google Maps and\u2026","rel":"","context":"In "Google"","block_context":{"text":"Google","link":"https:\/\/www.amitbhawani.com\/blog\/category\/google\/"},"img":{"alt_text":"Google Places Tags Logo","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/09\/Google-Places-Tags-Logo.gif?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":280,"url":"https:\/\/www.amitbhawani.com\/blog\/automatic-internal-tags-link-building-in-wordpress-for-better-seo\/","url_meta":{"origin":9898,"position":4},"title":"Automatic Internal Tags Link Building in WordPress for better SEO","author":"Amit Bhawani","date":"December 23, 2007","format":false,"excerpt":"Do you have the latest version of wordpress on our blog? If yes you can find the in built Tags feature which can be used in each of your blog posts. Now you can use these tags as a great Internal pages link building tools but using a wordpress plugin\u2026","rel":"","context":"In "Wordpress Guide"","block_context":{"text":"Wordpress Guide","link":"https:\/\/www.amitbhawani.com\/blog\/category\/wordpress\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10593,"url":"https:\/\/www.amitbhawani.com\/blog\/best-how-to-articles-for-computer-users\/","url_meta":{"origin":9898,"position":5},"title":"Best How To Articles for Computer Users","author":"Amit Bhawani","date":"April 27, 2010","format":false,"excerpt":"We have compiled a list of some of the best How To Articles which are mainly useful for Computer Users who keep searching for tutorials and helpful tips. This list is some of the best read articles. How to Access Blocked Websites at School Office or work How to Access\u2026","rel":"","context":"In "Best Rated"","block_context":{"text":"Best Rated","link":"https:\/\/www.amitbhawani.com\/blog\/category\/best-rated\/"},"img":{"alt_text":"How To Topics","src":"https:\/\/i0.wp.com\/www.amitbhawani.com\/blog\/wp-content\/uploads\/2010\/04\/how-to-topics.gif?fit=473%2C480&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/posts\/9898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/comments?post=9898"}],"version-history":[{"count":0,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/posts\/9898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/media\/19728"}],"wp:attachment":[{"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/media?parent=9898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/categories?post=9898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.amitbhawani.com\/blog\/wp-json\/wp\/v2\/tags?post=9898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}