Detailed description of rel and target attributes of A Link

Source: Internet
Author: User
Detailed description of rel and target attributes of A Link

AboutTarget = "_ blank"Leaving ProblemsIt has been repeatedly controversial on the Internet for many times. Some say they want to stay, some say they want to remove them. The main reason for retaining the claim is that the target = "_ blank" attribute does not have a good solution yet, while the claimant uses the rel and JS solutions. Target = "_ blank" whether it is necessary or not. I think there are still many blind spots. After reading the relevant literature, I found that the actual situation is not what we think. In fact, target = "_ blank" is not against the standard, there is no need to use rel and JS solutions, because this is a misunderstanding. As long as we understand the true meaning of rel and target, we know that there should not be any controversy here. Next, I will share with you the knowledge I have obtained through literature review. Let's first understand the meaning of target and rel:

TargetAllows you to specify where to display the selected hyperlink content. In other words, the content of the link will be displayed in a window. The target attribute values have four Reserved names: _ blank, _ self, _ parent, and _ top. _ Blank indicates that the browser always loads the target = "_ blank" link document in a new and untitled window. Here, we may not understand what "Untitled" means. In fact, target is an ID that can be assigned to a new window. For example: target = "name" indicates that the document loaded through the target = "name" link will be displayed in a window named "name. If there is no window with ID "name", the browser will create a window named "name" to display the link document. If the ID of the current window is "name", the link document will replace the original content in the current window. The value of _ self is actually the current document. The default value of <a> is _ self, which is generally unavailable. _ Parent indicates that the link document is displayed in the parent window. This attribute value is only used in the framework structure. If the base is a top-level framework, it serves the same purpose as _ self. _ Top is also applied in the framework, but its effect is to clear the framework to display the target document. This is very useful for switching from a framework structure to a non-framework structure.

Now we know that target is the property of 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? Next, let's get to know rel. In fact, there is not only one rel, but also a corresponding attribute called rev, which means the relationship between the source document and the target document, and 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 to be opened. Now we should be clear, in factRelAnd revIs a link before a document.Not how to display the properties of the target document related to the browser.

So what is the relationship between rel and rev? The following describes the meaning of the column:

Next, link to the next document;

Prev: Link to the previous document;

Head: Link to the top-level documents in the set;

Toc, which is linked to the directory of the set;

Parent, link to the source document;

Child, link to the document below the source;

Index, the index linked to this document;

Glossary, which is linked to the glossary of this document;

WhereNextAnd prevIs a group. Indicates that the relationship between the current document and the target document is the same level.Can be written as this

<A href = "movie_002.htm" rel = next rev = prev>

A combination of head and toc can be formed to indicate that a directory is linked to the final document or a document is linked to a directory. A group of parent and child indicates that the current document is linked to the parent or child document. The index and glossary can be combined with the head to form a document to the index, or from the index to the document; from the document to the glossary or glossary to the document.

It may be unclear to say this.For example:

I have organized a file resource for movies, so I need to classify these resources. I divide movies into martial arts films, war films, love films, terrorism films, and documentaries. When the root directory of a movie needs to be linked to the following sub-classes, the link should be: rel = child rev = parent. If it is the channel page of the martial arts film, when I want to transfer a love film channel or other channels, the link should be: rel = next rev = prev, when we use a martial arts film to link to the "Crouching Tiger, Hidden Dragon" movie document, the link should be: rel = head rev = toc, when "Crouching Tiger, Hidden Dragon" is linked to the index, the link becomes: rel = index rev = head.

Currently, CSS cannot capture the attribute values of rel and rev, so 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 web pages more complete.

Rel specifies the link between the forward link and rev specifies the link between the reverse link.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.