HTML Computercode

HTML Computer Code Elements

Representing Code and Technical Output

function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('World');

Formatting Computer Code in HTML

HTML provides specific semantic elements to represent different types of computer-related text, such as code snippets, keyboard input, sample output, and variables.

Using these elements improves accessibility and allows for specific styling via CSS. Most of these elements are typically rendered in a monospace font by default, preserving character spacing.

```: Representing Computer Code

The ``` element is used to mark up a fragment of computer code.

<p>The HTML `&lt;section&gt;` element defines a section in a document.</p>

<p>In JavaScript, use the `console.log()` method for debugging.</p>

Note: The element itself does not preserve whitespace (like line breaks and multiple spaces). For code blocks where formatting is important, wrap the element inside a <pre> element.

`<pre>`: Preformatted Text (for Code Blocks)

The <pre> element defines preformatted text. Whitespace inside a <pre> element (spaces, tabs, line breaks) is preserved exactly as written in the HTML source.

It’s commonly used together with ``` to display blocks of code, maintaining indentation and line breaks:

<pre>`
function calculateArea(width, height) {
  if (width > 0 && height > 0) {
    return width * height;
  }
  return 0;
}
`</pre>

This combination ensures the code is both semantically marked as code (```) and visually formatted correctly (<pre>).

`<kbd>`: Representing Keyboard Input

The <kbd> element represents user input, typically from a keyboard, but also potentially voice commands or other inputs.

<p>To save the file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
<p>Type <kbd>exit</kbd> to close the terminal.</p>

`<samp>`: Representing Sample Output

The <samp> element represents sample or example output from a computer program or system.

<p>If you enter the wrong password, you might see:</p>
<p><samp>Login incorrect</samp></p>

<p>The script outputted: <samp>Process completed successfully.</samp></p>

`<var>`: Representing Variables

The <var> element represents a variable. This could be a variable in a mathematical expression or programming context, an identifier, or a placeholder.

<p>The area of a rectangle is calculated as <var>width</var> &times; <var>height</var>.</p>
<p>In the command `git commit -m "<var>message</var>"`, replace <var>message</var> with your commit description.</p>