{"id":1400,"date":"2016-05-20T11:55:03","date_gmt":"2016-05-20T11:55:03","guid":{"rendered":"http:\/\/www.capitalnumbers.com\/blog\/?p=1400"},"modified":"2025-08-11T11:45:35","modified_gmt":"2025-08-11T11:45:35","slug":"the-ultimate-cheat-sheet-on-html5","status":"publish","type":"post","link":"https:\/\/www.capitalnumbers.com\/blog\/the-ultimate-cheat-sheet-on-html5\/","title":{"rendered":"The Ultimate Cheat Sheet on HTML5"},"content":{"rendered":"<p><!--<a href=\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/05\/HTML5-_The-Ultimate-Cheat-Sheet-on-HTML5.jpg\"><img class=\"aligncenter size-full wp-image-1409\" src=\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/05\/HTML5-_The-Ultimate-Cheat-Sheet-on-HTML5.jpg\" alt=\"HTML5 _The Ultimate Cheat Sheet on HTML5\" width=\"1000\" height=\"600\" srcset=\"https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/05\/HTML5-_The-Ultimate-Cheat-Sheet-on-HTML5.jpg 1000w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/05\/HTML5-_The-Ultimate-Cheat-Sheet-on-HTML5-300x180.jpg 300w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/05\/HTML5-_The-Ultimate-Cheat-Sheet-on-HTML5-768x461.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a>--><a href=\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/05\/CN_Blog.jpg\"><br \/>\n<\/a>Developing modern, usable and more responsive websites can quite a jungle because of numerous and confusing web development technologies. Of course the original HTML\u2014which was based on SGML\u2014has become obsolete. Therefore, you can\u2019t rely on it to develop a modern website.<\/p>\n<p>That HTML5 is the next generation language for web development is no longer in doubt. Besides eliminating the need for installation of several plug-in in most browsers, HTML5 has also helped to create an interactive platform that has allowed web developers to design and create responsive websites using minimal effort.<\/p>\n<p>However, there\u2019s a caveat whenever you\u2019re using HTML5: it\u2019s confusing to differentiate older versions of HTML and HTML5\u2014 it\u2019s not easy to learn a new programming language. That\u2019s why it\u2019s important to master new elements in HTML5 to be at the forefront when it comes to developing usable and responsive websites.<\/p>\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>So, what\u2019s new in HTML5?<\/h6>\n<p>Below is a list of all the tags that in HTML5:<\/p>\n<p>\u25cf &lt;article&gt;. Defines an article.<br \/>\n\u25cf &lt;aside&gt;. Defines content outside the main flow of the narrative.<br \/>\n\u25cf &lt;datagrid&gt;. References dynamic data in a tree or tabular data form.<br \/>\n\u25cf &lt;datalist&gt;. Defines a list of dropdown pre-defined options surrounding &lt;input&gt; tag.<br \/>\n\u25cf &lt;footer&gt;. Defines a footer section of web document.<br \/>\n\u25cf &lt;header&gt;. Defines a header for section or document.<br \/>\n\u25cf &lt;hgroup&gt;. Defines a group of headings tags (&lt;h1&gt; to &lt;h6&gt;).<br \/>\n\u25cf &lt;section&gt;. Defines a section in document.<br \/>\n\u25cf &lt;dialog&gt;. It is used to define a dialog box on a web page.<br \/>\n\u25cf &lt;figcaption&gt;. It is used to specify the caption for the figure element on a web page.<br \/>\n\u25cf &lt;main&gt;. It defines the main HTML content of.<br \/>\n\u25cf &lt;mark&gt;. It specifies marked or highlighted text on a web page.<br \/>\n\u25cf &lt;menuitem&gt;. It specifies a menu item that a web user can invoke from the pop-up menu on a web page.<br \/>\n\u25cf &lt;meter&gt;. It indicates a scalar measurement which is contained in a specific known range.<br \/>\n\u25cf &lt;nav&gt;. It specifies the navigation links on a web page.<br \/>\n\u25cf &lt;progress&gt;. It defines the progress of a given task on a web page.<br \/>\n\u25cf &lt;time&gt;. It defines the date and time on a web page.<br \/>\n\u25cf &lt;AUDIO&gt;. It defines the sound content on a web page.<br \/>\n\u25cf &lt;VIDEO&gt;. It defines the video content on a web page.<br \/>\n\u25cf &lt;BUTTON&gt;. It defines the button for autofocus, disabled and forms on a web page.<br \/>\n\u25cf &lt;CODE&gt;. It defines the computer code in a HTML document.<br \/>\n\u25cf &lt;IFRAME&gt;. It defines the height, the name and sandbox for HTML5 documents.<br \/>\n\u25cf &lt;INPUT&gt;. It\u2019s used to specify formnovalidate, formtarget, height, required, size, src and step attributes of HTML documents.<br \/>\n\u25cf &lt;OPTION&gt;. It defines an option group in a drop-down list.<br \/>\n\u25cf &lt;SOURCE&gt;. It defines media resources for content on a web page.<br \/>\n\u25cf &lt;SPAN&gt;. It defines a section of a document on a web page.<br \/>\n\u25cf &lt;MAP&gt;. It defines an image map on a web page.<\/p>\n<h6>What about existing tags?<\/h6>\n<p>The existing tags are those tags that are found in both HTML4 and HTML5. Here\u2019s a list of those tags:<\/p>\n<p>\u25cf &lt;DOCTYPE&gt;. It specifies the HTML5 document type.<br \/>\n\u25cf &lt;A&gt;. It species an anchor tag that can be used with href, hreflang and media attributes.<br \/>\n\u25cf &lt;ABBR&gt;. It defines an abbreviations used on a web page.<br \/>\n\u25cf &lt;ADDRESS&gt;. It defines an address.<br \/>\n\u25cf &lt;AREA&gt;. It defines the area that\u2019s inside the image map on a web page.<br \/>\n\u25cf &lt;article&gt;.It\u2019s used to describe an article<br \/>\n\u25cf &lt;bdo&gt; It\u2019s used to override text direction<br \/>\n\u25cf &lt;blockquote&gt; It\u2019s used to define a section that is quoted from other sources<br \/>\n\u25cf &lt;canvas&gt; It is used for drawing canvas<br \/>\n\u25cf &lt;cite&gt; It specifies the title of table or image.<br \/>\n\u25cf &lt;code&gt; It specifies a computer code<br \/>\n\u25cf &lt;div&gt; It\u2019s used to segment a given section in HTML document<br \/>\n\u25cf &lt;em&gt; It\u2019s used to emphasize the HTML text<br \/>\n\u25cf &lt;Embed&gt;. Describes the container for an external applications<br \/>\n\u25cf &lt;fieldset&gt;. It defines groups that occur for related HTML elements.<br \/>\n\u25cf &lt;form&gt; . It defines the HTML form<br \/>\n\u25cf &lt;hr&gt; It defines the horizontal rule<br \/>\n\u25cf &lt;iframe&gt;.It define an inline frame on a web page<br \/>\n\u25cf &lt;img&gt;. It adds images in web pages<br \/>\n\u25cf &lt;input&gt; It\u2019s used for adding an input control<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Developing modern, usable and more responsive websites can quite a jungle because of numerous and confusing web development technologies. Of course the original HTML\u2014which was based on SGML\u2014has become obsolete. Therefore, you can\u2019t rely on it to develop a modern website. That HTML5 is the next generation language for web development is no longer in &#8230;<\/p>\n","protected":false},"author":12,"featured_media":1409,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[723,743],"tags":[],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1400"}],"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=1400"}],"version-history":[{"count":5,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1400\/revisions"}],"predecessor-version":[{"id":16347,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1400\/revisions\/16347"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media\/1409"}],"wp:attachment":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media?parent=1400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/categories?post=1400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/tags?post=1400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}