{"id":1595,"date":"2016-06-29T03:28:00","date_gmt":"2016-06-29T03:28:00","guid":{"rendered":"http:\/\/www.capitalnumbers.com\/blog\/?p=1595"},"modified":"2025-08-11T11:26:24","modified_gmt":"2025-08-11T11:26:24","slug":"a-beginners-guide-to-html5-elements","status":"publish","type":"post","link":"https:\/\/www.capitalnumbers.com\/blog\/a-beginners-guide-to-html5-elements\/","title":{"rendered":"A Beginner\u2019s Guide to HTML5 Elements"},"content":{"rendered":"<p><!--<img class=\"aligncenter size-full wp-image-1596\" src=\"http:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/CN_Blog_HTML5_29-06-16.jpg\" alt=\"CN_Blog_HTML5_29-06-16\" width=\"1000\" height=\"600\" srcset=\"https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/CN_Blog_HTML5_29-06-16.jpg 1000w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/CN_Blog_HTML5_29-06-16-300x180.jpg 300w, https:\/\/www.capitalnumbers.com\/blog\/wp-content\/uploads\/2016\/06\/CN_Blog_HTML5_29-06-16-768x461.jpg 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/>--><\/p>\n<p><span style=\"font-weight: 400;\">The ultimate dream of every web developer is to develop compelling, responsive and beautiful websites. Historically, web developers have been using HTML, CSS, and JavaScript as the front end technologies to control the aesthetic features of a website. However, in recent years, HTML has undergone a transformational change to keep abreast with demands of modern websites. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML5 presents the next generation tools that any aspiring or veteran web developer should know to come up with modern, responsive and beautiful websites. You may be using CMS tools such as WordPress, Joomla or even Drupal to fast-track the development of your website. Even though you\u2019re using these tools, it is paramount that you learn what HTML5 has to offer. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Besides promoting a cross-platform and cross-browser web development, HTML5 also helps to develop websites that are mobile-ready and have better SEO features. That\u2019s why it is essential for you to learn HTML5. Now that you know why HTML5 is important, let\u2019s jump in to explore what\u2019s new in HTML5.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But first, let\u2019s explore the structure of all HTML documents.<\/span><\/p>\n<h6><b>Structure of HTML contents<\/b><\/h6>\n<p><span style=\"font-weight: 400;\">The basic structure of any HTML content is as follows\u2026<\/span><\/p>\n<pre style=\"margin-bottom: 30px;\"><span style=\"font-weight: 400;\">&lt;! DOCTYPE HTML&gt; \u00a0\u00a0\u00a0\u00a0<\/span>\n\n<span style=\"font-weight: 400;\">&lt;HTML&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;HEAD&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;TITLE&gt; Welcome to Capital Numbers&lt;\/TITLE&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/HEAD&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;BODY&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;H1&gt; this is a tag for Heading 1&lt;\/H1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/BODY&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/HTML&gt;<\/span>\n<\/pre>\n<p><span style=\"font-weight: 400;\">Now, if you save you save the above file with the \u201c.html\u201d extension and open it in your favorite web browser, you\u2019ll see a web page with the words: \u00a0\u201cThis is a tag for Heading 1.\u201d Alright? This is familiar to you!\u2014and is what informs HTML4 and previous versions. <\/span><\/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<p><span style=\"font-weight: 400;\">The HTML5 structure is almost similar to the structure of HTML4 and previous version of HTML. However, all HTML5 documents should include the following information:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The DOCTYPE declaration. It specifies the type of document the web browser will be opening. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The character encoding or the charset declaration. It defines the character encoding scheme that should be used by the browser. The default scheme is UTF-8. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">With that in mind, here is the basic structure of HTML5 content:<\/span><\/p>\n<pre style=\"margin-bottom: 30px;\"><span style=\"font-weight: 400;\">&lt;! DOCTYPE HTML&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;HTML&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;HEAD&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;META charset= \u201cUTF-32\u201d&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;TITLE&gt; Welcome to Capital Numbers&lt;\/TITLE&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/HEAD&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;BODY&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;H1&gt; this is a tag for Heading 1&lt;\/H1&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/BODY&gt;<\/span>\n\n<span style=\"font-weight: 400;\">&lt;\/HTML&gt;<\/span>\n<\/pre>\n<h6><b style=\"margin-bottom: 20px; display: block;\">What are the new elements in HTML5?<\/b><\/h6>\n<p><span style=\"font-weight: 400;\">Well, here are the interesting features that have been introduced in HTML5:<\/span><\/p>\n<h6 style=\"margin: 0 0 20px;\"><span style=\"color: #003366;\"><b>#1: Semantic elements <\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">HTML5 has introduced new elements. Some of these elements are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;mark&gt;. It defines the highlighted text in HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;menuitem&gt;. It defines the menu item that user can invoke from the pop-up menu.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;meter&gt;. It specifies the scalar measurement which is contained in known range values. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;nav&gt;. It specifies navigation links on a web page. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;progress&gt;. It specifies the progress for a given task.<\/span><\/li>\n<\/ul>\n<h6><span style=\"color: #003366; margin-bottom: 20px; display: block;\"><b> #2: Form Control attributes<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">If you\u2019re creating an HTML form to capture customer data, then new control attributes have been added to make the development of your web form interactive and enticing to the user. Here are some of the attributes that have been added:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Number. It defines a numeric input type. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Time. It defines the time when used on a form. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Date. It specifies the date. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Calendar. It displays the calendar. <\/span><\/li>\n<\/ul>\n<h6><span style=\"color: #003366; margin-bottom: 20px; display: block;\"><b>#3: New Graphical HTML elements <\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">If you like using graphs on your website, then HTML5 has the following elements to help you manipulate your graphics better:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;canvas&gt;. It is used to draw graphics.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;svg&gt;. It is an XML-based vector that\u2019s used to format two-dimensional graphics to promote animation. <\/span><\/li>\n<\/ul>\n<h6><span style=\"color: #003366; margin-bottom: 20px; display: block;\"><b>#4: Multimedia elements <\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">HTML5 has introduced two built-in media support elements. These are:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;audio&gt;. It is used to play audio files on web browsers. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">&lt;video&gt;. It is used to play video files on web browsers.<\/span><\/li>\n<\/ul>\n<h6><span style=\"color: #003366; margin-bottom: 20px; display: block;\"><b>#5: New API features<\/b><\/span><\/h6>\n<p><span style=\"font-weight: 400;\">New API features have been introduced. Some of the API\u2019s include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">HTML Geolocation. It displays the coordinates a web user. <\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">HTML Drag and Drop. It is used for dragging and dropping off items on a web page.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">HTML Local Storage. It allows web applications to store data locally on the user&#8217;s browser.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">HTML Application Cache. It caches the web application so that the website can be accessed while offline. <\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The ultimate dream of every web developer is to develop compelling, responsive and beautiful websites. Historically, web developers have been using HTML, CSS, and JavaScript as the front end technologies to control the aesthetic features of a website. However, in recent years, HTML has undergone a transformational change to keep abreast with demands of modern &#8230;<\/p>\n","protected":false},"author":12,"featured_media":1596,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false},"categories":[723,743],"tags":[1054,1057],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1595"}],"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=1595"}],"version-history":[{"count":14,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1595\/revisions"}],"predecessor-version":[{"id":16301,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/posts\/1595\/revisions\/16301"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media\/1596"}],"wp:attachment":[{"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/media?parent=1595"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/categories?post=1595"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.capitalnumbers.com\/blog\/wp-json\/wp\/v2\/tags?post=1595"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}