{"id":20864,"date":"2018-03-05T16:15:56","date_gmt":"2018-03-05T14:15:56","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=20864"},"modified":"2018-03-05T15:06:19","modified_gmt":"2018-03-05T13:06:19","slug":"html5-keyboard-input-element-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/","title":{"rendered":"HTML5 Keyboard Input Element Example"},"content":{"rendered":"<p>In this post we will take a look at the <code>kbd<\/code> Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed text. What I meant there was that the text would stand out from surrounding text and would indicate as an input provided by the user using an input device like keyboard. We can use this tag in a programming blog or for online programming content as well as other scenarios.<\/p>\n<h2>1. Tools &amp; Technologies<\/h2>\n<p>I have used the following tools to build the demonstration project. You can switch to other editors or IDE that you are comfortable with. As far as the technologies are concerned I have used Nodejs to spin up a little web server.<\/p>\n<ol>\n<li><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener\">Nodejs v8.9.4<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/express\" target=\"_blank\" rel=\"noopener\">Express v4.16.2<\/a><\/li>\n<li>HTML5<\/li>\n<li>CSS<\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\" rel=\"noopener\">Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n<p>[ulp id=&#8217;tgm4cmEWcKUikZNn&#8217;]<\/p>\n<h2>2. Project Layout<\/h2>\n<p>The layout of our sample application will look like below once we are done with all the changes:<\/p>\n<figure id=\"attachment_21037\" aria-describedby=\"caption-attachment-21037\" style=\"width: 294px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectLayoutHTMLKBDTagExample.jpeg\"><img decoding=\"async\" class=\"size-full wp-image-21037\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectLayoutHTMLKBDTagExample.jpeg\" alt=\"\" width=\"294\" height=\"304\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectLayoutHTMLKBDTagExample.jpeg 294w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectLayoutHTMLKBDTagExample-290x300.jpeg 290w\" sizes=\"(max-width: 294px) 100vw, 294px\" \/><\/a><figcaption id=\"caption-attachment-21037\" class=\"wp-caption-text\">Project Layout<\/figcaption><\/figure>\n<p><span style=\"text-decoration: underline;\"><em>index.js<\/em><\/span>: This file contains JavaScript code to spin a basic web server. It does not have too many bells and whistles but suffices the purpose here for our example. We set it up to listen for requests on port 8090 and serve the requested server side resource as response.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.html<\/em><\/span>: This is, where the action is, the landing page of our example. It contains the markup to demonstrate the usage of the Keyboard Input Tag.<\/p>\n<h2>3. Purpose and Usage of Keyboard Input Element<\/h2>\n<p>The purpose of the Keyboard Input tag is to represent text in one of the following scenarios:<\/p>\n<ul>\n<li>Present text that the user needs to key in the system<\/li>\n<li>Present output generated by the system in response to user action<\/li>\n<li>Cases where we need to show selections that the user needs to make like menu selections<\/li>\n<\/ul>\n<p>Let us look at each usage in detail. Firstly we will add an HTML5 web page and called <code>index.html<\/code>. This file looks like below initially.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.html<\/em><\/span><\/p>\n<pre class=\"brush: html;\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\"&gt;\r\n    &lt;head&gt;\r\n        &lt;meta charset=\"utf-8\"&gt;\r\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"&gt;\r\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;\r\n&lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;\r\n        &lt;title&gt;WCG -- HTML5 Keyboard Input Element Example&lt;\/title&gt;\r\n\r\n&lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;\r\n&lt;!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ --&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n&lt;script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"&gt;&lt;\/script&gt;\r\n&lt;script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"&gt;&lt;\/script&gt;\r\n&lt;![endif]--&gt;\r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n        &lt;h1&gt;WCG -- HTML5 Keyboard Input Element Example &lt;\/h1&gt;\r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Now let us add the below markup to our <code>index.html<\/code> page.<\/p>\n<pre class=\"brush: html;\">...\r\n&lt;p&gt;\r\n We can save a file using the keyboard shortcut &lt;kbd&gt;&lt;kbd class=\"key\"&gt;Ctrl&lt;\/kbd&gt;+&lt;kbd class=\"key\"&gt;S&lt;\/kbd&gt;&lt;\/kbd&gt;\r\n&lt;\/p&gt;\r\n...\r\n<\/pre>\n<p>Further we can style the content of the nested <code>&lt;kbd&gt;&lt;\/kbd&gt;<\/code> tags to further highlight a specific input among larger content. So let us add the following style to our nested tags by adding a style tag with our css and decorating the nested tags with the css rule we just created:<\/p>\n<pre class=\"brush: html;\">...\r\n&lt;style&gt;\r\n    .key {\r\n        border-radius: 3px;\r\n        border: 1px solid lightgray;\r\n        padding: 2px;\r\n    }\r\n&lt;\/style&gt;\r\n...\r\n<\/pre>\n<p>and<\/p>\n<pre class=\"brush: html;\">&lt;kbd&gt;&lt;kbd class=\"key\"&gt;Ctrl&lt;\/kbd&gt;+&lt;kbd class=\"key\"&gt;S&lt;\/kbd&gt;&lt;\/kbd&gt;\r\n<\/pre>\n<p>After making the above changes the output looks like below:<\/p>\n<figure id=\"attachment_21046\" aria-describedby=\"caption-attachment-21046\" style=\"width: 729px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput1.jpeg\"><img decoding=\"async\" class=\"size-full wp-image-21046\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput1.jpeg\" alt=\"\" width=\"729\" height=\"200\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput1.jpeg 729w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput1-300x82.jpeg 300w\" sizes=\"(max-width: 729px) 100vw, 729px\" \/><\/a><figcaption id=\"caption-attachment-21046\" class=\"wp-caption-text\">Project Output<\/figcaption><\/figure>\n<p>To present system output to a terminal in HTML5 markup we can make use of the <code>kbd<\/code> tag as follows:<\/p>\n<pre class=\"brush: html;\">...\r\n&lt;p&gt;\r\nIf a file already exists with the name the system will show error message&lt;br \/&gt;\r\n&lt;kbd&gt;File already exists!&lt;\/kbd&gt;&lt;br\/&gt;\r\notherwise it will display the following info message.&lt;br \/&gt;\r\n&lt;kbd&gt;File saved successfully!&lt;\/kbd&gt;\r\n&lt;\/p&gt;\r\n...\r\n<\/pre>\n<p>The output of the above changes looks like below:<\/p>\n<figure id=\"attachment_21048\" aria-describedby=\"caption-attachment-21048\" style=\"width: 723px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput2.jpeg\"><img decoding=\"async\" class=\"size-full wp-image-21048\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput2.jpeg\" alt=\"\" width=\"723\" height=\"291\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput2.jpeg 723w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput2-300x121.jpeg 300w\" sizes=\"(max-width: 723px) 100vw, 723px\" \/><\/a><figcaption id=\"caption-attachment-21048\" class=\"wp-caption-text\">Project Output<\/figcaption><\/figure>\n<p>To inform the user of options provided to accomplish a task we can use the <code>kbd<\/code> tag as follows:<\/p>\n<pre class=\"brush: html;\">...\r\n&lt;p&gt;\r\nWe can also save files using the menu command &lt;kbd&gt;&lt;samp&gt;File&lt;\/samp&gt; =&gt; &lt;samp&gt;Save&lt;\/samp&gt;&lt;\/kbd&gt;\r\n&lt;\/p&gt;\r\n...\r\n<\/pre>\n<p>As you can see we have used the <code>kbd<\/code> tag in combination with the <code>samp<\/code> tag to achieve the desired result. The changes above yields the following output:<\/p>\n<figure id=\"attachment_21051\" aria-describedby=\"caption-attachment-21051\" style=\"width: 726px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput3.jpeg\"><img decoding=\"async\" class=\"size-full wp-image-21051\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput3.jpeg\" alt=\"\" width=\"726\" height=\"322\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput3.jpeg 726w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/ProjectOutput3-300x133.jpeg 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><\/a><figcaption id=\"caption-attachment-21051\" class=\"wp-caption-text\">Project Output<\/figcaption><\/figure>\n<h2>4. Run the code<\/h2>\n<p>To run the code for this example, the following two commands need to be run in order.<\/p>\n<pre class=\"brush: bash;\">&gt; npm install\r\n<\/pre>\n<p>followed by<\/p>\n<pre class=\"brush: bash;\">&gt; node index.js\r\n<\/pre>\n<p>Once done, navigate to the URL <code>http:\/\/localhost:8090<\/code> using a browser to navigate to our landing page:<\/p>\n<figure id=\"attachment_21053\" aria-describedby=\"caption-attachment-21053\" style=\"width: 726px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/LandingPageKeyboardProject.jpeg\"><img decoding=\"async\" class=\"size-full wp-image-21053\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/LandingPageKeyboardProject.jpeg\" alt=\"\" width=\"726\" height=\"473\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/LandingPageKeyboardProject.jpeg 726w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/LandingPageKeyboardProject-300x195.jpeg 300w\" sizes=\"(max-width: 726px) 100vw, 726px\" \/><\/a><figcaption id=\"caption-attachment-21053\" class=\"wp-caption-text\">Landing Page &#8212; index.html<\/figcaption><\/figure>\n<h2>5. Download the Source Code<\/h2>\n<p>That wraps up our look at the HTML5 Keyboard Input Tag. You can download the source code from:<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here : <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/03\/WCG-HTML5-Keyboard-Input-Element-Example.zip\"><strong>WCG &#8212; HTML5 Keyboard Input Element Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed text. What I meant there was that the text would stand out from surrounding text and would indicate as an input provided by the &hellip;<\/p>\n","protected":false},"author":213,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[58,517,516,518],"class_list":["post-20864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-html5-2","tag-kbd","tag-keyboard-input","tag-keyboard-shortcut"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>HTML5 Keyboard Input Element Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Keyboard Input Element Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-05T14:15:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"HTML5 Keyboard Input Element Example\",\"datePublished\":\"2018-03-05T14:15:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/\"},\"wordCount\":597,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"keywords\":[\"html5\",\"kbd\",\"Keyboard Input\",\"keyboard shortcut\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/\",\"name\":\"HTML5 Keyboard Input Element Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2018-03-05T14:15:56+00:00\",\"description\":\"In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Keyboard Input Element Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Keyboard Input Element Example - Web Code Geeks - 2026","description":"In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed","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:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Keyboard Input Element Example - Web Code Geeks - 2026","og_description":"In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-03-05T14:15:56+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"HTML5 Keyboard Input Element Example","datePublished":"2018-03-05T14:15:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/"},"wordCount":597,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","keywords":["html5","kbd","Keyboard Input","keyboard shortcut"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/","name":"HTML5 Keyboard Input Element Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2018-03-05T14:15:56+00:00","description":"In this post we will take a look at the kbd Html tag. This tag allows us to stylize keyboard input in a way that highlights the semantics of the enclosed","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-keyboard-input-element-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Keyboard Input Element Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=20864"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20864\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=20864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=20864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=20864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}