UW Brand

Hyperlinks and anchor tags

Hyperlinks

A hyperlink allows users of a website to access webpages, files (such as a downloadable PDF document) or specific headers within a page.

Hyperlink: on text

To link text, use the code tag <a> ... </a> to input the URL to link to text, as shown in the template below.

Figure 1 shows how hyperlinked text would look when a user hovers over it. In this example, the presentation title turns to a gold color and when clicked, indicating the user is linked to the presentation slides that they can download. Also, note that the presentation title is a header, so it will be placed in the <h3> ... </h3> code as well.

This shows how hyperlinked h3 text turns gold when you hover over it.

Figure 1. Shows the way text is highlighted in gold when a user hovers over it indicating it is a hyperlink.

Code Template

<a href="URL of document/content linked to text">Text that is linked</a>

Example

<h3>
<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/
158/2018/08/23185657/How-Curriculum-Word-Redefines-Technical-Faculty-Roles-in-
the-Community-College.pdf">How Curriculum Word Redefines Technical Faculty
Roles in the Community College</a>
</h3>

Hyperlink: on image

Images can also be linked through a similar process. The only difference is that the code <img> would be placed right after the URL in the <a> ... </a> code, instead of linked text.

Hyperlinking an image should lead to a relevant document for the image or bigger version of the image to be seen or downloaded, and should not be used to link to external sites or pages within the site unless it is necessary. The example in Figure 2 links the presentation slide preview to the presentation document.

The is a screenshot of a tile where the image in it is linked to a document.

Figure 2. The image above is linked to the document for this content.

Code Template

<div>
<a href="URL of document/content linked to image and opens when image is
clicked">
<img class="Alignment position for image" src="Image source/location" alt=
"Description text of what the image is (for accessibility)" width="Image 
width" height="image height"/>
</a>
</div>

Example

<div>
<a href="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/
158/2018/08/23185657/How-Curriculum-Word-Redefines-Technical-Faculty-Roles-in-
the-Community-College.pdf">
<img class="alignleft" src="https://s3-us-west-2.amazonaws.com/uw-s3-cdn/wp-
content/uploads/sites/158/2018/07/17194946/nsf_ccri_homepage_image.png" alt=
"Image of NSF presentation: Faculty development to obtain student success:
learning across national science foundation grant projects" width="300"
height="300"/>
</a>
</div>

Anchor Tags

This image highlights how the Research to Practice section is located towards the bottom of the page and through an anchor tag users can navigate straight there.

Figure 3. The site homepage takes the users straight to the “Research to Practice” section using an anchor tag, as opposed to scrolling from the top of the page.

Anchor tags are traditionally used to send a user to a specified location on a page, using a custom URL. This feature becomes very useful for pages with a lot of content. Users will no longer have to start from the top of the page and scroll down for their content, and can now directly go to the information they want to access.

For example, users can navigate straight to the Research to Practice section on the CCRI homepage, without having to scroll all the way down (Figure 3). There are two ways to implement anchor tags, described below.

Anchor Tags using ID

The first method is to assign an ID for the allocated content on a site page. The example code below labels the Research to Practice header using id="CCRI-research-to-practice", into the usual <h2>Research to Practice</h2> header code, as shown. This will allow the user the jump right into the Research to Practice section in the homepage.

Code Template

<h2 id="anchor tag name">header title</h2>

Example

<h2 id="CCRI-research-to-practice">Research to Practice</h2>

After the above code is implemented, links can be shared in the following format:

Template URL – www.sitename.com/#anchorTagName

Example URL – www.washington.edu/ccri/#CCRI-research-to-practice

Anchor Tags using a hyperlink tag

Another reason for implementing anchor tags in the CCRI site is for site pages that list many publication documents. The documents are sectioned into accordions, making the process a little more complex than the first method, but the following explanation will elaborate.

The example navigates the user to go directly to the “Briefs” section in the accordion, in the Coaching for Change page (Figure 4). To allow this, the code <a name="anchor tag name"></a> will be added into the accordion. The <a></a> tag is typically used to hyperlink URL’s into text, but in this case it will be used to link a section of a page.

This image highlights the Briefs accordion that the example anchor tag will navigate to.

Figure 4. Creating an anchor tag inside <a></a> tag will enable users to be directed straight to the designated accordion section.

Though the accordion will not open up, it will still enable users to go directly to the section they want to, and even create an opportunity for them to explore other publications.

Code Template

[accordion]
<a name="anchor tag name"></a>
[section title='Title of accordion section']
Accordion content
[/section]
[/accordion]

Example

[accordion]
<a name="briefs"></a>
[section title='Briefs']

<a title= "Evidence-based Coaching for Change Brief" href= "https://s3-us-we st-2.amazonaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2018/08/23173409/ cfc-Coaching-BRIEF_CCRI.pdf">Evidence-based Coaching for Change Brief<⁄a> This brief provides theories, perspectives and insights into evidence-based coaching for 2-year colleges to implement, continuously improve, and sustain coaching that focuses on improving performance and results in more equitable outcomes for students.
<a title= "Equity-Minded Change Leadership" href= "https://s3-us-west-2.amaz onaws.com/uw-s3-cdn/wp-content/uploads/sites/158/2018/08/23173407/cfc-equity brief.pdf">Equity-Minded Change Leadership<⁄a> There are many ways to think about change leadership and many theories to describe how it should work. Many promote the notion that leaders who readily adapt to new circumstances are most successful in changing their organizations, but this is only part of the necessary skill set. This brief discusses equity-minded change leadership that identifies institutional and systemic causes of inequities in student outcomes to bring about real change.
[/section] [/accordion]

After the above code is implemented, links can be shared in the following format:

Template URL – www.sitename.com/path/#anchorTagName

Example URL – www.washington.edy/ccri/path/#briefs