Detailed explanation of the difference between rel and target of links_Experience exchange

Whether the existence of target="_blank" is necessary or not, I think there are still many people in a blind spot. I checked the relevant literature and found that the situation is not what we thought. In fact, target="_blank" is not substandard, and the solution using rel and JS is not necessary because this is a misunderstanding. As long as we understand the true meaning of rel and target, we will understand that there should not be any controversy here. Below I will share with you the knowledge I gained from reviewing the literature. Let's first understand the meaning of target and rel:

target allows you to specify where to display the selected hyperlink content. That is to say in what window the linked content will be displayed. The attribute value of target has four reserved names, namely: _blank, _self, _parent, _top. _blank means that the browser always loads the document linked by target="_blank" in a newly opened, unnamed window. You may not understand what "unnamed" means here. In fact, target can assign an ID to the newly opened window, for example: target="name" This means that the document loaded through the target="name" link will be displayed in a window called "name". If there is no window with the ID "name", the browser will create a new window named "name" to display the linked document. If the ID of the current window is "name", then the linked document will be displayed in the current window replacing the original content. _self actually means the current document, and the default target of is _self. This attribute value is generally not used. _parent causes the linked document to be displayed in the parent window. This attribute value is only used in the frame structure. If it is a top-level frame, its function is the same as _self. _top is also applied in the frame, but its effect is to clear the frame to display the target document. This is useful for moving from frame to frameless structures.

Now we know that target is an attribute displayed by a target that is closely related to the browser. So what is rel? Why do many people regard it as an alternative attribute of target? Now let’s get to know rel. In fact, there is not only one rel but also a corresponding attribute called rev. The meanings of these two attributes are: the relationship from the source document to the target document; the relationship from the target document to the source document. The source document here can be understood as the current document where the link is located, and the target document is the document that the link will open. We should be clear at this point. In fact, rel and rev are a link relationship before the document, rather than browser-related attributes of how to display the target document.

So what is the relationship between rel and rev? The following will list them one by one and explain their meanings:

next, links to the next document;
prev, links to the previous document;
head, links to the top-level document in the collection;
toc, links to the table of contents of the collection;
parent, links to the document above the source;
Child, links to the document below the source;
index, links to the index of this document;
glossary, a glossary linked to this document;

where next and prev are a group.It shows that the previous relationship between the current document and the target document is a same-level relationship, which can be written like this . Head and toc can form a combination, indicating a link from the table of contents to the final document, or a link from the document to the table of contents. Parent and child are a group, indicating that the current document is linked to the parent document or child document. Index and glossary can be combined with head respectively to form documents to index, or index to documents; documents to glossary or glossary to documents.

Maybe it’s still not very clear. Here’s an example: I’ve compiled a movie document resource here, so I need to classify these resources. I divided the movie into: martial arts movies, war movies, and love movies. Movies, horror films, documentaries. Then when I need to link to the following subcategory in the movie root directory, the link relationship should be: rel=child rev=parent. And if the current channel page is a martial arts movie, I need to switch to the romance movie channel or other channels. , then the link relationship should be: rel=next rev=prev, when we link from a martial arts movie to the document of the movie "Crouching Tiger, Hidden Dragon", the link relationship should be: rel=head rev=toc, when from When "Crouching Tiger, Hidden Dragon" links to the index, the link relationship becomes: rel=index rev=head.

Since the current CSS cannot capture the attribute values ​​​​of rel and rev, there is no way to provide different styles for links with different relationships, so now rel and rev are only used to make the semantics of the web page more complete. .