{"id":180161,"date":"2024-06-05T23:32:54","date_gmt":"2024-06-05T22:32:54","guid":{"rendered":"https:\/\/liora.io\/en\/?p=180161"},"modified":"2026-02-06T07:58:50","modified_gmt":"2026-02-06T06:58:50","slug":"html5-what-is-it-complete-guide","status":"publish","type":"post","link":"https:\/\/liora.io\/en\/html5-what-is-it-complete-guide","title":{"rendered":"HTML5: What is it? Complete guide"},"content":{"rendered":"<style>\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><p><strong>Web development is constantly evolving. Because of this, HTML5 occupies a prominent place as a fundamental and unavoidable language. Since its official introduction on October 28, 2014, HTML5 has revolutionized the way websites are created and offers a host of advanced features that enhance the user experience.<\/strong><\/p>\t\t\n\t\t\t<h3>L\u2019\u00e9volution des balises de base dans HTML5<\/h3>\t\t\n\t\t<p>HTML5 has drastically evolved the basic tags of an HTML document. These semantic tags provide a clearer, more meaningful structure to the content of a web page, thereby improving accessibility, indexing by search engines and overall understanding of the document.<\/p>\t\t\n\t\t\t<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;}\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg .tg-ww7x{background-color:#c0c0c0;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;\n  text-align:left;vertical-align:top}\n.tg .tg-dxbu{font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;vertical-align:top}\n.tg .tg-m63y{background-color:#EFEFEF;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;\n  vertical-align:top}\n<\/style>\n<table style=\"undefined;table-layout: fixed; width: 800px\">\n<colgroup>\n<col style=\"width: 200px\">\n<col style=\"width: 600px\">\n<\/colgroup>\n<thead>\n  <tr>\n    <th><p><\/p>&lt;header&gt; :<p><\/p><p>header markup<\/p><\/th>\n    <th>This new tag defines the header of a document. It&#8217;s typically used to include the title, logo, main navigation, and other information. This tag helps search engines and browsers better understand the page structure and improves accessibility.<\/th>\n  <\/tr>\n<\/thead>\n<tbody>\n  <tr>\n    <td><p>&lt;nav&gt; :<\/p><p><\/p>navigation<p><\/p><\/td>\n    <td>This element is used to wrap the main navigation of a document, grouping menus, lists of links, or navigation bars. This makes it easier to distinguish navigation from other elements on the page.<\/td>\n  <\/tr>\n  <tr>\n    <td><p>&lt;section&gt; :<\/p><p>semantic division<\/p><\/td>\n    <td>It allows for dividing a web page into thematic sections or groups of content. This facilitates logical organization of content and makes the structure clearer for developers and readers using assistive technologies.<\/td>\n  <\/tr>\n  <tr>\n    <td><p>&lt;article&gt; :<\/p><p>independent content<\/p><\/td>\n    <td>It&#8217;s used to encapsulate independent and standalone content. This can include blog articles, news, comments, etc.<\/td>\n  <\/tr>\n  <tr>\n    <td><p>&lt;footer&gt; :<\/p><p>footer<\/p><\/td>\n    <td>This new element is used to define the footer of a document or section. It typically contains information such as contact details, copyright, credits, etc.<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\t\t\n\t\t\t<h3>What are the forms for?<\/h3>\t\t\n\t\t<p>They are an essential element of many websites. They allow <a href=\"https:\/\/liora.io\/en\/python-the-most-popular-language\">users to interact with many elements and submit information.<\/a><\/p>\t\t\n\t\t\t<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;}\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg .tg-b6bf{background-color:#D9D9D9;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;\n  text-align:left;vertical-align:top}\n.tg .tg-m63y{background-color:#EFEFEF;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;\n  vertical-align:top}\n<\/style>\n<table style=\"undefined;table-layout: fixed; width: 800px\">\n<colgroup>\n<col style=\"width: 200px\">\n<col style=\"width: 600px\">\n<\/colgroup>\n<thead>\n  <tr>\n    <th>Input Types<\/th>\n    <th>New input types have been implemented (&#8217;email&#8217;, &#8216;url&#8217;, &#8216;number&#8217;, etc) allowing browsers to automatically validate user-entered data and provide an appropriate message if the information is incorrect.<\/th>\n  <\/tr>\n<\/thead>\n<tbody>\n  <tr>\n    <td>Validation Attributes<\/td>\n    <td>HTML5 introduced new validation attributes to constrain user-entered data. For example, the &#8216;required&#8217; attribute indicates that the field is mandatory for form submission.<\/td>\n  <\/tr>\n  <tr>\n    <td>Client-Side Validation<\/td>\n    <td>Previously, validation often involved using JavaScript, but with HTML5, modern browsers can automatically validate forms.<\/td>\n  <\/tr>\n  <tr>\n    <td>Autocomplete<\/td>\n    <td>HTML5 can allow the user to fill out forms based on previously entered information.<\/td>\n  <\/tr>\n  <tr>\n    <td>Form Controls<\/td>\n    <td>Forms now enhance the user experience with new controls, like &#8216;datalist&#8217; which provides automatic suggestions while typing.<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\t\t\n\t\t\t\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex is-content-justification-center\"><div class=\"wp-block-button \"><a class=\"wp-block-button__link wp-element-button \" href=\"\/en\/courses\/data-ai\/\">Learn to use HTML5<\/a><\/div><\/div>\n\n\t\t\t<h3>HTML5 and the media<\/h3>\t\t\n\t\t<p>Significant advances have been made in the integration and manipulation of media on websites.<\/p>\t\t\n\t\t\t<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;}\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg .tg-b6bf{background-color:#D9D9D9;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;\n  text-align:left;vertical-align:top}\n.tg .tg-m63y{background-color:#EFEFEF;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;\n  vertical-align:top}\n<\/style>\n<table style=\"undefined;table-layout: fixed; width: 800px\">\n<colgroup>\n<col style=\"width: 200px\">\n<col style=\"width: 600px\">\n<\/colgroup>\n<thead>\n  <tr>\n    <th>Video Integration<\/th>\n    <th>HTML5 introduces the &lt;video&gt; element which allows embedding videos directly into web pages without the need for external plugins like Flash.<\/th>\n  <\/tr>\n<\/thead>\n<tbody>\n  <tr>\n    <td>Audio Integration<\/td>\n    <td>Similar to the previous element, &lt;audio&gt; allows direct embedding of audio tracks into web pages.<\/td>\n  <\/tr>\n  <tr>\n    <td>Chart Creation<\/td>\n    <td>The &lt;canvas&gt; element allows manipulation of charts, animations, and dynamic rendering using JavaScript.<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\n\t\t<p>Other features such as the <a href=\"https:\/\/liora.io\/en\/api-rest-what-is-it-whats-it-for\">Media API<\/a> and the &lt;track&gt; element also enable richer management of media integrated into websites.<\/p>\t\t\n\t\t\t<h3>Other advanced functions<\/h3>\t\t\n\t\t<p>In addition to the improvements we&#8217;ve just mentioned, HTML5 also offers some interesting features:<\/p>\t\t\n\t\t\t<style type=\"text\/css\">\n.tg  {border-collapse:collapse;border-spacing:0;}\n.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;\n  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}\n.tg .tg-b6bf{background-color:#D9D9D9;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;font-weight:bold;\n  text-align:left;vertical-align:top}\n.tg .tg-m63y{background-color:#EFEFEF;font-family:\"Trebuchet MS\", Helvetica, sans-serif !important;font-size:16px;text-align:left;\n  vertical-align:top}\n<\/style>\n<table style=\"undefined;table-layout: fixed; width: 800px\">\n<colgroup>\n<col style=\"width: 200px\">\n<col style=\"width: 600px\">\n<\/colgroup>\n<thead>\n  <tr>\n    <th>Local Storage<\/th>\n    <th>HTML5 introduces local storage APIs that allow websites to store data locally on the user&#8217;s browser. This provides an alternative to cookies for persistent data storage.<\/th>\n  <\/tr>\n<\/thead>\n<tbody>\n  <tr>\n    <td>Connectivity<\/td>\n    <td>The WebSocket API is a feature that enables bidirectional real-time communication between the client and the server. Unlike traditional HTTP calls, this opens the door to real-time web applications such as chat rooms, dashboards, multiplayer games, etc.<\/td>\n  <\/tr>\n  <tr>\n    <td>Geolocation<\/td>\n    <td>The Geolocation API allows websites to access the user&#8217;s geographical position via the browser.<\/td>\n  <\/tr>\n<\/tbody>\n<\/table>\t\t\n\t\t\t<h3>Conclusion<\/h3>\t\t\n\t\t<p><strong>HTML5<\/strong> has revolutionized the way websites are designed today. Modern websites are now much more dynamic and aesthetically pleasing, which was previously impossible with older versions of HTML.<\/p>\t\t\n\t\t\t\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex is-content-justification-center\"><div class=\"wp-block-button \"><a class=\"wp-block-button__link wp-element-button \" href=\"\/en\/courses\/data-ai\/\">Start your HTML5 training<\/a><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Web development is constantly evolving. Because of this, HTML5 occupies a prominent place as a fundamental and unavoidable language. Since its official introduction on October 28, 2014, HTML5 has revolutionized the way websites are created and offers a host of advanced features that enhance the user experience. L\u2019\u00e9volution des balises de base dans HTML5 HTML5 [&hellip;]<\/p>\n","protected":false},"author":76,"featured_media":180163,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"_acf_changed":false,"editor_notices":[],"footnotes":""},"categories":[2434],"class_list":["post-180161","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cloud-dev"],"acf":[],"_links":{"self":[{"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/posts\/180161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/users\/76"}],"replies":[{"embeddable":true,"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/comments?post=180161"}],"version-history":[{"count":1,"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/posts\/180161\/revisions"}],"predecessor-version":[{"id":205704,"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/posts\/180161\/revisions\/205704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/media\/180163"}],"wp:attachment":[{"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/media?parent=180161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/liora.io\/en\/wp-json\/wp\/v2\/categories?post=180161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}