Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As we discussed in our last movie, the rel attribute allows us to define the behavior and type of link created for our link, anchor, and area elements. In this movie, we are going to return to our trails page and define a few of our links with the rel attribute to give some of these new keywords a try. So here I have the trails.htm file open from the 05_13 folder. The first thing I am going to do is something that any of you guys that has been authoring web pages for any amount of time have done probably over and over and over, without really even thinking about it.
I am going to go down to about line number 6, were we have our link tag that's linking to external main.css file. So I am going right in front of the media attribute and define the rel attribute. And the value I want to use here is stylesheet. Now as I mentioned before, you've probably done that over and over and over again for link elements; the rel attribute is not optional. You have to have it, and in the case of a style sheet, you definitely want to define the relationship to the external resource as stylesheet, so user agents know how to handle that.
Now in other instances, using the rel attribute specifically with anchor tags, for example, is simply optional. And it can make your content a little bit more semantic. It can help web applications understand the relationship of that link and what that link does. Now for your anchor elements, the use of the rel attribute is entirely optional. In a lot of cases, you're simply adding additional semantic meaning, so the user agents and applications understand that link type and understand what to do with that. And that's what we are going to do next: go down into our page, find some real links that could benefit from the added semantics that the real attribute can provide, and go ahead and apply that.
So I want to start by going down into our breadcrumbs section, and you can find this about line 28 or so. So here we have our section header for the trailReviews section. And it's says Trail Reviews, and then we have a couple of breadcrumb links here. Notice that we have a paragraph that has a link to All Trails and then the specific section we are looking at now, which is Ojai. Now anytime you are dealing with this type of breadcrumb navigation or pagination, you can actually define the relationship with some of these.
You can define up, for example, as one level up, you can define start, that sort of thing. And it's just helps user agents know what this link is in relationship to some of other links around it. So the first thing I want to do is right here in our first link, which is to Alltrails, in the anchor element itself, I am going to go ahead and define another rel attribute. In this case I am going to give it the keyword value of start, since it is the very first link within the breadcrumbs, and that would tell any of the applications that this link was sort of, if you would, the first page link with in this section.
So this will help user agents and applications understand that this link is the very first link within the breadcrumb navigation. And you might even have certain user agents, for example, that give people the options of jumping right back to the start and going back to this link without having them to necessarily manually click on the link. Ok, I'm going to scroll down just a little bit further down into the article itself, and we have, around line 77 or so, we have in the footer of that section, contact information for Jeff Layton.
One of the things, for example, you will notice is that we have an email link to his email address. So this is contact information for the author. It's also helpful to describe the relationship for this link as well, and since this is the author of that particular article, we can come in and right after title, for the title attribute, I'll define a real attribute and I'll give its value as author, explaining to different user agents that this link provides a way of contacting or identifying the author of the content on the page.
All right, so I am going to go ahead and save that. I am going to scroll down to our ad copy, which is almost all the way down towards the bottom of the page, around line 136 or so. And one of the things I want to do here is the block-level link that we created earlier that's wrapping both the image and the tagline, that's going out to an external site, the Explore California site. So one of the things I can do here is define that relationship as well. So I am going to go ahead and add a rel attribute here, and the rel attribute that I want to use is external.
You don't really notice anything different. If you scroll through the page, nothing looks different. You're not seeing any stylistic differences. Now obviously, if we would have omitted the rel attribute on our external style sheet link, things might look a little different. But other than that, we can't really see the benefits of that visually. But we have made our links much more descriptive. And we have established the relationship between our page and its linked resources in pages, which is a good thing. Now in the cases of style sheet again the rel attribute is incredibly important and omitting it would have seriously negative consequences. Now, in other cases, such as our author's contact information, the rel attribute simple provides us with an opportunity to provide semantically richer content, which can be used by any supporting user agent.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99937 Viewers
56 Video lessons · 113027 Viewers
71 Video lessons · 81879 Viewers
131 Video lessons · 39286 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.