Yes. Nesting is the official way to show a key combination: Ctrl + C means "press these keys together".

How do I show the characters inside ?

Write them as character entities: < for , and & for &. Otherwise the browser treats them as real HTML tags and they disappear from the page.

<code>, <kbd>, <samp> & <var> Tags in HTML

Q: How do I show a multi-line block of code?

Wrap inside : ... . keeps the line breaks and indentation, and says the content is code.

Q: How do I mark up a keyboard shortcut like Ctrl+C?

Put each key in its own element: Ctrl + C . You can also wrap the whole shortcut in an outer to show it is one combined input.

Q: Does add syntax highlighting?

No. only switches to a monospace font. For colored syntax highlighting, use a JavaScript library such as Prism or highlight.js, or add your own CSS.

Q: How do I add a copy button to a code block?

Add a next to the block and, in its click handler, call navigator.clipboard.writeText(codeElement.textContent). Show a short "Copied!" message so people know it worked.

Q: Which font should I use for code?

A monospace font, where every letter has the same width, so columns line up. font-family: ui-monospace, Consolas, "Courier New", monospace; uses a good built-in font on each system.

Q: Is a block or an inline element?

Inline. It sits inside a line of text like a word. To show a separate block of code, wrap it in or set display: block in CSS.

Quick facts

Category	Flow content, phrasing content, palpable content
Content model	Phrasing content
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content
DOM interface	`HTMLElement` (all four)

Syntax

<p>Use the <code>querySelector()</code> method.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The terminal prints <samp>File saved</samp>.</p>
<p>The area is <var>width</var> × <var>height</var>.</p>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	All four accept only the global attributes.

Common examples

Code inside a sentence

Wrap function names, file names and short snippets in so they stand out from the surrounding text.


  <p>Save the file as <code>index.html</code> and call <code>init()</code> when the page loads.</p>
  A multi-line code block
  Put <code> inside <pre> to keep the line breaks and indentation. Add a language- class so highlighting libraries know which language it is.
  <pre><code class="language-css">body {
  margin: 0;
  font-family: system-ui, sans-serif;
}</code></pre>
  Keyboard shortcuts and program output
  Use <kbd> for keys the reader presses and <samp> for what the computer prints back.
  <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The terminal replies: <samp>File saved.</samp></p>
  Variables in a formula
  Use <var> for variable names in maths or in instructions.
  <p>The area of a rectangle is <var>width</var> × <var>height</var>.</p>

  <code> vs <kbd> vs <samp>
  All three usually appear in a monospace font, but they mean different things. <code> is something written in a programming or markup language. <kbd> is something the user types or presses. <samp> is what a program shows as output, such as an error message.
  A simple way to remember it: <kbd> goes into the computer, <samp> comes out of it, and <code> is the program in between. Choosing the right one helps screen readers and search engines understand technical writing.
  
    
      <code> <kbd> <samp>
      
        Means Computer code User input Program output
        Example getElementById() Ctrl+C 404 Not Found
      
    
  

  Common mistakes to avoid
  
    Using <code> just to get a monospace font. If the text isn't code, style a <span> with CSS instead.
    Forgetting to escape < and &. Writing <p> inside <code> creates a real paragraph; write &lt;p&gt; to show the tag.
    Multi-line code without <pre>. <code> alone collapses line breaks and spaces into a single line.
    Using <code> for keys. Keyboard shortcuts belong in <kbd>.
  

  Accessibility & SEO tips
  
    Make sure code text has enough color contrast — light gray code on a white background is a common readability problem.
    Long code lines should scroll inside their box (overflow-x: auto on the <pre>) instead of making the whole page scroll sideways on phones.
    Search engines index code as normal text, so tutorials with real, copyable code examples can rank for programming questions.
    For short inline code inside a sentence, keep it brief — a long run of monospace text inside a paragraph is hard to read on small screens; move longer snippets into their own <pre> block.
  

  Browser support
  Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.

  Related tags
  
    <pre>
    <span>
    <b> / <i> / <u>
    <sub> / <sup>
  

  Frequently asked questions
  
    
      How do I show a multi-line block of code?
      Wrap <code> inside <pre>: <pre><code>...</code></pre>. <pre> keeps the line breaks and indentation, and <code> says the content is code.
    
    
      How do I mark up a keyboard shortcut like Ctrl+C?
      Put each key in its own <kbd> element: <kbd>Ctrl</kbd> + <kbd>C</kbd>. You can also wrap the whole shortcut in an outer <kbd> to show it is one combined input.
    
    
      Does <code> add syntax highlighting?
      No. <code> only switches to a monospace font. For colored syntax highlighting, use a JavaScript library such as Prism or highlight.js, or add your own CSS.
    
    
      How do I add a copy button to a code block?
      Add a <button> next to the <pre><code> block and, in its click handler, call navigator.clipboard.writeText(codeElement.textContent). Show a short "Copied!" message so people know it worked.
    
    
      Which font should I use for code?
      A monospace font, where every letter has the same width, so columns line up. font-family: ui-monospace, Consolas, "Courier New", monospace; uses a good built-in font on each system.
    
    
      Can I use <kbd> inside <kbd>?
      Yes. Nesting is the official way to show a key combination: <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd> means "press these keys together".
    
    
      How do I show the < and > characters inside <code>?
      Write them as character entities: &lt; for < and &gt; for >, and &amp; for &. Otherwise the browser treats them as real HTML tags and they disappear from the page.
    
    
      Is <code> a block or an inline element?
      Inline. It sits inside a line of text like a word. To show a separate block of code, wrap it in <pre> or set display: block in CSS.

	<code>	<kbd>	<samp>
Means	Computer code	User input	Program output
Example	`getElementById()`	`Ctrl`+`C`	`404 Not Found`




  
    FreeHTMLEditor.net
    
      Home
      Editor
      Tools
      Reference
      HTML Tutorials
      HTML Cheat Sheet
      What Is an HTML Editor?
      About
      Privacy Policy
      Terms of Service
      Contact
    
    © 2026 FreeHTMLEditor.net — All rights reserved.