Create Links in Text

You have many options for adding links to text. You can link to an internal page, an another website, you can create email links and link to internal documents or files on a service like Google Drive.

This guide covers how to add links in a text area, like the Text Area Paragraph or a Body field.

Automatic links

Anything that has the format of a URL (https://....) or an email address (with an @ symbol) will be automatically linked by the text editor. For all other cases, see below.

Adding links to text

Make your link text accessible: Because screen reader users and other users of assistive technology will navigate a page solely by the links, avoid using "Click here" or "Read more." Instead, keep link text as descriptive as possible and communicate the purpose of the link. Learn more about writing link text.

1. Select the text you would like included in the link.
2. Click on the Link button in the Text Area toolbar to open the Add Link tool.
3. In the URL field you can:
   • To link to a page on your site or a file you have uploaded, start typing the name of page or file. Then select from the list.
   • To link to an another website, enter the entire URL, starting with "https://"
4. Press tab to the green check mark and then enter or click the green check mark to save
5. Verify your link works as expected.

To link to an existing page on the site, type the name of the page into the "Link URL" field. A list of suggestions will display below the input field. Click on the page you wish to link to and then click the green check mark.

Update a link

If you need to change the destination for a link, click on the link in the text editor. This will bring up the link toolbar. Click on the pencil icon. 

You can then start to type a new page title or enter an external URL. When you are done click the green checkmark.

Adding links to email addresses 

As mentioned earlier, anything that looks like an email address will automatically become a mailto: link.

Email ("mailto") links can 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. For example:

Report phishing

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.
3. In the URL field, add "mailto:" followed by the email you would like to link to. For example: mailto:spam@stanford.edu
4. Click Save.

Linking to documents

You can link to documents such as PDFs and Word documents from your site. If you have a large quantity of documents, we recommend hosting them externally on Google Drive for storing and managing them. However, you can also upload and store documents directly on your site using the Media Library. For instructions on adding documents to your media library, see Adding a file. When documents are stored on your site they will be available for accessibility scanning by Siteimprove. 

When creating a link, you'll want to let the user know what to expect. When linking to a document you'll want to let the user know the type of document and size. We suggest providing the document name, type, and size as follows:
[name] ([document type], [size]).

For example: Sample document (PDF, 1MB)

Embedding documents (files) from the Media Library

When you upload a document to your site, you can add a simple link to it in the text editor. Using this approach will display the filename and size of the document, and will appear as:

samplepdf.pdf (28.37 KB)

1. Place your cursor where you'd like the link to appear
2. Click on the Media Library button
3. Select media type File
   
4. Either upload a new file or select an existing file. 
5. Save and insert the file.
   

Linking to documents in the Media Library

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.
   

    

4. Once your desired document appears, select it.
5. Click Save, and your link should appear as follows:

Sample (PDF, 30KB) 

Linking to external documents

When linking to a document hosted externally, it is linked to as a URL and not as a media file.

To Link to a file in Google Drive or Box:

1. Navigate to the file
2. Copy the URL
3. Add the link using the steps in the section above entitled Adding links to text within a text area

Tips

Adding a link to the homepage (front page) of your site

In the WYSIWYG editor, to link to the home page just use a forward slash, i.e., /. 

Adding a link using shortcuts

Keyboard shortcuts can also be used to add a link. 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. This keyboard shortcut can also be used to modify existing links.

1. Highlight the text area you would like included in the link.
2. Type the keyboard shortcut (Mac: "command" plus "K", PC: "Ctrl" "K") to open the Link modal.
3. Add the URL
4. Click Save.

How do I create an anchor link?

In some cases, you may want to create a destination or anchor link, a "jump link." This can be done by adding an id="<anchor-name>" attribute to a header.

Learn more about adding jump links

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.