{"id":27611,"date":"2012-05-09T02:45:44","date_gmt":"2012-05-08T21:45:44","guid":{"rendered":"https:\/\/www.tutorialchip.com\/?p=27611"},"modified":"2013-07-29T02:08:18","modified_gmt":"2013-07-28T21:08:18","slug":"importance-of-html5-in-website-designing","status":"publish","type":"post","link":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/","title":{"rendered":"Importance of HTML5 in Website Designing"},"content":{"rendered":"<p>There are several ways a website can be designed using advanced technical tools, methodologies, and advanced designing tools, and many more. <a href=\"http:\/\/www.doublespark.co.uk\/web\" target=\"_blank\">Professional website designers<\/a> have switched their taste from non-html technologies like Adobe Flash to newest html5 capabilities best suiting to the modern browsers while designing a website. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not &#8211; suck it up and deal.<\/p>\n<p><strong>Other useful HTML tutorials:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.tutorialchip.com\/tutorials\/detailed-list-of-html-and-html5-elements\/\" target=\"_blank\">Detailed List of HTML and HTML5 Elements<\/a><\/li>\n<li><a href=\"https:\/\/www.tutorialchip.com\/tutorials\/html4-and-html5-key-differences-compare-side-by-side\/\" target=\"_blank\">HTML4 and HTML5 Key Differences<\/a><\/li>\n<li><a href=\"https:\/\/www.tutorialchip.com\/tutorials\/inline-elements-list-whats-new-in-html5\/\" target=\"_blank\">Inline Elements List and What\u2019s New in HTML5<\/a><\/li>\n<\/ul>\n<p>HTML5 isn\u2019t hard to use or understand and even though it\u2019s not fully adopted yet. A web developer makes a good use of convert psd to html5 service while converting a psd design file into a reputed language like html5. W3C is a worldwide organization that provides perfect guidelines for the development of websites.<\/p>\n<h2>Important Reasons to Design a Website in HTML5<\/h2>\n<p><strong>HTML5 is the Future, Go With it<\/strong><\/p>\n<p>The only real reason I prefer to use HTML5 is just to write cleaner code, all the other benefits and fun features I have not even really jumped into yet, but that is the great thing about it, you can just start using it right now and not even change the way you design.<\/p>\n<p><strong>Mobile Ready Tool<\/strong><\/p>\n<p>Mobile devices are taking over the world. The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.<\/p>\n<p><strong>Cross Browser Support<\/strong><\/p>\n<p>Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it.<\/p>\n<p><strong>Game Development<\/strong><\/p>\n<p>We all want a more dynamic website that responds to the user and allows the user to interact your content instead of just look at it. You can develop games using HTML5&#8217;s &lt;canvas&gt; tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you\u2019ve built Flash games before, you\u2019ll love building HTML5 games.<\/p>\n<p><strong>Local Storage Feature<\/strong><\/p>\n<p>It\u2019s a little bit of a cross between regular old cookies and a client-side database. It\u2019s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed.<\/p>\n<p><strong>Easy to Read Code<\/strong><\/p>\n<p>HTML5 allows you to write simple, elegant, easy to read code that allows you to easily separate meaning from style and content. Consider this simple header code with navigation example;<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;div id=&quot;header&quot;&gt;\r\n&lt;h1&gt;Header Text&lt;\/h1&gt;\r\n&lt;div id=&quot;nav&quot;&gt;\r\n&lt;ul&gt;\r\n&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link1&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link2&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link3&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>With HTML5 you can clean this up even more and give your markup more meaning;<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;header&gt;\r\n&lt;h1&gt;Header Text&lt;\/h1&gt;\r\n&lt;nav&gt;\r\n&lt;ul&gt;\r\n&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link1&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link2&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link3&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n&lt;\/nav&gt;\r\n&lt;\/header&gt;\r\n<\/pre>\n<p>With the new &lt;section&gt;, &lt;article&gt;, &lt;header&gt;, &lt;footer&gt;, &lt;aside&gt; and &lt;nav&gt; tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized.<\/p>\n<p><strong>Doctype<\/strong><\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;!DOCTYPE html&gt;\r\n<\/pre>\n<p>Very simple, No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes.<\/p>\n<p><strong>Video and Audio Support<\/strong><\/p>\n<p>Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 &lt;video&gt; and &lt;audio&gt; tags. Old browsers don\u2019t like HTML5, you will need to add a little bit more code to get them working correctly.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n&lt;video poster=&quot;testvideo.jpg&quot; controls&gt;\r\n&lt;source src=&quot;testvideo.m4v&quot; type=&quot;video\/mp4&quot; \/&gt;\r\n&lt;embed src=&quot;\/video\/player&quot;&gt;&lt;\/embed&gt;\r\n&lt;\/video&gt;\r\n<\/pre>\n<p><strong>Easily Content Access<\/strong><\/p>\n<p>With new HTML5 semantic tags &lt;header&gt;, &lt;footer&gt;, &lt;nav&gt;, &lt;section&gt;, &lt;aside&gt;, etc. allow screen readers to easily access the content and better examine the HTML document. Before, your screen readers had no way to determine what a given &lt;div&gt; was even if you assigned it an id or class.<\/p>\n<h2>Summary<\/h2>\n<p><strong>Advantages<\/strong><\/p>\n<ul>\n<li>Cleaner markup.<\/li>\n<li>Additional semantics of new elements like &lt;header&gt;, &lt;nav&gt;, and &lt;time&gt;.<\/li>\n<li>New form input types and attributes that will (and in Opera\u2019s case, do) take the hassle out of scripting forms.<\/li>\n<li>Staying ahead of the curve before HTML5 becomes the mainstream markup language. Use this as a selling point when talking with your clients.<\/li>\n<\/ul>\n<p><strong>Disadvantages<\/strong><\/p>\n<p>Not everything works in every browser, but you could say the same about CSS.<\/p>\n<h2>In Closing<\/h2>\n<p>HTML5 is not for everyone. Therefore, you must be wise and select how and where to use it. Think of all the markup flavors you have got available as tools, use the right one for the right job.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>There are several ways a website can be designed using advanced technical tools,&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"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},"categories":[327],"tags":[329,86],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Importance of HTML5 in Website Designing - TutorialChip<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Importance of HTML5 in Website Designing - TutorialChip\" \/>\n<meta property=\"og:description\" content=\"There are several ways a website can be designed using advanced technical tools,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/\" \/>\n<meta property=\"og:site_name\" content=\"TutorialChip\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-08T21:45:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-07-28T21:08:18+00:00\" \/>\n<meta name=\"author\" content=\"najam\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"najam\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/\"},\"author\":{\"name\":\"najam\",\"@id\":\"https:\/\/www.tutorialchip.com\/#\/schema\/person\/2bce00c9ec742f16e60a29fe516fbb0e\"},\"headline\":\"Importance of HTML5 in Website Designing\",\"datePublished\":\"2012-05-08T21:45:44+00:00\",\"dateModified\":\"2013-07-28T21:08:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/\"},\"wordCount\":1019,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.tutorialchip.com\/#organization\"},\"keywords\":[\"html\",\"html5\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/\",\"url\":\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/\",\"name\":\"Importance of HTML5 in Website Designing - TutorialChip\",\"isPartOf\":{\"@id\":\"https:\/\/www.tutorialchip.com\/#website\"},\"datePublished\":\"2012-05-08T21:45:44+00:00\",\"dateModified\":\"2013-07-28T21:08:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.tutorialchip.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Importance of HTML5 in Website Designing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tutorialchip.com\/#website\",\"url\":\"https:\/\/www.tutorialchip.com\/\",\"name\":\"TutorialChip\",\"description\":\"All Designs, Graphics, WordPress, Web Development Resources\",\"publisher\":{\"@id\":\"https:\/\/www.tutorialchip.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tutorialchip.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.tutorialchip.com\/#organization\",\"name\":\"TutorialChip\",\"url\":\"https:\/\/www.tutorialchip.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tutorialchip.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.tutorialchip.com\/wp-content\/uploads\/2016\/08\/logo-tutorialchip.svg\",\"contentUrl\":\"https:\/\/www.tutorialchip.com\/wp-content\/uploads\/2016\/08\/logo-tutorialchip.svg\",\"caption\":\"TutorialChip\"},\"image\":{\"@id\":\"https:\/\/www.tutorialchip.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.tutorialchip.com\/#\/schema\/person\/2bce00c9ec742f16e60a29fe516fbb0e\",\"name\":\"najam\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.tutorialchip.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/01e1a21e3b6b6f7d7cda0035f5b0e743?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/01e1a21e3b6b6f7d7cda0035f5b0e743?s=96&r=g\",\"caption\":\"najam\"},\"url\":\"https:\/\/www.tutorialchip.com\/author\/dreammaker\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Importance of HTML5 in Website Designing - TutorialChip","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/","og_locale":"en_US","og_type":"article","og_title":"Importance of HTML5 in Website Designing - TutorialChip","og_description":"There are several ways a website can be designed using advanced technical tools,...","og_url":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/","og_site_name":"TutorialChip","article_published_time":"2012-05-08T21:45:44+00:00","article_modified_time":"2013-07-28T21:08:18+00:00","author":"najam","twitter_card":"summary_large_image","twitter_misc":{"Written by":"najam","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#article","isPartOf":{"@id":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/"},"author":{"name":"najam","@id":"https:\/\/www.tutorialchip.com\/#\/schema\/person\/2bce00c9ec742f16e60a29fe516fbb0e"},"headline":"Importance of HTML5 in Website Designing","datePublished":"2012-05-08T21:45:44+00:00","dateModified":"2013-07-28T21:08:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/"},"wordCount":1019,"commentCount":0,"publisher":{"@id":"https:\/\/www.tutorialchip.com\/#organization"},"keywords":["html","html5"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/","url":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/","name":"Importance of HTML5 in Website Designing - TutorialChip","isPartOf":{"@id":"https:\/\/www.tutorialchip.com\/#website"},"datePublished":"2012-05-08T21:45:44+00:00","dateModified":"2013-07-28T21:08:18+00:00","breadcrumb":{"@id":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.tutorialchip.com\/tutorials\/importance-of-html5-in-website-designing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tutorialchip.com\/"},{"@type":"ListItem","position":2,"name":"Importance of HTML5 in Website Designing"}]},{"@type":"WebSite","@id":"https:\/\/www.tutorialchip.com\/#website","url":"https:\/\/www.tutorialchip.com\/","name":"TutorialChip","description":"All Designs, Graphics, WordPress, Web Development Resources","publisher":{"@id":"https:\/\/www.tutorialchip.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tutorialchip.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tutorialchip.com\/#organization","name":"TutorialChip","url":"https:\/\/www.tutorialchip.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tutorialchip.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.tutorialchip.com\/wp-content\/uploads\/2016\/08\/logo-tutorialchip.svg","contentUrl":"https:\/\/www.tutorialchip.com\/wp-content\/uploads\/2016\/08\/logo-tutorialchip.svg","caption":"TutorialChip"},"image":{"@id":"https:\/\/www.tutorialchip.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.tutorialchip.com\/#\/schema\/person\/2bce00c9ec742f16e60a29fe516fbb0e","name":"najam","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tutorialchip.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/01e1a21e3b6b6f7d7cda0035f5b0e743?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/01e1a21e3b6b6f7d7cda0035f5b0e743?s=96&r=g","caption":"najam"},"url":"https:\/\/www.tutorialchip.com\/author\/dreammaker\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/posts\/27611"}],"collection":[{"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/comments?post=27611"}],"version-history":[{"count":15,"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/posts\/27611\/revisions"}],"predecessor-version":[{"id":27621,"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/posts\/27611\/revisions\/27621"}],"wp:attachment":[{"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/media?parent=27611"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/categories?post=27611"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tutorialchip.com\/wp-json\/wp\/v2\/tags?post=27611"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}