{"id":79035,"date":"2020-07-07T09:00:50","date_gmt":"2020-07-07T03:30:50","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=79035"},"modified":"2024-07-24T16:47:32","modified_gmt":"2024-07-24T11:17:32","slug":"html-computer-code-elements","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/","title":{"rendered":"HTML Computer Code Elements"},"content":{"rendered":"

During web-site development, there is sometimes a need to display code. This could be a tedious task if we consider styling of the text to match the code\u2019s presentation. HTML Computer codes are displayed in a different text style and formatting in an HTML document. HTML5 provides a variety of elements to display computer codes. The <code> tag is the most widely used element. In this article, we will learn about HTML Computer Code elements.<\/p>\n

\"HTML<\/a><\/p>\n

HTML Computer Code Elements<\/h2>\n

HTML code written within the following tags has a different font-size and style, as opposed to the normal headings and paragraphs.<\/p>\n

1. HTML <code> tag<\/h3>\n

The <code> tag displays a specific computer code, and its content is displayed in fixed text-size, font-family, and spacing.
\nWe can style elements to match the computer\u2019s default text format.
\nSyntax-<\/strong><\/p>\n

<code> Computer Code <\/code><\/pre>\n
For Example:<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<h2>Computer Code<\/h2>\r\n<p>Programming code:<\/p>\r\n<code>\r\nx = 25;<br>\r\ny = 36;<br>\r\nz = x + y;\r\n<\/code>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"HTML<\/a><\/p>\n
The use of the <code> tag increases the readability of the code and makes it easy for the code to set-off from the rest of the text for the reader to understand the code. Also, using the <code> tag along with the <pre> tag it is much easier to read the code as spaces and line breaks are preserved. This is useful for showing the code in as much detail as needed, most basically for programming tutorials, or guides.<\/p>\n
Therefore, The use of <pre> tag to contain the <code> tag and preserve formatting, is also recommended.
\nNote-<\/strong><\/em> Browsers use mono-space font-family to display the code snippets.<\/p>\n
2. HTML <kbd> Tag<\/h3>\n
The <kbd> or, keyboard input element, defines the user-input or voice input. The text that should be typed is contained within the <kbd> tags and is displayed as mono-space.
\nWe can use CSS to obtain richer effects, but there are no tag-specific attributes related to <kbd>.
\nSyntax-<\/strong><\/p>\n
<kbd>Key combination<\/kbd><\/pre>\n
For Example<\/strong><\/p>\n
<!DOCTYPE html>  \r\n<html>  \r\n<head>  \r\n<title>The kbd tag<\/title>  \r\n<style>  \r\nbody {  \r\ntext-align:center;  \r\n}  \r\n<\/style>  \r\n<\/head>  \r\n<body>  \r\n      <div class = \"df\">DataFlair<\/div>  \r\n      <kbd>Welcome to<\/kbd>  \r\n      <kbd>DataFlair<\/kbd>\r\n      <p>Press  \r\n      <kbd>Ctrl+S<\/kbd><\/p> \r\n    <\/body>  \r\n<\/html>\r\n\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"\"<\/a><\/p>\n
Description of output- On pressing ctrl+s, the web-page save option will be displayed.<\/p>\n
3. HTML <pre> tag<\/h3>\n
The <pre> tag of HTML allows the developers to display the text in the same format i.e., spaces, tabs, line breaks, etc as written in the code. We can style the text enclosed within the <pre> tag using CSS, yet it remains preserved in the browser.
\nSyntax-<\/strong><\/p>\n
<pre>Content<\/pre>\r\n<\/pre>\n
For Example<\/strong><\/p>\n
<html> \r\n<head> \r\n<title>DataFlair<\/title> \r\n<\/head> \r\n<body> \r\n<pre>\r\nDataFlair\r\nLearn Today.Lead Tomorrow.\r\n<\/pre> \r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"HTML<\/a><\/p>\n
4. HTML <samp> tag<\/h3>\n
This tag defines the sample output from a specific computer program i.e., a quoted output. The surrounded text displays in a monospace font. It is to display a quoted output from another source.
\nSyntax-<\/strong><\/p>\n
<samp>Content<\/samp>\r\n<\/pre>\n
For Example<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<h2>samp element<\/h2>\r\n<p>The samp element represents output from a program<\/p>\r\n<p>For example,<samp>There is an Error!<\/samp><\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
5. HTML <var> tag<\/h3>\n
The variables in a mathematical equation or computer program can be explicitly displayed using the <var> element. It is usually in italics, by most of the browsers.
\nSyntax-<\/strong><\/p>\n
<var>Content<\/var>\r\n<\/pre>\n
For Example<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<body>\r\n<h2>Planck's Equation<\/h2>\r\n<p>According to Planck's Equation <var>E<\/var> = <var>hf<\/var><\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
Below is the short description of all tags that we have seen above:<\/p>\n\n\n\n\n\n\n\n\n
Tag<\/b><\/td>\nDescription<\/b><\/td>\n<\/tr>\n
<code><\/span><\/td>\nIt defines and inserts a programming code or snippet.<\/span><\/td>\n<\/tr>\n
<kbd><\/span><\/td>\nIt is for defining an input from the keyboard.<\/span><\/td>\n<\/tr>\n
<samp><\/span><\/td>\nThis defines the computer’s output.<\/span><\/td>\n<\/tr>\n
<var><\/span><\/td>\nIt is to define a variable<\/span><\/td>\n<\/tr>\n
<pre><\/span><\/td>\nIt defines preformatted text in an HTML document.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Summary<\/h2>\n
In this article, we\u2019ve discussed the mark-up for computer code in HTML5. HTML uses line-spacing and variable letter size, which is not desirable when code snippets are to be displayed. Computer code and mathematical instructions can be explicitly displayed in an HTML document, without styling with CSS. We\u2019ve looked at various tags such as <code>, <kbd>, <samp>, <pre> and <var>.<\/p>\n
Hope you enjoyed the tutorial. Do share your feedback in the comment section!!!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
During web-site development, there is sometimes a need to display code. This could be a tedious task if we consider styling of the text to match the code\u2019s presentation. HTML Computer codes are displayed...<\/p>\n","protected":false},"author":10,"featured_media":79050,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[22531,22530,22532,22533,22534],"class_list":["post-79035","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html-code-tag","tag-html-computer-code-elements","tag-html-kbd-tag","tag-html-pre-tag","tag-html-var-tag"],"yoast_head":"\nHTML Computer Code Elements - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn what are HTML Computer code elements and their uses. Learn about various tags like code, kbd, samp, pre and var with their syntax and examples\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Computer Code Elements - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn what are HTML Computer code elements and their uses. Learn about various tags like code, kbd, samp, pre and var with their syntax and examples\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-07T03:30:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-24T11:17:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Computer-Code-Elements-df.jpg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML Computer Code Elements - DataFlair","description":"Learn what are HTML Computer code elements and their uses. Learn about various tags like code, kbd, samp, pre and var with their syntax and examples","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:\/\/data-flair.training\/blogs\/html-computer-code-elements\/","og_locale":"en_US","og_type":"article","og_title":"HTML Computer Code Elements - DataFlair","og_description":"Learn what are HTML Computer code elements and their uses. Learn about various tags like code, kbd, samp, pre and var with their syntax and examples","og_url":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-07-07T03:30:50+00:00","article_modified_time":"2024-07-24T11:17:32+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Computer-Code-Elements-df.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"HTML Computer Code Elements","datePublished":"2020-07-07T03:30:50+00:00","dateModified":"2024-07-24T11:17:32+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/"},"wordCount":635,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Computer-Code-Elements-df.jpg","keywords":["html code tag","HTML Computer Code Elements","html kbd tag","html pre tag","html var tag"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/","url":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/","name":"HTML Computer Code Elements - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Computer-Code-Elements-df.jpg","datePublished":"2020-07-07T03:30:50+00:00","dateModified":"2024-07-24T11:17:32+00:00","description":"Learn what are HTML Computer code elements and their uses. Learn about various tags like code, kbd, samp, pre and var with their syntax and examples","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Computer-Code-Elements-df.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/07\/HTML-Computer-Code-Elements-df.jpg","width":1200,"height":628,"caption":"HTML Computer Code Elements"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/html-computer-code-elements\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"HTML Computer Code Elements"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=79035"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79035\/revisions"}],"predecessor-version":[{"id":142888,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/79035\/revisions\/142888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/79050"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=79035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=79035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=79035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}