Creating Links in the Content Management System
Any URL that starts with an
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
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.
Many pages have the same name. A relative link to
[Contact Us](contact.php) would work from any page within any of the
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.
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](/housing/contact.php)
[Contact the UH Boating Safety Program](/boating-safety/contact.php)
[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: email@example.com. This method also works with fully qualified URLS (starting with http:// or https://) - so
> becomes https://hilo.hawaii.edu/. However, linking to URLs in this manner is not considered best practice.
Linking to Social Media
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:
Refer to the best practices for social media pages for more information about sharing content on these platforms.
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 accessibiliy 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 ?|
||Rarely (used for citations)|
||No. Emails should be links|
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 correclty by screen readers.||No|
|CAFNRM||This is an appropriate use of all-caps text, because it is an abbreviaton 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|
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: