Making external and internal links

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

External links

In my opinion, external links should be allocated in a separate group, and they can not go even with the links pointing to the internal pages of the site, nor to internal links. Therefore, at least for the convenience of users, they should be allocated. There are few ways to select links, it can be: highlighting with a different color or adding a small icon next to the link. Consider them in more detail.

Highlight color.
In this case, it is enough to add a class that changes color. But in the case when the user who adds the content does not know about it, we immediately encounter a problem - how to calculate the external link? To correct the situation, you can use regular expressions:
')
$link_str = preg_replace (
'#\<a(.+?)href=["|\']http://(.+?)["|\'](.+?)>(.+?)\ $link_str = preg_replace (
'#\<a(.+?)href=["|\']http://(.+?)["|\'](.+?)>(.+?)\ <a (. +?) href $link_str = preg_replace (
'#\<a(.+?)href=["|\']http://(.+?)["|\'](.+?)>(.+?)\ ["| \'] http: // (. +?) [" $link_str = preg_replace (
'#\<a(.+?)href=["|\']http://(.+?)["|\'](.+?)>(.+?)\ '] (. +?)> $link_str = preg_replace (
'#\<a(.+?)href=["|\']http://(.+?)["|\'](.+?)>(.+?)\ #is',
"<a href=\ classhttp://\\2\ class=\ outoutsite\ \\1 \\3> \\ 4", $ link_str);

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

Adding to the link icons
Here you can implement this technique in one of two ways at once: also using regular expressions (simply adding image-image code to the second part of the function) and using JavaScript. I use jQuery, so I'll give an example on it. First we will run our links through a regular expression and give them the class outsite , then use jQuery:

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

Result:

If you see fit, you can add target = "_ blank" .

Internal links

I have seen very few sites that can identify internal links in any way. 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.

Underline
I didn’t have to go far for an example - on the website of Artemy Lebedev’s studio they have been doing this for a long time. Indeed, the method is as simple and clear as possible, especially since , underlined by a stroke, - a rarity.

Icon
Sometimes it is just necessary :)


PS: Just do not forget that links in general should be highlighted with color from the main sixth :)