{"id":1534,"date":"2016-06-22T18:08:35","date_gmt":"2016-06-22T18:08:35","guid":{"rendered":"http:\/\/www.capitalnumbers.com\/blog\/?p=1534"},"modified":"2025-08-11T11:28:20","modified_gmt":"2025-08-11T11:28:20","slug":"5-horrible-mistakes-youre-making-with-html5","status":"publish","type":"post","link":"https:\/\/www.capitalnumbers.com\/blog\/5-horrible-mistakes-youre-making-with-html5\/","title":{"rendered":"5 Horrible Mistakes You&#8217;re Making With HTML5"},"content":{"rendered":"<p><!--<img class=\"aligncenter size-full wp-image-1535\" src=\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/mistakes-html5.jpg\" alt=\"mistakes html5\" width=\"1200\" height=\"638\" srcset=\"https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/mistakes-html5.jpg 1200w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/mistakes-html5-300x160.jpg 300w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/mistakes-html5-768x408.jpg 768w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/mistakes-html5-1024x544.jpg 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/>--><\/p>\n<p><span style=\"font-weight: 400;\">It is two years since HTML5 was officialized by W3C as the next generation language for development of websites. It is a fact that this language was developed to solve problems that web developers were having with the initial versions of HTML such as XHTML and HTML4. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Truth be told\u2014HTML5 has solved many of the web-related problems that initial versions of HTML couldn\u2019t solve. It is true that many excellent HTML5-based applications and games are used by millions of users. Therefore, the success of HTML5 isn\u2019t in doubt. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, a majority of web developers continue to make mistakes when developing HTML5 based applications. This primer discusses some of the horrible mistakes web developer make while developing HTML5 based applications. Knowing some of the common mistakes made in HTML5 will help you to become an efficient HTML5 web developer. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here are 5 horrible mistakes that you may be making with HTML5:<\/span><\/p>\n<h6><span style=\"color: #003366;\"><b>#1: Wrong MIME Type Declaration<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">MIME\u2014 Multipurpose Internet Mail Extension\u2014was originally developed for the SMTP (Simple Mail Transfer Protocol) that describes the email content. However, modern browsers use the MIME type to determine the type of media file and plan on actions to do with the content. In other words, the MIME type declaration helps the browser to find out ways on how to display the files that are not compatible with HTML format. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Therefore, correctly declaring the MIME type is significant for getting rid of creepy characters on your web page. To declare the MIME type correctly, you type the below statement between the &lt;head&gt; and &lt;\/head&gt; elements:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;meta https-equiv= \u201cContent-Type\u201d content=\u201dtext\/HTML; charset=utf-8\u2033\/&gt;<\/span><\/pre>\n<div id=\"om-b7tfondceubrbvku-holder\"><\/div>\n<p><script>\/\/ <![CDATA[\nvar b7tfondceubrbvku,b7tfondceubrbvku_poll=function(){var r=0;return function(n,l){clearInterval(r),r=setInterval(n,l)}}();!function(e,t,n){if(e.getElementById(n)){b7tfondceubrbvku_poll(function(){if(window['om_loaded']){if(!b7tfondceubrbvku){b7tfondceubrbvku=new OptinMonsterApp();return b7tfondceubrbvku.init({u:\"18402.328170\",staging:0,dev:0,beta:0});}}},25);return;}var d=false,o=e.createElement(t);o.id=n,o.src=\"\/\/a.optnmnstr.com\/app\/js\/api.min.js\",o.onload=o.onreadystatechange=function(){if(!d){if(!this.readyState||this.readyState===\"loaded\"||this.readyState===\"complete\"){try{d=om_loaded=true;b7tfondceubrbvku=new OptinMonsterApp();b7tfondceubrbvku.init({u:\"18402.328170\",staging:0,dev:0,beta:0});o.onload=o.onreadystatechange=null;}catch(t){}}}};(document.getElementsByTagName(\"head\")[0]||document.documentElement).appendChild(o)}(document,\"script\",\"omapi-script\");\/\/ ]]><\/script><!-- \/ OptinMonster --><\/p>\n<h6><span style=\"color: #003366;\"><b>#2: Improper specification of the title attribute for links<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">The primary function of the title attribute is to provide extra information to customers about the web page that\u2019s being linked to. If used properly, the title attribute can promote usability of the website, its accessibility and the many SEO attributes. \u00a0This is because it can determine whether the link is bad or good. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you want to improve the SEO capabilities, adhere to the following with regard to title attributes for links:<\/span><\/p>\n<p>* Use the correct keywords that are related to the web page which you\u2019re linking to.<\/p>\n<p>* Always add the title which should link to the keywords that are related to the web page.<\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s an example of using the title attribute incorrectly: <\/span><\/p>\n<pre><span style=\"font-weight: 400;\">To learn more about our products, click &lt;a href= \u201chttp:\/\/www.capitalnumbers.com\/products\u201d&gt;here&lt;\/a&gt;.<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Here\u2019s the better way:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Visit<\/span><\/p>\n<pre>&lt;a href= \u201chttp:\/\/www.capitalnumbers.com\u201d title= \u201cThe Premier Web Development Company\u201d&gt;Capital Numbers&lt;\/a&gt;<\/pre>\n<p>to learn more about our products.<\/p>\n<h6><span style=\"color: #003366;\"><b>#3: Leaving out the image alt attribute<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">The Alt attribute provides an alternative information to users who have disabled the images in their browsers. It\u2019s also relevant for user agents that can\u2019t view images on their browsers. Forgetting to associate each image with the alt attribute results in decreased accessibility for such a website. If you use the alt attribute correctly with your images, you not only make the images easier to read and interpret, but also search engine optimization for such a website. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s an example of a wrongly specified alt attribute:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;img src= \u201chttp:\/\/www.capitalnumbers.com\/images\/ourlogo.jpeg\u201d alt= \u201cOur Logo\u201d\/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">In the above example, the alt attribute doesn\u2019t provide explanations what the image is about. The image description should include a tooltip or any short information that\u2019s displayed in the browser. Here\u2019s an example:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;img src= \u201chttp:\/\/www.capitalnumbers.com\/images\/ourlogo.jpeg\u201d alt= \u201cOur Logo\u201d title= \u201cThe Ultimate Web Developer\u201d\/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Hovering the mouse over the image when you use the above code displays the title attribute of the image in your browser. <\/span><\/p>\n<h6><span style=\"color: #003366;\"><b>#4: Forgetting to close HTML tags that requires closing in HTML5<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">While you can easily get away with &lt;br&gt; instead of the &lt;br\/&gt;, it is not advisable to leave the tags open in HTML5. For instance, if you leave the &lt;head&gt; tag open to the &lt;body&gt; tag, the code in &lt;body&gt; section will be rendered useless since the browser will assume that the entire HTML code melds together. Therefore, always ensure that you\u2019ve closed the tag appropriately. <\/span><\/p>\n<h6><span style=\"color: #003366;\"><b>#5: Using the Inline CSS or including JavaScript file in the HTML code<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">Using the inline CSS or including JavaScript file in your HTML5 code will create a code that\u2019s not only difficult to debug\u2014in case there are problems with it\u2014or make it very difficult to scale up the website. Thus, the best practice is to always import the CSS and JavaScript files through the link tags in the &lt;head&gt; element. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is two years since HTML5 was officialized by W3C as the next generation language for development of websites. It is a fact that this language was developed to solve problems that web developers were having with the initial versions of HTML such as XHTML and HTML4. Truth be told\u2014HTML5 has solved many of the &#8230;<\/p>\n","protected":false},"author":12,"featured_media":1535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[723,743],"tags":[1054],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1534"}],"collection":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/comments?post=1534"}],"version-history":[{"count":4,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1534\/revisions"}],"predecessor-version":[{"id":16310,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1534\/revisions\/16310"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media\/1535"}],"wp:attachment":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media?parent=1534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/categories?post=1534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/tags?post=1534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}