Portland Community College | Portland, Oregon

Technical

Technical typographic elements have limited use on the website. They’re generally found on instructional pages for faculty and staff, or on Web Services pages.

Jump to a component:

• PRE
• Code
• KBD
• SAMP

PRE

Use <pre> for embedding chunks of code on a page, while maintaining the code’s exact structure and any characters you insert, such as brackets or line breaks.

Styling

<pre> displays the text in a gray box and uses a monospace font.

How to use for PRE

Add in the HTML (see “development info”).

<pre>
  Content
</pre>

$(document).foundation();

Code

Use <code> for small snippets of code that you want to appear on a web page. <code> won’t maintain your code’s structure and will put all your content on one line, ignoring line breaks (but will maintain characters such as brackets).

Styling

<code> displays the text with a gray background and with a monospace font.

How to use for Code

Add in the HTML (see “development info”).

<code>Text</code>

KBD

Use <kbd> for describing keyboard input.

Styling

<kbd> displays the text with a gray background and with a monospace font.

How to use for KBD

Add in the HTML (see “development info”).

<kbd>Text</kbd>

SAMP

Use <samp> for sample output from a computer program.

Styling

<samp> displays the text with a gray background and with a monospace font.

How to use for SAMP

Add in the HTML (see “development info”).

<samp>Text</samp>