Creating Links in the Content Management System

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.

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).

Many pages have the same name. A relative link to [Contact Us](contact.php) would work from any page within any of the housing/, boating-safety/, or wellness/ folders - but it would fail outside of that context.

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 inspired by **you**](/inspired-scholars/)
Full URL linked
https://hilo.hawaii.edu + /inspired-scholars/ = hilo.hawaii.edu/inspired-scholars/

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/)

Contact University Housing & Residence Life

[Contact University Housing & Residence Life](/housing/contact.php)

Contact the UH Boating Safety Program

[Contact the UH Boating Safety Program](/boating-safety/contact.php)

Contact Student Health and Wellness Programs

[Contact Student Health and Wellness Programs](/wellness/contact.php)

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

Paste an Instagram link directly When referencing a social media post, it is suggested to provide the channel/profile, as well as the specific post. For Instagram and Facebook posts that have been shared publicly, you should also consider embedding the post directly, so that it can be viewed in context on the page.

Should you want to refer to a specific account on a social media platform, create a link to their profile page. Consider the following example:

To enter, entrants must (1) follow and/or like: @uhhilo on Instagram, @UHHilo on Twitter, the University of Hawaii at Hilo Facebook page. --University Relations' Diversity Photo Contest

Refer to the best practices for social media pages for more information about sharing content on these platforms.

Best Practices

Link Text

All-caps text is to be avoided. There are better ways to draw attention to a link.

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:

Link Example Markdown Code Best Practice ?
https://hilo.hawaii.edu [https://hilo.hawaii.edu](https://hilo.hawaii.edu) Never
https://hilo.hawaii.edu <https://hilo.hawaii.edu> Rarely (used for citations)
UH Hilo [UH Hilo](https://hilo.hawaii.edu) Yes
hiloweb@hawaii.edu hiloweb@hawaii.edu No. Emails should be links
hiloweb@hawaii.edu <hiloweb@hawaii.edu> Always

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 Text Example Considerations Best Practice ?
Click Here Users on mobile devices cannot 'click'. They 'tap' Never
here, this page Does not provide context for link. What if there are multiple links on a page? Which one is here? Never
website, our website How would this appear on a page with multiple linked webpages? Use a more descriptive name. No.
STUDENT AFFAIRS All-caps text is to be avoided. It is considered shouting, and may not be pronounced correctly by screen readers. No
CAFNRM This is an appropriate use of all-caps text, because it is an abbreviation for the college, and would make sense read a letter at a time The included title attribute provides the full name of the college. Yes
Student Affairs Clear, concise context for the link. Always

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:

University of Hawai╩╗i at Hilo

[University of Hawai╩╗i at Hilo](/ "At UH Hilo, your journey is our focus.")

UH Hilo

[UH Hilo](/ "University of Hawai╩╗i at Hilo")

Ka Haka ╩╗Ula o Ke╩╗elik┼Źlani

[Ka Haka ╩╗Ula o Ke╩╗elik┼Źlani](http://www.olelo.hawaii.edu/ "College of Hawaiian Language")