In HTML we have several elements that are used to define the user input, variables and computer code. These elements include:
<code> element is used to define a piece of text as computer code in a web page. The text inside the code element is displayed in the browser’s default monospace font.
Example
<!DOCTYPE html> <html> <head> </head> <body> <h2>The code element</h2> <p>The HTML <code>kbd</code> tag is used to define keyboard input.</p> <p>The CSS <code>background-color</code> property defines the background color of an element.</p> </body> </html>
To make the <code> element stylish and interactive let’s use CSS to style it.
Example
<!DOCTYPE html> <html> <head> <style> code { font-family: Consolas,"courier new"; background-color: #f1f1f1; padding: 2px; font-size: 105%; } </style> </head> <body> <h1>The code element + CSS</h1> <p>The HTML <code>kbd</code> tag is used to define keyboard input.</p> <p>The CSS <code>background-color</code> property defines the background color of an element.</p> </body> </html>
HTML <kbd> element is used to represent user’s input or keyboard input. The text written between the <kbd> tags is displayed in the browser’s default monospace font.
Example
<!DOCTYPE html> <html> <head> </head> <body> <h2>The kbd Element</h2> <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p> <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p> </body> </html>
The HTML <var> element is used to define some text as variable in a document. The text written between the <var> tags is displayed in italic. We usually use <var> tag when we have to define any mathematical expression.
Example
<!DOCTYPE html> <html> <body> <h2>HTML var Element</h2> <p>The area of a rectangle is: <var>l</var> x <var>w</var>, where <var>l</var> is the length, and <var>w</var> is the width .</p> </body> </html>
The HTML <samp> element is used to represent a sample output from a computer program. The text between the <samp> tags is displayed in the browser’s default monospace font.
Example
<!DOCTYPE html> <html> <body> <h2>The samp Element</h2> <p>The HTML samp element is used to define sample output from a computer program.</p> <p>Message from my computer:</p> <p><samp>File not found.</br>Press F1 to continue</samp></p> </body> </html>
Related Posts
HTML Inline and Block Elements