4.5 code, pre, kbd, samp, var | HTML

4.5 code, pre, kbd, samp, var
Table of Contents

In HTML, the elements <code>, <pre>, <kbd>, <samp>, and <var> are used to define different types of text formatting or indicate specific types of content within a document.

1. <code> Element

The <code> element is used to define a piece of computer code. It is typically displayed in a monospaced font and may preserve whitespace and line breaks.


<p>Use the <code>tag</code> to highlight code snippets.</p>

In this example, "tag" within the <code> element is displayed in a monospaced font.

2. <pre> Element

The <pre> element defines preformatted text. It preserves both spaces and line breaks, displaying text exactly as written in the HTML code.


  This text
  is displayed
  exactly as written.

The text inside the <pre> element is shown with fixed-width font and preserves all formatting, including spaces and line breaks.

3. <kbd> Element

The <kbd> element represents user input, typically used to denote keyboard input or text entered by the user.


<p>Press <kbd>Ctrl + C</kbd> to copy the selected text.</p>

In this example, "Ctrl + C" within the <kbd> element indicates keyboard input.

4. <samp> Element

The <samp> element represents sample output or example code output, often used in documentation or tutorials to show expected results.


<p>The <samp>tag</samp> is used to display sample output.</p>

In this example, "tag" within the <samp> element represents sample output.

5. <var> Element

The <var> element defines a variable in programming or mathematics, indicating an expression or placeholder that can vary.


<p>Let <var>x</var> be a variable representing an integer.</p>

In this example, "x" within the <var> element represents a variable.


These HTML elements—<code>, <pre>, <kbd>, <samp>, and <var>—serve specific purposes in formatting and indicating different types of content within a document, such as code snippets, preformatted text, user input, sample output, and variables.

I am a passionate writer. Read more.

Post a Comment

Don't spam links or promote stuff in the comments. It's annoying and lowers the conversation quality. Contribute respectfully and helpfully instead.