![]() |
The Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below). Also look at:
|
Example:
HTML
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>background-color</code> property defines the background color of an element.</p>
Example:
HTML
<style>
code {
font-family: Consolas,"courier new";
color: crimson;
background-color: #f1f1f1;
padding: 2px;
font-size: 105%;
}
</style>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>background-color</code> property defines the background color of an element.</p>
Example:
HTML
<style>
code {
font-family: monospace;
}
</style>
Define some text as sample output from a computer program in a document:
The <samp>
tag is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS.
Also look at:
Tag | Description |
---|---|
<code> | Defines a piece of computer code |
<kbd> | Defines keyboard input |
<var> | Defines a variable |
<pre> | Defines preformatted text |
Example:
HTML
<p>Message from my computer:</p>
<p><samp>File not found.<br>Press F1 to continue</samp></p>
Most browsers will display the <samp>
element with the following default values:
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
samp {
font-family: monospace;
}
</style>
</head>
<body>
<p>A samp element is displayed like this:</p>
<samp>Sample output from a computer program</samp>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
Define some text as keyboard input in a document.
More "Try it Yourself" examples below.
The <kbd>
tag is used to define keyboard input. The content inside is displayed in the browser's default monospace font.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).
Also look at:
Tag | Description |
---|---|
<code> | Defines a piece of computer code |
<samp> | Defines sample output from a computer program |
<var> | Defines a variable |
<pre> | Defines preformatted text |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The kbd element</h1>
<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>
Define some text as variables in a document:
The <var>
tag is used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS.
Also look at:
Tag | Description |
---|---|
<code> | Defines a piece of computer code |
<samp> | Defines sample output from a computer program |
<kbd> | Defines keyboard input |
<pre> | Defines preformatted text |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The var element</h1>
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
</body>
</html>
Most browsers will display the <var>
element with the following default values.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
var {
font-style: italic;
}
</style>
</head>
<body>
<p>A var element is displayed like this:</p>
<var>Variable</var>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
Preformatted text.
The <pre>
tag defines preformatted text.
Text in a <pre>
element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
Also look at:
Tag | Description |
---|---|
<code> | Defines a piece of computer code |
<samp> | Defines sample output from a computer program |
<kbd> | Defines keyboard input |
<var> | Defines a variable |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The pre element</h1>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
Follow the Example.
Example:
HTML
<div style="width:200px;overflow:auto">
<pre>This is a pre with a fixed width. It will use as much space as specified.</pre>
</div>
Most browsers will display the <pre>
element with the following default values.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
</style>
</head>
<body>
<p>A pre element is displayed like this:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
Read Full: | HTML Tag |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 226 |
Reffered: https://www.w3schools.com/tags/tag_code.asp