Creating Links in the Content Management System

On this page:

There are several ways to create links to other pages. Some are called relative links, and others are called absolute links. Often, the same page can be linked in several ways.

Absolute Links

Any URL that starts with an https:// or http:// is an absolute link. Links to absolute URLs are generally longest, and they can be used anywhere. A good way to get the absolute URL for a page is to copy (ctrl / cmd + C) the address from the URL bar of a browser, and then paste (ctrl / cmd + V) in between the parentheses of the markdown link.

When you create a link using the link button, the parentheses will contain http:// already. i.e. [Link Text](http://) Replace this with the link you are pasting. The final link should contains only one http:// or https://.

Relative Links

Any link to a page on the same web server can use a relative URL instead of the fully qualified absolute URL. With a relative link, the link is the path from the current page to the target page. For pages that are in the same folder, that can simply be the page name, plus the extension - i.e. [Contact Us](contact.php).

To link to pages outside of your site section (folder), use leading slashes to specify which part of the UH Hilo website you want to link.

Leading Slashes

If you see a link that starts with the slash character, that means that the link is to another page on the same domain. The leading slash goes after the root of the website (hilo.hawaii.edu) to create a full URL.

Link code

[At UH Hilo, we are here to support **you**](/studentaffairs/counseling/)

Full URL linked

https://hilo.hawaii.edu + /studentaffairs/counseling/ = hilo.hawaii.edu/studentaffairs/counseling/

Often, the links in sidebar fragments use the leading slash convention. This means that the links in the fragment will work on any page where it is included, regardless of the path.

Example Links (will work anywhere on hilo.hawaii.edu/)

In-Page Anchors

Links can automatically direct visitors to a specific heading within a page using an anchor. Append an id to a heading by including a hash symbol and id within curly brackets after the heading text.

## This is My Heading {#my-heading}

Ids can be named however desired, as long as they follows a few special rules:

• Ids cannot have spaces in them, so use a dash or underscore instead of a space.
• Ids cannot have special characters like punctuation or quotes or other symbols. Only letters (a-z and A-Z), numbers (0-9), _ and - are allowed.
• Ids are case sensitive so #WhatsNext and #whatsnext are different ids.
• Ids must start with a letter so something like #15-reasons is not valid and something like #reasons-15 should be used instead.

To link to the anchor, use the id in the link URL.

• If the anchor is on the same page as the link, only the id is needed. E.g., [see Section A](#section-a)
• If the anchor is on a different page, simply include the id with that page’s URL. E.g., [Submit your feedback](feedback.php#submit)

Links to Email Addresses

To make a link to an email address, simply put the email address between the less than < and greater than > signs, and the email address will become a link: hiloweb@hawaii.edu. This method also works with fully qualified URLS (starting with http:// or https://) - so < + https://hilo.hawaii.edu/ + > becomes https://hilo.hawaii.edu/. However, linking to URLs in this manner is not considered best practice.

Linking to Social Media

Best Practices

Link Text

With rare exceptions, link text should be descriptive - not simply the website address. This can help with the accessibility or web content because it provides context for the link, rather than repeating the URL. Consider the following examples:

Every link needs to have text accompanying it, but determining what text can be challenging. Just pasting the website address is not sufficient. The table below shows some common link text examples, and discusses the merits of each.

Link Titles

Markdown supports the use of title attributes for links. Viewers using a mouse, trackpad, or stylus will see the title attribute when they hover over the link. Individuals using a screen reader will have the link title read to them aloud. While optional, this technique can provide additional context for the link, without interuping the flow of the content where the link is found.

Consider the following examples: