<code>: The Inline Code element #
::: section-content
The <code>
HTML element displays its contents styled in a
fashion intended to indicate that the text is a short fragment of
computer code. By default, the content text is displayed using the
user
agent's
default monospace font.
:::
Try it #
::: section-content ::: iframe ::: {.output-header .border-rounded-top}
HTML Demo: <code> #
Reset :::
::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::
::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::
::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML
CSS
JavaScript :::
::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}
The push() method adds one or more elements to the end of an array and returns the new length of the
array.
::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} code { background-color: #eee; border-radius: 3px; font-family: courier, monospace; padding: 0 3px; } ::: :::
::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::
::: {#output .output-container}
Output #
::: :::
::: {.section .console-container .hidden aria-hidden=“true”}
Console Output #
![] clear console
::: {#console .console} ::: :::
::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::
Attributes #
::: section-content This element only includes the global attributes. :::
Examples #
::: section-content
A paragraph of text that includes <code>:
::: code-example [html]{.language-name}
<p>
The function <code>selectAll()</code> highlights all the text in the input
field so the user can, for example, copy or delete the text.
</p>
::: :::
Result #
::: section-content ::: {#sect1 .code-example} ::: iframe ::: ::: :::
Notes #
::: section-content
To represent multiple lines of code, wrap the <code> element within a
<pre> element. The <code> element by itself only represents a
single phrase of code or line of code.
A CSS rule can be defined for the code selector to override the
browser's default font face. Preferences set by the user might take
precedence over the specified CSS.
:::
Technical summary #
::: section-content
| Content categories | Flow content, phrasing content, palpable content. |
|---|---|
| Permitted content | Phrasing content. |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents | Any element that accepts phrasing content. |
| Implicit ARIA role | code |
| Permitted ARIA roles | Any |
| DOM interface | HTMLElement
Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement
interface for this element. |
Specifications #
::: _table #
Specification #
HTML Standard
[#
the-code-element]{.small}
:::
Browser compatibility #
::: _table Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
code 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0
:::
See also #
::: section-content
::: _attribution
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5
or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code{._attribution-link}
:::