UH Hilo Content Management System

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.

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

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)

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

Linking to Documents

The Asset button To link to a document, the document needs to first be available online. Use the 'Assets' button to upload a file to the Content Management System, or select a file that has already been uploaded. This will insert a blank link into the page, with a link to the document. The Assets button is also used to add images to a page.

Sample output from file uploadOnce uploaded, a blank link to the document will be placed on the page, with a link to the file.

Please note: The uploaded document will not have any link text. You need to enter a link description between the square bracket - [ and ] - for your link to become visible / clickable.

Sample link to a file, with link text filled inFor it to be useful, the link needs to contain a text description between the [square brackets] - which is what visitors will see/click.

Screenshot of rendered link to 2023 Accreditation reportWhen published, the visitor will only see the link text between the square brackets: [ ]

When creating link text, remember that links must make sense out of context, and use descriptive language. Avoid link text such as 'here' or 'document' or text that is already used for another link. Please see the Best Practices for link text for more examples.

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 Does not provide context for the link. Where will this link lead me if I tap on it? Never
here, this page Does not provide context for the 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 can be read letter-by-letter by screen readers. Instead, consider bolding the text you want emphazize. 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")