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.
- 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>
- 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>
- 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>
- 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.