Skip to main content Skip to secondary navigation

How do I add links to text?

Main content start

Stanford Sites comes with many options for adding links to text, including email links and internal documents

Adding links to text within a text area

  1. Highlight the text area you would like included in the link.
  2. Click on the Link button in the Text Area toolbar to open the Add Link modal.
  3. In the URL field, add the url of the web page (internal or external) you would like to link to.
  4. Add a Title if desired.
  5. Click Save.

Adding a Link to the Home (front page) of your site

In some text edit fields on your site you can use <front> to create a link to your home page.

In the WYSIWYG editor, to link to the home page use /. If you use <front> you will get an HTML error and the link will not work.

  1. Highlight the text you want to link and click the link icon in the WYSIWYG editor. (To edit an existing link, right-click on the link and choose Edit Link.)
  2. Click in the URL field and type / then press ESC to close the drop-down list of pages. 
  3. Click OK.
Screenshot of WYSIWYG Link Info dialog box.

Email Links

Email ("mailto") links can also be added to text within text areas, as well as other paragraphs. Email links will be displayed with an email icon that is added automatically.

email link

Adding email link within Text Area

Option 1: Clicking Link Button

  1. Highlight the text area you would like included in the email link.
  2. Click on the Link button in the Text Area toolbar to open the Add Link modal.
    adding email link
  3. In the URL field, add "mailto:" followed by the email you would like to link to. For example: mailto:jane@stanford.edu.
  4. Add a Title if desired.
  5. Click Save.

Option 2: Adding email link using shortcuts

Keyboard shortcuts can also be used to add an email link in a slightly different manner as option 1. For mac, the shortcut is "command" plus "K", and for PC, the shortcut is "Ctrl" plus "K" (Chrome recommended). Using these shortcuts will open up a link modal with a few extra options. This keyboard shortcut can also be used to modify existing links.

  1. Highlight the text area you would like included in the email link.
  2. Type the keyboard shortcut (Mac: "command" plus "K", PC: "Ctrl" "K") to open the Link modal.
    adding email link
  3. Add the text you want displayed under Display Text.
  4. Select E-mail in the Link Type dropdown.
  5. Enter the email address under E-Mail Address.
  6. Exit the Link modal and paragraph.
  7. Click Save.
     

Adding email links within other paragraph types

Many paragraph types offer a URL field without an Add link modal. You can still add e-mail links into these fields, following a similar approach as option 1 for the text area.

  1. In the URL field, add "mailto:" followed by the email you would like to link to. For example: mailto:jane@stanford.edu.
  2. Add required Link text.
  3. Click Save.
    adding email link

Adding internal documents to text as links

File documents added to your media library (txt, rtf, doc, docx, ppt, pptx, xls, xlsx, pdf) can also be linked to in your text. For instructions on adding documents to your media library, see How to Add Media.

  1. Highlight the text area you would like included in the link.
  2. Click on the Link button in the Text Area toolbar to open the Add Link modal.
  3. In the URL field, start typing the Media Name for the document you are trying to link to. Suggestions of documents will appear as you continue to type.

 

 

 

  1. Once your desired document appears, select it.
  2. Add a Title if desired.
  3. Click Save.

Troubleshooting Links

How do I remove email links if they are displayed unintentionally?

In a few use cases, an email link (with mail icon) may unintentionally appear on non-linked text after the page is saved. For example, this can occur for some code snippets or examples that include the @ sign. In these situations, you can remove the email link and icon by wrapping the text in a <code> tag.

  1. Within the Text Area WYSIWYG toolbar, Click Source to display your Text Area as HTML.
  2. Find the text that is unintentionally displaying the email link, and wrap it with an opening <code> tag and a closing </code> tag. 

Does having a hidden anchor text link need accessibility checking?

Yes. In some cases, you may want to hide an anchor text link, but this poses accessibility concerns. By adding an <id> tag you can make sure this link remains accessible. This can be done using the HTML source code. Note that this is not possible to do using the WYSIWYG editor.

  1. Add an <id> to the <Header> tag of the anchor link and hit Save
  2. Hidden anchor text link is now accessible.