Skip to main content Skip to secondary navigation

Do more with the text editor

Main content start

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

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:

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

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

Lang attribute resources

Here's more on the lang attribute

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 will see:

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

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.