Search code examples
htmlcsssemantic-markup

Using "border-bottom" instead of "text-decoration" for hyperlinks - is it semantically correct?

I see two ways to create underlined links:

  1. To use text-decoration:

a:link {
  color: blue;
  text-decoration: 1px underline red;
}
<a href="#">visit hjkl.org for Vim tricks</a>

  1. To disable text-decoration and use border-bottom instead:

a:link {
  text-decoration: none;
  color: blue;
  border-bottom: 1px solid red;
}
<a href="#">visit hjkl.org for Vim tricks</a>

As you see, the appearance is slightly different.

Is the version that uses border-bottom semantically correct? (This is my question.)

On the one hand, borders are not really a part of HTML markup, so we cannot say that such markup is semantically wrong. The markup is actually the same.

On the other hand, the names of text-decoration and border-bottom properties are in fact semantic. We don't call them property-1 and property-2.

So, back to my question, is the second version semantically correct or not?

Solution

  • HTML semantic has nothing to do with CSS styles. Semantic is concern with using the right tag for the job, and since you are using an anchor element for a link, your code is semantically correct. Now, the rule of thumb when talking about accessibility is that each element should be visually differentiated from each other, but using more than just color. As long as you are using another visual cue (apart from color) to differentiate your link from the text around it, you are good to go, and using a border is definitely a good example of that.