Insert Links

This page describes how to insert links. Included are an explanation of the different types of links.

Create Web address links   

Web address links connect to another page on the Internet.

Hyperlink dialog box - input external or non-CMS pages, browse to CMS pages  

  • Fill in the fields.
  • Link Text - The "link text" is the text that will be underlined on your Web page. For example, this link would read  closed overnight .

    Type - Your link type will almost always be "http:" There may be occasion to use "ftp" when linking to files on the ftp server. 

    Target - The target is the manner in which the link will open. In most cases, you'll leave this field blank. The default is for the link to open in the same window. 

    Open a new browser window only if no navigation exits on the page they go to, or if the page disables the back button. Otherwise, have link open in same browser window.

    Tool tip - The tool tip is text that will appear when the mouse cursor is placed over the hyperlink (text or image). 

    You'll notice the wheelchair icon next to this field - this denotes the tool tip aids in making your site more accessible.

    Wheelchair icon denotes items that aid in web accessibility

    CSS Class - This allows you to choose a CSS class for your link. You could select "sub link" to tag your hyperlink as a sub link within the page.

  • Click OK .
  • Test your link.

top top

Create email links  

Email links open the default email application on your computer and create a new email message addressed to the provided addresses.

Make sure and insert the email address, the link text and the subject into the hyperlink dialog box.

  1. Select the text you'd like to link from. With email links, this is usually the recipient's name.
  2. Click on the Link Manager .

    Insert a hyperlink by clicking on the Link Manager button.  
  3. Select the Email tab near the top of the dialog box

  4. Address - Input the email address of the recipient.

    Link Text - This is the text that will be underlined as a link. If you selected text before you clicked the hyperlink button, this text will appear here.

    Subject - Input text that will appear in the subject line of the email. If the email link is on a page about creating hyperlinks, put " Need Help With Links " so the recipient knows the reason for the email.

  5. Click Okay .
  6. Test your link.

top top

Create anchor links

Anchors are used to navigate within the same page. Anchors are especially useful for long Web pages - allowing the user to jump from one section of a page to another.

It's a two-step process to input an anchor link:

  • Define your anchor, or the location on your page you'd like to jump to.
  • Insert anchor link that will jump to your anchor.

To define the anchor

  • Choose a keyword
  • No spaces
  • One or two words
  • Unique enough that you won't use it again
  1. Put your cursor where you'd like to define your anchor.

    It's best to define an anchor one line above where you'd like the screen to jump.
  2. Input a couple of spaces to have something to select and tag. This gives you some white space between the browser window and the location, as well.
  3. Click on the Link Manager button.

    Insert a hyperlink by clicking on the Link Manager button.  
  4. Select the Anchor tab near the top of the dialog box.

    The Anchor Tab is between the Hyperlink and Email Tabs in the Hyperlink Manager.  
  5. Insert a name for your anchor.
  6. Click OK .

To insert an anchor link 

  1. Select the text you'd like to the link from.
  2. Click on the Link Manager button

    Insert a hyperlink by clicking on the Link Manager button.  
  3. From the Existing Anchor list, choose your anchor.

  4. Click OK .

top top

Insert To Top links

To return to the top of a page with one click, insert a To Top link. Use  To Top links on very long pages at the end of each section.

Note: On the WSDOT intranet, To Top links are created in a different way. Refer to the Intranet Web Toolkit for details at:

Insert ToTop link from Code Snippet menu

  1. Place your cursor at the location on the page where you want to add a top top  link.
  2. On the CMS toolbar, select the Insert Code Snippet button.

    Code Snippet button
  3. Choose "ToTop" from the Code Snippet drop-down menu .
  4. The To Top link is added to the page.

top top

Link Tips 

  • Avoid links that say Click Here

    These type of links were needed when the Web was first created.  For the last several years, usability tests show us a better way is to use the keywords your audience is looking for as your link text.  This will resonate with them and they will click through to your information.

  • Create links that are contextual

    The user should be able to see the link out of context and have some idea of what they will be getting when they click on the link. For example: Avoid problems with Web links by managing their placement within the context of your document.
  • Use keywords in your links

    When possible, use keywords  in your hyperlinks. Hyperlink text is used in ranking your page in search results. The more keywords in your hyperlinks the better the searchability .
  • Label your links

  • If you link to anything other than another Web page, you should specify the type and size of the file. 

  • Don't underline text that doesn't link

    Ever tried to click repeatedly on underlined text, only to find it's not a link? Underlining should never be used online - unless it's a link.
  • Open new browser or not?

    Open a new browser window only if no navigation exists on the destination page or if that page disables the back button. Otherwise, links need to open in same window (which is the CMS default).

Need assistance with a Web link, anchor link, email link or to top link? Contact WSDOT WebHelp .

top top