Stanford
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 other languages with "lang"

If the text in your website uses multiple languages, you'll want to indicate what language is being displayed. The lang attribute is used to identify chunks of text in a language that is different from the document’s primary language. For example, this page you are reading is written in English and screen readers will announce the text in English. The lang attribute identifies the language of text content and informs the screen reader to announce text in the correct language. 

Given this text in French:

Sauf pour ce qui est écrit en mauvais français.

Using inspect through the browser, you can see the lang attribute in action. 

<p lang="fr">Sauf pour ce qui est écrit en mauvais français.</p>

To add the lang attribute in the WYSIWYG,

  1. click on the Source button
  2. find the non-English text, in this example it's French
  3. within the <p> tag add lang="fr"

This will work with other HTML elements, such as <span>, as well.

If you have multiple non-English paragraphs on a page, add the lang attribute to all the <p> tags

Note: When the lang attribute is missing, it violates SC 3.1.1:Language of Page (Level A).

Lang attribute resources

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

Accessibility Commitment

Stanford Web Services (SWS) is committed to providing a Stanford Sites environment that enables site owners to build and manage websites that are accessible to everyone and adhere to Stanford's online accessibility policy.