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.

*Adding a title to your document link

When a site visitor encounters a link on your site, you'll want them to know when a link is to a document and not another page. Here are some recommendations:

If you don't change the title of the document

When you add a document to the site, you have the option of changing the title. If you don't provide a title, the filename including the extension will display. The extension sufficiently indicates that the link is to a document, in this case a PDF:

samplepdf.pdf (28.37 KB)

 

If you do change the title 

When uploading your document to the site and you do change the title, we recommend that you indicate in the title that it opens a document, i.e. (opens <document type>):

 

If you link directly to a file

This is the preferred approach providing access to files on your site. It is a little different that the previous approaches as it allows access to the file through a URL and not as a media file.

For example, suppose you want to link to a file in Google Drive or Box. You'd navigate to the file, get the URL, then add the link using the steps in the section above entitled Adding links to text within a text area. For the name of the link you'd want to indicate that it's to a document, i.e. (opens <document type>):

Sample document (opens PDF)

 

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.

Learn more about anchor link text and jump-links