{"id":532,"date":"2025-05-19T11:07:25","date_gmt":"2025-05-19T11:07:25","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=532"},"modified":"2026-06-06T12:14:17","modified_gmt":"2026-06-06T12:14:17","slug":"html5-features","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/html\/html5-features\/","title":{"rendered":"HTML5 Features"},"content":{"rendered":"<h2><strong>New input types (date, range, color, etc.)<\/strong><\/h2>\n<p>HTML5 introduced several new input types that enhance user experience, improve form validation, and reduce the need for custom JavaScript. Modern browsers (as of 2024) broadly support these input types, with ongoing accessibility improvements. These input types allow users to interact with forms more intuitively using browser-native controls.<\/p>\n<p>For practical guidance on building robust HTML forms and user input handling, see <a href=\"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/\">Forms and User Input<\/a>.<\/p>\n<h3>&lt;input type=&#8221;date&#8221;&gt; \u2013 Date Picker<\/h3>\n<p><strong>Description:<\/strong><\/p>\n<p>Provides a calendar-based date selector.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;label for=&#8221;dob&#8221;&gt;Date of Birth:&lt;\/label&gt;<\/em><br \/>\n<em>&lt;input type=&#8221;date&#8221; id=&#8221;dob&#8221; name=&#8221;dob&#8221;&gt;<\/em><\/p>\n<p><strong>Browser Behavior:<\/strong><\/p>\n<ul>\n<li>Users can pick a date from a popup calendar.<\/li>\n<li>Input is automatically validated as a date.<\/li>\n<\/ul>\n<p>For client-side interactivity and handling date inputs in real-time, see <a href=\"https:\/\/buhave.com\/courses\/java-script\/dom-manipulation\/\">DOM Manipulation<\/a>.<\/p>\n<h3>&lt;input type=&#8221;range&#8221;&gt; \u2013 Slider<\/h3>\n<p><strong>Description:<\/strong><\/p>\n<p>Displays a slider control for selecting a numeric value within a range.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;label for=&#8221;volume&#8221;&gt;Volume:&lt;\/label&gt;<\/em><br \/>\n<em>&lt;input type=&#8221;range&#8221; id=&#8221;volume&#8221; name=&#8221;volume&#8221; min=&#8221;0&#8243; max=&#8221;100&#8243; step=&#8221;10&#8243;&gt;<\/em><\/p>\n<p><strong>Features:<\/strong><\/p>\n<ul>\n<li>Customizable min, max, and step attributes.<\/li>\n<li>Great for volume, brightness, or preference settings.<\/li>\n<\/ul>\n<p>Real-world usage patterns include volume or brightness controls, explored in <a href=\"https:\/\/buhave.com\/courses\/java-script\/real-world-applications\/\">Real-World Applications<\/a>.<\/p>\n<h3>&lt;input type=&#8221;color&#8221;&gt; \u2013 Color Picker<\/h3>\n<p><strong>Description:<\/strong><\/p>\n<p>Opens a color picker UI so users can choose a color.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;label for=&#8221;favcolor&#8221;&gt;Favorite Color:&lt;\/label&gt;<\/em><br \/>\n<em>&lt;input type=&#8221;color&#8221; id=&#8221;favcolor&#8221; name=&#8221;favcolor&#8221; value=&#8221;#ff0000&#8243;&gt;<\/em><\/p>\n<p>For practical guidance on color handling in UI components, see <a href=\"https:\/\/buhave.com\/courses\/html\/working-with-images-and-media\/\">Working with Images and Media<\/a>.<\/p>\n<h3>&lt;input type=&#8221;time&#8221;&gt; \u2013 Time Input<\/h3>\n<p><strong>Description:<\/strong><\/p>\n<p>Lets users enter or select a time using a dropdown or spinner.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;label for=&#8221;appt&#8221;&gt;Select Time:&lt;\/label&gt;<\/em><br \/>\n<em>&lt;input type=&#8221;time&#8221; id=&#8221;appt&#8221; name=&#8221;appt&#8221;&gt;<\/em><\/p>\n<p>Enhancing time inputs with client-side behavior is explored in <a href=\"https:\/\/buhave.com\/courses\/java-script\/introduction-to-javascript\/\">Introduction to JavaScript<\/a>.<\/p>\n<h3>&lt;input type=&#8221;datetime-local&#8221;&gt; \u2013 Date &amp; Time (Local)<\/h3>\n<p><strong>Description:<\/strong><\/p>\n<p>Combines date and time input (without timezone).<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;label for=&#8221;meeting&#8221;&gt;Meeting Date &amp; Time:&lt;\/label&gt;<\/em><br \/>\n<em>&lt;input type=&#8221;datetime-local&#8221; id=&#8221;meeting&#8221; name=&#8221;meeting&#8221;&gt;<\/em><\/p>\n<p><strong>Summary Table:<\/strong><\/p>\n<table border=\"1\">\n<thead>\n<tr>\n<th>Input Type<\/th>\n<th>Purpose<\/th>\n<th>UI Element Provided<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>&lt;input type=\"date\"&gt;<\/code><\/td>\n<td>Select a date<\/td>\n<td>Calendar picker<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;input type=\"range\"&gt;<\/code><\/td>\n<td>Choose a number range<\/td>\n<td>Slider<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;input type=\"color\"&gt;<\/code><\/td>\n<td>Select a color<\/td>\n<td>Color picker<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;input type=\"time\"&gt;<\/code><\/td>\n<td>Select a time<\/td>\n<td>Time dropdown\/spinner<\/td>\n<\/tr>\n<tr>\n<td><code>&lt;input type=\"datetime-local\"&gt;<\/code><\/td>\n<td>Select date &amp; time<\/td>\n<td>Combined date\/time UI<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>&lt;canvas&gt; and &lt;svg&gt; basics<\/h2>\n<p>HTML5 introduced &lt;canvas&gt; and enhanced support for &lt;svg&gt; as two powerful methods for rendering graphics, animations, and dynamic visuals in the browser.<\/p>\n<h3>&lt;canvas&gt; Element \u2013 Pixel-Based Drawing<\/h3>\n<p><strong>What It Is:<\/strong><\/p>\n<p>The &lt;canvas&gt; element provides a drawable region in the browser that you can control using JavaScript.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;canvas id=&#8221;myCanvas&#8221; width=&#8221;300&#8243; height=&#8221;150&#8243; style=&#8221;border:1px solid #000;&#8221;&gt;&lt;\/canvas&gt;<\/em><\/p>\n<p style=\"text-align: center\"><em>&lt;script&gt;<\/em><br \/>\n<em>const canvas = document.getElementById(&#8220;myCanvas&#8221;);<\/em><br \/>\n<em>const ctx = canvas.getContext(&#8220;2d&#8221;);<\/em><br \/>\n<em>ctx.fillStyle = &#8220;blue&#8221;;<\/em><br \/>\n<em>ctx.fillRect(50, 30, 200, 100); \/\/ Draws a blue rectangle<\/em><br \/>\n<em>&lt;\/script&gt;<\/em><\/p>\n<p><strong>Key Features:<\/strong><\/p>\n<ul>\n<li>Low-level API<\/li>\n<li>Great for games, graphs, image manipulation, and dynamic rendering<\/li>\n<li>Fully controlled via JavaScript<\/li>\n<\/ul>\n<p><strong>Limitation:<\/strong><\/p>\n<ul>\n<li>No built-in accessibility or DOM structure<\/li>\n<li>Everything is drawn in pixels (not scalable by default)<\/li>\n<\/ul>\n<h3>&lt;svg&gt; Element \u2013 Scalable Vector Graphics<\/h3>\n<p><strong>What It Is:<\/strong><\/p>\n<p>&lt;svg&gt; stands for Scalable Vector Graphics \u2013 an XML-based markup for describing 2D graphics.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;svg width=&#8221;200&#8243; height=&#8221;100&#8243;&gt;<\/em><br \/>\n<em>&lt;rect width=&#8221;200&#8243; height=&#8221;100&#8243; fill=&#8221;orange&#8221; \/&gt;<\/em><br \/>\n<em>&lt;text x=&#8221;50&#8243; y=&#8221;55&#8243; fill=&#8221;white&#8221; font-size=&#8221;20&#8243;&gt;SVG Box&lt;\/text&gt;<\/em><br \/>\n<em>&lt;\/svg&gt;<\/em><\/p>\n<p><strong>Key Features:<\/strong><\/p>\n<ul>\n<li>Shape-based (vector) graphics like &lt;rect&gt;, &lt;circle&gt;, &lt;path&gt;, &lt;text&gt;<\/li>\n<li>Fully scalable without losing quality<\/li>\n<li>Supports CSS styling and JavaScript interactivity<\/li>\n<li>Easily accessible and indexable by search engines<\/li>\n<\/ul>\n<p><strong>Advantages:<\/strong><\/p>\n<ul>\n<li>Great for charts, icons, logos, and static or interactive visualizations<\/li>\n<li>Objects remain in the DOM (like HTML elements)<\/li>\n<\/ul>\n<p><strong>Key Differences:<\/strong><\/p>\n<table border=\"1\">\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>&lt;canvas&gt;<\/th>\n<th>&lt;svg&gt;<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Type<\/td>\n<td>Raster-based (pixel)<\/td>\n<td>Vector-based (shape)<\/td>\n<\/tr>\n<tr>\n<td>Control<\/td>\n<td>JavaScript required<\/td>\n<td>HTML + CSS + JS optional<\/td>\n<\/tr>\n<tr>\n<td>Scalability<\/td>\n<td>Not resolution independent<\/td>\n<td>Fully scalable without quality loss<\/td>\n<\/tr>\n<tr>\n<td>Accessibility<\/td>\n<td>No built-in accessibility<\/td>\n<td>DOM-based, accessible<\/td>\n<\/tr>\n<tr>\n<td>Use Cases<\/td>\n<td>Games, animations, dynamic charts<\/td>\n<td>Diagrams, static charts, icons<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Summary:<\/strong><\/p>\n<ul>\n<li>Use &lt;canvas&gt; for game engines, pixel-based animations, or real-time graphics.<\/li>\n<li>Use &lt;svg&gt; for resolution-independent icons, diagrams, or charts that need to be accessible and scalable.<\/li>\n<\/ul>\n<p>For hands-on form building techniques, see <a href=\"https:\/\/buhave.com\/courses\/html\/forms-and-user-input\/\">Forms and User Input<\/a>.<\/p>\n<h2>&lt;details&gt; and &lt;summary&gt;<\/h2>\n<p>The &lt;details&gt; and &lt;summary&gt; HTML elements are part of HTML5 and are used to create expandable\/collapsible content sections \u2014 perfect for FAQs, toggles, or hiding long content by default.<\/p>\n<h3>&lt;details&gt; Element<\/h3>\n<p>The &lt;details&gt; element is a container that can be toggled open or closed by the user to show or hide its content.<\/p>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;details&gt;<\/em><br \/>\n<em>&lt;summary&gt;What is HTML?&lt;\/summary&gt;<\/em><br \/>\n<em>&lt;p&gt;HTML stands for HyperText Markup Language and is used to create the structure of web pages.&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/details&gt;<\/em><\/p>\n<p><strong>Behavior:<\/strong><\/p>\n<ul>\n<li>By default, it&#8217;s collapsed.<\/li>\n<li>Clicking the summary expands the hidden content.<\/li>\n<li>Can be styled with CSS and controlled with JavaScript.<\/li>\n<\/ul>\n<h3>&lt;summary&gt; Element<\/h3>\n<p>The &lt;summary&gt; element provides a visible label or heading for the collapsible content inside &lt;details&gt;.<\/p>\n<ul>\n<li>It must be the first child of the &lt;details&gt; element.<\/li>\n<li>It acts as a toggle button.<\/li>\n<\/ul>\n<p><strong>Features and Benefits<\/strong><\/p>\n<table border=\"1\">\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>Description<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Built-in Toggle<\/td>\n<td>No JavaScript needed for basic open\/close behavior<\/td>\n<\/tr>\n<tr>\n<td>Accessible<\/td>\n<td>Keyboard- and screen reader-friendly<\/td>\n<\/tr>\n<tr>\n<td>Semantic<\/td>\n<td>Clear intent and structure for collapsible content<\/td>\n<\/tr>\n<tr>\n<td>Customizable<\/td>\n<td>Fully styleable with CSS<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Advanced Usage<\/strong><\/p>\n<p><strong>You can nest other elements inside &lt;details&gt;:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;details open&gt;<\/em><br \/>\n<em>&lt;summary&gt;More Info&lt;\/summary&gt;<\/em><br \/>\n<em>&lt;ul&gt;<\/em><br \/>\n<em>&lt;li&gt;Point one&lt;\/li&gt;<\/em><br \/>\n<em>&lt;li&gt;Point two&lt;\/li&gt;<\/em><br \/>\n<em>&lt;\/ul&gt;<\/em><br \/>\n<em>&lt;\/details&gt;<\/em><\/p>\n<ul>\n<li>Use the open attribute to have the details expanded by default.<\/li>\n<\/ul>\n<p><strong>Use Cases:<\/strong><\/p>\n<ul>\n<li>FAQs<\/li>\n<li>Hidden instructions<\/li>\n<li>Privacy policies<\/li>\n<li>Progressive disclosure of content<\/li>\n<\/ul>\n<h2>Accessibility features (ARIA roles, landmarks)<\/h2>\n<p>Ensuring your HTML is accessible means making it usable for everyone, including people using screen readers, keyboard navigation, and assistive technology. Two essential tools for this are ARIA (Accessible Rich Internet Applications) roles and HTML5 landmarks.<\/p>\n<h3>ARIA Roles \u2013 What Are They?<\/h3>\n<p>ARIA roles provide extra semantic meaning to elements, especially when default HTML doesn&#8217;t convey enough context to assistive technologies.<\/p>\n<p><strong>Common ARIA Roles:<\/strong><\/p>\n<table style=\"width: 100%;border-collapse: collapse\" border=\"1\" cellspacing=\"0\" cellpadding=\"8\">\n<thead style=\"background-color: #f2f2f2\">\n<tr>\n<th style=\"text-align: left;padding: 12px;border-bottom: 2px solid #ddd\">Role<\/th>\n<th style=\"text-align: left;padding: 12px;border-bottom: 2px solid #ddd\">Purpose<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"button\"<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">Marks an element as a clickable button (use when not using <code>&lt;button&gt;<\/code> element)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"navigation\"<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">Identifies navigation menus or bars (equivalent to <code>&lt;nav&gt;<\/code> element)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"main\"<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">Marks the primary content area of the page (equivalent to <code>&lt;main&gt;<\/code> element)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"alert\"<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">For important, time-sensitive messages that should interrupt screen reader users<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px\"><code>role=\"dialog\"<\/code><\/td>\n<td style=\"padding: 12px\">Identifies a popup dialog\/modal box that should trap focus (requires additional ARIA attributes)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;div role=&#8221;button&#8221; tabindex=&#8221;0&#8243; onclick=&#8221;alert(&#8216;Clicked!&#8217;)&#8221;&gt;Click me&lt;\/div&gt;<\/em><\/p>\n<p>Learn more about ARIA roles and accessible patterns in DOM Manipulation.<\/p>\n<h3>HTML5 Landmarks \u2013 Semantic Navigation<\/h3>\n<p>Landmarks are HTML elements that divide your page into meaningful regions, helping screen readers skip to key areas quickly.<\/p>\n<p><strong>Key Landmarks:<\/strong><\/p>\n<table style=\"width: 100%;border-collapse: collapse;font-family: Arial,sans-serif\" border=\"1\" cellspacing=\"0\" cellpadding=\"8\">\n<thead style=\"background-color: #f5f5f5\">\n<tr>\n<th style=\"text-align: left;padding: 12px;border-bottom: 2px solid #ddd\">Landmark Element<\/th>\n<th style=\"text-align: left;padding: 12px;border-bottom: 2px solid #ddd\">Use<\/th>\n<th style=\"text-align: left;padding: 12px;border-bottom: 2px solid #ddd\">Accessibility Role<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>&lt;header&gt;<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">Site or section heading\/intro content<\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"banner\"<\/code> (when top-level)<\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>&lt;nav&gt;<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">Primary navigation menu<\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"navigation\"<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>&lt;main&gt;<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">Primary content (one per page)<\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"main\"<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>&lt;aside&gt;<\/code><\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\">Supplementary content (sidebars, pull quotes)<\/td>\n<td style=\"padding: 12px;border-bottom: 1px solid #ddd\"><code>role=\"complementary\"<\/code><\/td>\n<\/tr>\n<tr>\n<td style=\"padding: 12px\"><code>&lt;footer&gt;<\/code><\/td>\n<td style=\"padding: 12px\">Page or section footer (copyright, contact info)<\/td>\n<td style=\"padding: 12px\"><code>role=\"contentinfo\"<\/code> (when top-level)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><strong>Example:<\/strong><\/p>\n<p style=\"text-align: center\"><em>&lt;main&gt;<\/em><br \/>\n<em>&lt;h1&gt;Article Title&lt;\/h1&gt;<\/em><br \/>\n<em>&lt;p&gt;This is the main article content&#8230;&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/main&gt;<\/em><\/p>\n<p><strong>Best Practices:<\/strong><\/p>\n<ul>\n<li>Use native HTML elements first to improve accessibility and performance.<\/li>\n<\/ul>\n<p>For more about semantic structures and accessible markup, see Forms and User Input or Real-World Applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>New input types (date, range, color, etc.) HTML5 introduced several new input types that enhance user experience, improve form validation, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":534,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[11],"tags":[],"class_list":["post-532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>HTML5 Features - HTML Course<\/title>\n<meta name=\"description\" content=\"HTML5 brings semantic structure, multimedia elements, and API support for building interactive, modern websites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/buhave.com\/courses\/html\/html5-features\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Features - HTML Course\" \/>\n<meta property=\"og:description\" content=\"HTML5 brings semantic structure, multimedia elements, and API support for building interactive, modern websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/buhave.com\/courses\/html\/html5-features\/\" \/>\n<meta property=\"og:site_name\" content=\"BUHAVE\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/BeYouHave\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/naveedsafdarawan\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-19T11:07:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-06T12:14:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/HTML5-Features.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Naveed Safdar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Naveed Safdar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/\"},\"author\":{\"name\":\"Naveed Safdar\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\"},\"headline\":\"HTML5 Features\",\"datePublished\":\"2025-05-19T11:07:25+00:00\",\"dateModified\":\"2026-06-06T12:14:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/\"},\"wordCount\":1256,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/HTML5-Features.webp\",\"articleSection\":[\"HTML Course\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/\",\"name\":\"HTML5 Features - HTML Course\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/HTML5-Features.webp\",\"datePublished\":\"2025-05-19T11:07:25+00:00\",\"dateModified\":\"2026-06-06T12:14:17+00:00\",\"description\":\"HTML5 brings semantic structure, multimedia elements, and API support for building interactive, modern websites.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#primaryimage\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/HTML5-Features.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/04\\\/HTML5-Features.webp\",\"width\":1200,\"height\":628,\"caption\":\"HTML5 Features\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/html\\\/html5-features\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Courses\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Course\",\"item\":\"https:\\\/\\\/buhave.com\\\/courses\\\/learn\\\/html\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Features\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#website\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"name\":\"BUHAVE\",\"description\":\"Courses - Learn Online for Free\",\"publisher\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/buhave.com\\\/courses\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#organization\",\"name\":\"BUHAVE\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"contentUrl\":\"https:\\\/\\\/buhave.com\\\/courses\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/buhave-course.webp\",\"width\":375,\"height\":75,\"caption\":\"BUHAVE\"},\"image\":{\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/BeYouHave\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/buhave\",\"https:\\\/\\\/www.youtube.com\\\/@buhave\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/buhave.com\\\/courses\\\/#\\\/schema\\\/person\\\/04fe0254e118521c9fbb3da39de5acca\",\"name\":\"Naveed Safdar\",\"description\":\"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/naveedsafdar\\\/\",\"https:\\\/\\\/www.facebook.com\\\/naveedsafdarawan\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@naveedsafdar\"],\"url\":\"https:\\\/\\\/buhave.com\\\/courses\\\/author\\\/naveed-safdar\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Features - HTML Course","description":"HTML5 brings semantic structure, multimedia elements, and API support for building interactive, modern websites.","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:\/\/buhave.com\/courses\/html\/html5-features\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Features - HTML Course","og_description":"HTML5 brings semantic structure, multimedia elements, and API support for building interactive, modern websites.","og_url":"https:\/\/buhave.com\/courses\/html\/html5-features\/","og_site_name":"BUHAVE","article_publisher":"https:\/\/www.facebook.com\/BeYouHave\/","article_author":"https:\/\/www.facebook.com\/naveedsafdarawan\/","article_published_time":"2025-05-19T11:07:25+00:00","article_modified_time":"2026-06-06T12:14:17+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/HTML5-Features.webp","type":"image\/webp"}],"author":"Naveed Safdar","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Naveed Safdar","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/#article","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/"},"author":{"name":"Naveed Safdar","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca"},"headline":"HTML5 Features","datePublished":"2025-05-19T11:07:25+00:00","dateModified":"2026-06-06T12:14:17+00:00","mainEntityOfPage":{"@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/"},"wordCount":1256,"commentCount":0,"publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"image":{"@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/HTML5-Features.webp","articleSection":["HTML Course"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/buhave.com\/courses\/html\/html5-features\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/","url":"https:\/\/buhave.com\/courses\/html\/html5-features\/","name":"HTML5 Features - HTML Course","isPartOf":{"@id":"https:\/\/buhave.com\/courses\/#website"},"primaryImageOfPage":{"@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/#primaryimage"},"image":{"@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/#primaryimage"},"thumbnailUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/HTML5-Features.webp","datePublished":"2025-05-19T11:07:25+00:00","dateModified":"2026-06-06T12:14:17+00:00","description":"HTML5 brings semantic structure, multimedia elements, and API support for building interactive, modern websites.","breadcrumb":{"@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/buhave.com\/courses\/html\/html5-features\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/#primaryimage","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/HTML5-Features.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/04\/HTML5-Features.webp","width":1200,"height":628,"caption":"HTML5 Features"},{"@type":"BreadcrumbList","@id":"https:\/\/buhave.com\/courses\/html\/html5-features\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Courses","item":"https:\/\/buhave.com\/courses\/"},{"@type":"ListItem","position":2,"name":"HTML Course","item":"https:\/\/buhave.com\/courses\/learn\/html\/"},{"@type":"ListItem","position":3,"name":"HTML5 Features"}]},{"@type":"WebSite","@id":"https:\/\/buhave.com\/courses\/#website","url":"https:\/\/buhave.com\/courses\/","name":"BUHAVE","description":"Courses - Learn Online for Free","publisher":{"@id":"https:\/\/buhave.com\/courses\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/buhave.com\/courses\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/buhave.com\/courses\/#organization","name":"BUHAVE","url":"https:\/\/buhave.com\/courses\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/","url":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","contentUrl":"https:\/\/buhave.com\/courses\/wp-content\/uploads\/2025\/03\/buhave-course.webp","width":375,"height":75,"caption":"BUHAVE"},"image":{"@id":"https:\/\/buhave.com\/courses\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/BeYouHave\/","https:\/\/www.linkedin.com\/company\/buhave","https:\/\/www.youtube.com\/@buhave"]},{"@type":"Person","@id":"https:\/\/buhave.com\/courses\/#\/schema\/person\/04fe0254e118521c9fbb3da39de5acca","name":"Naveed Safdar","description":"I\u2019m Naveed Safdar - SEO Manager with over 10 years of experience in SEO and Digital Marketing. I\u2019ve had the privilege of working with leading national and international companies including Grafdom, PakWheels, Systems Limited, Confiz, Educative, and Dubizzle Labs. My expertise spans technical SEO, content strategy, organic growth, and performance analytics - helping businesses improve visibility, traffic, and ROI.","sameAs":["https:\/\/www.linkedin.com\/in\/naveedsafdar\/","https:\/\/www.facebook.com\/naveedsafdarawan\/","https:\/\/www.youtube.com\/@naveedsafdar"],"url":"https:\/\/buhave.com\/courses\/author\/naveed-safdar\/"}]}},"_links":{"self":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/comments?post=532"}],"version-history":[{"count":2,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/532\/revisions"}],"predecessor-version":[{"id":1132,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/posts\/532\/revisions\/1132"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media\/534"}],"wp:attachment":[{"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/media?parent=532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/categories?post=532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buhave.com\/courses\/wp-json\/wp\/v2\/tags?post=532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}