Code snippet

When exposing code, use the patterns below. If the code is brief — an element, an attribute, a value, or a single combination of those — the code may be embedded using <code>.

Code blocks are displayed with <pre><code>, where <pre> has the code class, and rel is the language the code is written in.

Add the translate="no" attribute to prevent webpage translators from attempting to translate the code into other languages like French or Mandarin.

HTML code

Example layout for HTML code.


<pre rel="HTML" class="code" translate="no">
<code>
<span class="nt">element content</span>
</code>
</pre>
Element components
"nt"
Attribute components
"na"
Attribute values
"s"

CSS code

Selector
"nt"
Property
"cp"
Value
"cv"
Punctuation
"p"

@media query {
 selector {
  property: value;
  /* syntax */
 }
 body {
  font-family: sans-serif;
  /* going basic */
 }
}

JS code