Lesser-Known HTML Elements: output, noscript, wbr, kbd, samp and var

HTML has small, lesser-known elements like <output>, <noscript>, <wbr>, <kbd>, <samp> and <var> that solve real problems. Learn what each is for, with examples, plus obsolete tags to avoid.

kbd, samp and var: writing about computers

If you write tutorials or help pages, you often need to show keys, computer messages and variables. HTML has a special element for each one.

• <kbd> is keyboard input: keys or text the user should type.
• <samp> is sample output: what a program or computer shows back, like an error message.
• <var> is a variable: a name that stands for a value, in maths or in code.

These sit next to <code>, which you met in the formatting lesson. <code> is for pieces of code; these three are more specific.

<article>
  <h2>How to save your work</h2>
  <p>Press <kbd><kbd>Ctrl</kbd> + <kbd>S</kbd></kbd> to save the file.</p>
  <p>If the disk is full, you will see: <samp>Error: not enough space</samp></p>
  <p>To find the area of a rectangle, multiply <var>width</var> by <var>height</var>.</p>
  <p>Type <kbd>npm start</kbd> and press <kbd>Enter</kbd>.</p>
</article>

Browsers show <kbd> and <samp> in a monospace font (every letter the same width) and <var> in italics. With a little CSS you can make <kbd> look like real keys. The nested <kbd> elements mean "this whole key combination is input, made of these single keys".

output: showing a calculated result

The <output> element shows the result of a calculation or a user action, usually inside a form. The for attribute lists the ids of the inputs that affect it. Screen readers can announce the new value when it changes, which is helpful for live totals.

<form oninput="total.value = Number(price.value) * Number(qty.value)">
  <label for="price">Price per ticket (£)</label>
  <input type="number" id="price" name="price" value="12" min="0">

  <label for="qty">Number of tickets</label>
  <input type="number" id="qty" name="qty" value="1" min="1">

  <p>Total: £<output name="total" for="price qty">12</output></p>
</form>

Change either number and the total updates at once. The small oninput attribute is a line of JavaScript that runs whenever an input in the form changes. It reads the two inputs by their name and writes the result into the <output>. You will learn proper JavaScript in the JavaScript course; here the important part is that <output> is the right container for the answer.

noscript: a message when JavaScript is off

<noscript> holds content that is shown only when JavaScript is turned off or blocked. Some people disable JavaScript, and some company networks block it.

<div id="weather-widget">Loading weather...</div>
<noscript>
  <p>The weather widget needs JavaScript. You can see today's forecast on the <a href="forecast.html">forecast page</a>.</p>
</noscript>
<script src="js/weather.js" defer></script>

With JavaScript on, visitors never see the message. With it off, they get a useful link instead of a page that just says "Loading" forever.

Tip: The best pages work without JavaScript first and use JavaScript to make things nicer. Use <noscript> for the parts that truly cannot work without it.

wbr: a safe place to break a long word

<wbr> means word break opportunity. It is an empty element that tells the browser: "if this long word does not fit, you may break the line here". If it fits, nothing happens.

<p>Visit our page at www.super<wbr>long<wbr>company<wbr>name<wbr>example.com/contact</p>
<p>Our file is called annual_<wbr>report_<wbr>2026_<wbr>final.pdf</p>

On a wide screen you see the text on one line. On a narrow phone, the line breaks at one of the <wbr> points instead of pushing the page wider than the screen. No hyphen is added.

Obsolete HTML elements to avoid

Old tutorials still show some elements that are now obsolete. They were removed from the HTML standard because styling belongs in CSS, or because they were bad for users. Browsers may still show them, but you should not use them.

Obsolete element	What it did	Use instead
<font>	Changed font, size and colour	CSS font-family, font-size, color
<center>	Centred content	CSS text-align: center or flexbox
<marquee>	Scrolling, moving text	Nothing, or a gentle CSS animation
<big>	Made text bigger	CSS font-size
<tt>	Monospace text	<code>, <kbd> or <samp>

Common mistake: Copying <center> or <font color="red"> from an old forum post. It might seem to work, but the HTML validator will show errors, and moving text like <marquee> is hard to read and can make some people feel unwell.

Practice exercise

Write a short help page called "How to take a screenshot". Use <kbd> for the key combinations on Windows and Mac, <samp> for the message "Screenshot saved", and a <noscript> message for a pretend video player. Then add a long file name with <wbr> and check it on a narrow window.

Hint: on Windows the shortcut is Windows key + Shift + S; on Mac it is Cmd + Shift + 4. Nest <kbd> elements for each key.

Key takeaways

• <kbd> is user input, <samp> is computer output, <var> is a variable.
• <output> holds the result of a calculation and can be linked to inputs with for.
• <noscript> shows content only when JavaScript does not run.
• <wbr> marks a safe place to break a long word or URL.
• Never use obsolete elements like <font>, <center> and <marquee>; use CSS instead.