HTML Computer Code Elements

      Comments Off on HTML Computer Code Elements
Spread the love

HTML Computer Code Elements:

HTML Computer Code Elements and Different Types

In HTML, computer code elements are used to display text in a fixed-width font and to differentiate it from the normal text. There are several types of computer code elements available in HTML, including the <code>, <kbd>, <samp>, and <pre> elements.

  1. The <code> Element: The <code> element is used to define a piece of computer code within a text. It is usually displayed in a monospace font, and the text is often displayed in a different color to the rest of the text.

Syntax:

css
<code>This is a piece of code</code>

Example:

css
<p>Here is an example of <code>HTML</code> code.</p>
  1. The <kbd> Element: The <kbd> element is used to indicate input that is typically entered from a keyboard. The text is usually displayed in a monospace font, and the text is often displayed within a box or highlighted in some way to differentiate it from the rest of the text.

Syntax:

css
<kbd>This is a keyboard input</kbd>

Example:

css
<p>Please press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy the text.</p>
  1. The <samp> Element: The <samp> element is used to indicate sample output or data. The text is usually displayed in a monospace font, and the text is often displayed within a box or highlighted in some way to differentiate it from the rest of the text.

Syntax:

css
<samp>This is a sample output</samp>

Example:

less
<p>The output of the program is: <samp>Hello World</samp>.</p>
  1. The <pre> Element: The <pre> element is used to define preformatted text. The text is usually displayed in a monospace font and includes any spaces, line breaks, and tabs in the source code. It is useful for displaying code examples or poetry.

Syntax:

scss
<pre>
This is preformatted text
It includes all spaces, tabs, and line breaks in the source code
</pre>

Example:

php
<pre>
<!DOCTYPE html>
<html>
<head>
	<title>My Web Page</title>
</head>
<body>
	<h1>Hello World</h1>
	<p>Welcome to my website.</p>
</body>
</html>
</pre>

In conclusion, the computer code elements in HTML help to format code and input/output text, making it easy to differentiate it from the rest of the text on a web page. The <code>, <kbd>, <samp>, and <pre> elements are all useful for displaying different types of computer code, and they can be combined with CSS styles to further enhance their appearance.