Working with links

Background

Fundamental to the structure of websites and the internet are hyperlinks between page destinations. There are multiple ways to create links in the Drupal Kit. This page provides both generalized and specific instructions for linking techniques.

Contents

Link to an external web page

Type or paste the URL for the external web page. Include the prefix https:// as shown below.

Link to a page in your site

To link between pages on your website, do not paste the URL of the web page as you would with an external link (above). Doing so would mean that if the URL of the page changes in the future, the link you created would point to a nonexistent destination. Instead, use the link autocomplete functionality shown below to find the page. This method ensures that the system stores the link correctly.

Link to an email address

Type or paste a valid email address string into the URL field:

Set a link to open in a new tab: link fields

On blocks that include link fields, set the link to open in a new tab using the interface shown below:

Set a link to open in a new tab: rich text editor

See How to add icons and buttons to links.

Append an icon to a link: link fields

On pre-built blocks that include links, icons can be appended as shown below. Their purpose is to enhance the user experience by indicating link behavior. These options are managed by ITS and cannot be changed.

• Authentication required icon: Indicate that a visitor must authenticate to access information at the link destination

• External link icon: Indicate that the link leads to a different website. Choosing this will not automatically cause the link to open in a new window. See below.

• Right-facing caret: This does not have an explicit meaning; it is largely decorative.

Append an icon to a link: rich text editor

See How to add icons and buttons to links.

Create links using the rich text editor

To add or remove links:

1. First select the text you want to make into a link, or remove a link from.

2. Click the “Link” or “Unlink” icons (highlighted below) in the toolbar.

See also: How to add icons and buttons to links.

Link to a part within a web page (anchor link)

It is possible to create a link that navigates to any heading within a page.

1. Locate the desired heading within the webpage.

2. Right-click the heading and select “Inspect”.

3. Note the HTML id value adjacent to the header text. In the example below, the id is why-is-accessibility-important:

4. Construct the link to this heading by appending # and the id to the path. From the example above, if the page path was /about, the anchor link would be /about#why-is-accessibility-important:

Example

• The URL https://demo.drupalkit.its.utexas.edu/typography navigates to the top of the page

• The URL https://demo.drupalkit.its.utexas.edu/typography#links navigates to a heading within the page

See also

For more information on anchor link syntax, see https://html.com/anchors-links/