Stanford UniversityRequest a Site
Stanford Sites User Guide

Do More with the Text Editor

The text editor on your site is a powerful HTML editor. Along with accessing various styles through the toolbar, you can add and edit HTML directly.  

The text area allows a  subset of HTML tags and classes so that we can more easily maintain the usability and accessibility of your site. 

Edit HTML source code

The text editor creates HTML code from the styles and text that you add to the editor. There may be times you'll want to edit the HTML directly. Here's how to view and edit the HTML source code.

  1. Click Edit to begin editing your page
  2. Within the Body or Text Area toolbar of the WYSIWYG editor, click Source. 
  3. This will bring up a code editor that allows you to directly edit the HTML.
  4. When you're done you can either click Source to return to the text editor or simply click Save. 
Screenshot illustrating Doing more with the WYSIWYG editor

Format text as code

Sometimes you need to indicate that some of your text is code. There are two styles for formatting code. One will insert a code block, the other will format the text in a monospaced font. Both of these options can be selected from the Text Area toolbar.

Insert code block

This is best for formatting a whole chunk of code, but is not yet formatted for Stanford Sites. Stay tuned!

Format text as code

This is best for formatting a small snippet of text.

  1. Highlight the text you wish to format.
  2. Select Code 

Example: <h1>Page Title </h1>

Call out abbreviations with <abbr>

When using a new or unfamiliar abbreviation or acronym, use the abbreviation element <abbr>  to provide a full expansion of the term in plain text on first use, along with the <abbr> to mark up the abbreviation. This informs the user what the abbreviation or acronym means. Learn more about using <abbr>.

Given this HTML:

You can use <abbr>CSS</abbr> (Cascading Style Sheets) to style your <abbr>HTML</abbr> (HyperText Markup Language).

You will see:

You can use CSS (Cascading Style Sheets) to style your HTML (HyperText Markup Language).

To add an <abbr> element in the WYSIWYG:

  1. click on the Source button to edit the HTML
  2. find the abbreviation 
  3. Surround the acronym with <abbr> before and </abbr> after Screenshot illustrating Doing more with the WYSIWYG editor

Related Topics

Call out other languages with "lang"