HTML Computer Code Elements

HTML provides several tags to display computer code or text that represents programming or system input/output.

1. <code> - Inline Code

Use <code> to show small snippets of code inside a paragraph:

To display a heading in HTML, use <code><h1>Hello</h1></code>.

2. <pre> - Preformatted Text

Use <pre> to preserve spaces and line breaks. Perfect for larger code blocks:

<pre>
function greet() {
  console.log("Hello, World!");
}
</pre>

function greet() {
  console.log("Hello, World!");
}

3. <kbd> - Keyboard Input

Use <kbd> to show keyboard keys:

Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.

4. <samp> - Sample Output

Use <samp> to show output from a program or system:

<samp>Hello, World!</samp>

5. <var> - Variable

Use <var> to display a variable name:

let <var>x</var> = 10;

6. <s> - Strikethrough Text

Use <s> to show deleted or removed text:

<s>Old Code</s>

Next Lesson → HTML Semantic Elements

Previous Lesson → HTML Responsive Design