2

There are three types of link styling: line underline, dashed underline and dotted underline. What is the difference among them and in what cases each of them should be used?

Often I see dashed links do something without leaving the page, like just opening a pop-over on hover. Another example I saw is on website work.ua where you click on the dashed "accountant" link and that text is put in the search bar (but search button is not triggered) but underlined "Advanced search" links to another page. So I think there are some guidelines or common practice people follow.

enter image description here

Improve this question
3
  • 1
    The fourth link styling is non-underlined... There is no common convention, just be consistent within your system for the different styles to convey some meaning.
    – Alexey Kolchenko
    Jun 29, 2018 at 21:15
  • 1
    Be careful with the dotted, maybe even dashed underline. There is a html tag for abbreviations which is dotted underlined by default and could be mistaken. Take a look here w3schools.com/tags/tag_abbr.asp I generally use underline or/and colors often in combination with an icon
    – rhauger
    Jun 29, 2018 at 21:21
  • I would say the underline style is fairly dated now. As on this very page we tend just to use a consistent colour to show links. I guess there may be some visual issues for some people since it is just using colour for encoding which is not advised for accessiblity. But that does seem to be the visual design pattern nowadays.
    – Lisa Tweedie
    Jul 2, 2018 at 13:36

3 Answers 3

Reset to default
3

In general, there are three styles of links:

  • line underlined — default style of links - used to show possibility by clicking on it be navigated to a new page. In other words, user will leave current page and navigate to new one.
  • dashed underlined [dotted underlined is the same] - used to show new UI components without leaving current page. For example show login pop-up window or information tooltip. In other words, user gets new additional information and be not redirected.
  • links without underline - the same like line underlined links but according to design not underlined and typically user know that can click on it. For example logo, header of articles, tabs, etc..
Improve this answer
1

There are more ways of styling links than just "line underline", dashed underline and dotted underline. You can style links in any way defined in the W3C's Cascading Style Sheets (CSS) specification. For example:

  • Using the text-decoration-style property, you can apply a normal underline, a double underline, a dotted underline, a dashed underline or a wavy underline.
  • Using properties for borders, you can set a border at the top, right, bottom, or left of the link, or any combination of these (and choose different colours and thickness for each border, should you be so inclined),
  • Using background-related properties, you can change the background colour or even set a background image.
  • You can of course also set a different text colour from the surrounding text.
  • You can vary the above based on the link state (using CSS pseudo-classes), e.g. one style for unvisited links, another style for visited links, a third style for when the mouse pointer hovers over the link, a fourth style for when the link receives keyboard focus and a fifth style when the link is being activated (someone clicked on the link but the page has not yet disappeared).

That's a lot of options and freedom, and not all combinations and possibililties make sense if you want to make a website usable and accessible. In the "old days", when browser support for CSS was still limited, links were usually underlined. When CSS support improved and the use of navigation menus (to the left or right of the main content) increased, designers increasingly used colour instead of underlines to identify links.

Using JavaScript, developers also started using links to implement functionality that can be implemented using buttons, but for many years, browser support for styling buttons was very limited. Now that CSS support for buttons has improved, many developers still use links where buttons would be more appropriate (from a programming point of view).

In the screenshot from work.ua, the underlined words "accountant" and "sales" don't take you to a different page (or a different part of the same page) but fill in the underlined word in the form. So they need to be styled in a way that suggest that they do something without looking like (navigation) links. By contrast, the string "Advanced Search" works as a link and is implemented as a normal link. The issue in the screenshot is therefore how to distinguish between proper navigation links ("Advanced Search") and "links" that use JavaScript in order to work like buttons ("accountant"). Both real buttons (using the button element) and "fake" buttons (a elements with JavaScript event handlers) can be styled as buttons. However, if the conventional button style is rejected, there is no alternative convention to fall back on, as far as I know.

Improve this answer
0

There is no standard.

There are three types of link styling.

Why three? You can implement as many as you wish.

There is a common practice by indicating the previously visited links, a common practice to change mouse cursor on hovering link. But there is no common practice for underlining.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.