Link Label Text Label… Click Here… Image Image Lorem Ipsum Lorem Ipsum A Link, which is formally called a Hyperlink, is a reference point to another webpage, document or section of a webpage. Clicking or tapping on the link takes the user from the current page to the linked page, document or picture specified by the link. Links appear as a colored or underlined word or sentence in a section of text. It can also come in the form of an image or small animation such as in a webpage banner ad. On link hover, the cursor will change from an arrow to a pointing hand. There are two kinds of links: Internal links, defined as links that point to another page on the same site. External links , defined as links that point to a page on another site. (An icon is typically used to differentiate an internal link from an external link). Annotated Wireframe Simple text, most commonly blue in color and underlined upon mouse hover 1 Label Use when Do not use when Navigating to different locations within or out of the current system. Navigating to different locations on the same page. Performing an action, like Submit, Edit, Delete, etc. Instead, use a Button. Actions affect the website’s back-end or front-end. Instead, use a Button. Variations & Best Practices Text Link Text Label… Click Here… Don't Simple text, blue in color Underlined upon mouse hover Do not use “Click Here” as the text label. Image Link Image Image Simple Image on a webpage Visual difference upon mouse hover Animation Link Lorem Ipsum Advertisement Lorem Ipsum Advertisement Animation Animation Simple animation on a webpage Visual difference upon mouse hover Hotspot / Anchor link Hotspot 2 Image Hotspot 1 Simple image on a webpage with multiple hotspots / links to different locations. Research Summary A web browser usually displays a link in some distinguishing way, e.g. in a different color, font or style. The behavior and style of links can be specified using the CSS language. The appearance of a mouse cursor may change into a hand motif to indicate a link. In most web browsers, links are displayed in blue text when they have not been visited, and purple text when they have. Models Cited Google Search Wikipedia IBM Knowledge Center Amazon.com Related Patterns Buttons Basic List