Making external and internal links

When visiting sites, I would like everything on them to be clear and understandable, and since I sometimes have to do Sat design, I offer a little help in this. Here I will describe my thoughts on the designation of certain types of links. I think this topic will be most useful for beginner web designers.

External links

In my opinion, external links should be separated into a separate group, and they cannot go on a par with links pointing to the internal pages of the site, or to internal links. Therefore, at least for the convenience of users, they should be allocated. There are few ways to highlight links, it can be: highlighting in a different color or adding a small icon next to the link. Let's consider them in more detail.

Highlighting.
In this case, just add a color-changing class. But in the case when the user adding the content does not know about it, we immediately encounter a problem - how to calculate an external link? You can correct the situation using regular expressions: #is', " \\ 4", $ link_str);

$link_str = preg_replace (
'#\(.+?)\


The disadvantage of this method is that it works on the server side, but I see it as the most
optimal.

Adding icons to the link
Here you can implement this technique in one or two ways at once: also with regular expressions (just adding the code-image function to the second part) and using JavaScript. I am using jQuery, so I will give an example on it. We first draw our links through the regular expression and assign the outsite class to them , then use jQuery: Result: If you consider it necessary, you can add target = "_ blank" .

$(".outsite").append("");

Internal links

I have seen very few sites where you can somehow identify internal links. But this omission often leads to difficulty, or the user simply skips these links. Again, there are two, the most optimal ways to highlight internal links.

Underlining with a stroke I
didn’t have to go far for an example - Artemy Lebedev's studio website has been doing this for a long time . Indeed, the method is as simple and straightforward as possible, especially since , underlined by a stroke, is a rarity.

Icon
Sometimes it is simply necessary :)


PS: Also, do not forget that links in general should be highlighted in color from the main sext :)