HTML Basics
HTML Computer Code Elements
HTML has several elements built for displaying computer code, keyboard input, and program output in a clear, monospaced style.
The code and pre Elements
The <code> element marks a snippet of code inline. On its own it does not preserve spaces or line breaks, so wrap multi-line code in a <pre> element too.
<p>Use the <code>console.log()</code> function.</p>
<pre><code>function greet() {
console.log("Hello!");
}</code></pre>Other Code-Related Elements
| Element | Represents | Example use |
|---|---|---|
| <kbd> | Keyboard input the user types | Press <kbd>Ctrl</kbd> + <kbd>S</kbd> |
| <samp> | Sample output from a program | <samp>File saved.</samp> |
| <var> | A variable or placeholder | The area is <var>width</var> x <var>height</var> |
<p>Press <kbd>Enter</kbd> to run the program.</p>
<p>The program printed <samp>Done!</samp></p>
<p>Solve for <var>x</var> in the equation.</p>💡
Inside a <pre> block, use the entity < instead of < so the browser shows the character rather than treating it as a real tag.