Welcome back dear students 👋. And now we're talking about yet another form attribute called "rel", short for...
relationship.
I'm going to start speeding up a little, bit because I don't think this is a very useful attribute.
I don't really use it that often unless I feel I really have to.
In short, you can think of the rel attribute as just little bits of HTML text, that detail the relationship...
between a linked resource and the current document.
And the "rel" attribute is not only used for forms. You can use it on links and other elements of HTML...
like site navigation, anchor tags, and yes, forms.
And this course is all about forms,
so I'm only going to be discussing those values of the attribute that are applicable to forms.
"But OK, Clyde, what is the rel attribute?
Why do we need it?"
Well, firstly, we don't really need it.
I don't really use it. I can't remember the last time I used the rel attribute, but it's just good
for you to know.
OK, well, how can it be useful or why is it even allowed?
Well, the purpose of the "rel" attribute is to pretty much help search bots, callers and Google spiders 🕷...
to understand what's going on in your website, and how different elements work together.
And just remember the supported value of the rel attribute,
you know, we've got an example here on the screen where rel is "external".
This just tells us that we're sending our form data to an external server, for example, that word "external",
those values...
all the supported values depend on the element of which the attribute is found.
For example, we know every time we reference an external CSS file in our <link> tag, we include the ref "stylesheet"
value.
But that's obviously not applicable for a form. Alright Clyde, well...
what are the allowed values on a form for the rel attribute?
Well, that's a great question my dear student.
These are all the values that the rel attribute can take, when it's on a form. That's important.
That's why you don't see "stylesheet" here.
I don't want to go through each one because it's just going to be mind numbing 😩.
I'm just going to go over the ones that I think are most important.
Firstly, you might be thinking, "well, does the rel attribute have a default value?"
Good question.
The answer is no, it
doesn't. The rel attribute has no default value.
And this just means if the attribute is omitted or none of the values in the attribute are even supported,
then the document has no particular relationship with the destination resource, other than there being...
just a hyperlink between the two.
Got it.
What are some other ones worth mentioning?
Before I go further, let's just click on that light bulb.
I just want you to know that search engines can also use the rel attribute to determine how to index
or display pages.
So sometimes it can be useful, but I'll say not so much with forms.
The most common ones I use with forms are "external".
For example, if the linked address is not part of the same site, aka. you're submitting data to an...
external server, you might just want to put this attribute on there.
Another useful one, or one that you may want to use, is "help". That just indicates the linked resource...
contains or provides help.
Another one I just want to mention is this "next", you know, why would you ever want to use "next"? Well,
the next value indicates that the current document is part of a series.
So, for example, let's say your user goes on a form, a login page...
they log in, and then they get redirected to a home page. That home page is part of your own site,
it's part of, kind of a series, right, of documents you might want to put "next" on there.
What about if you've got a questionnaire and you've wrapped that questionnaire in a form, and the user clicks
next on the questionnaire?
Well, maybe you want to have a rel of "next".
Basically, you just providing clues not only to the user, to the coder, to screen readers, but you're also...
giving clues to spiders and crawlers.
Now, I actually recently read somewhere, I can't remember where, but I recently read somewhere that...
the next and previous are actually not really indexed anymore by crawlers...
so, you know, maybe, maybe their usefulness is somewhat diminished now.
But they are there, just FYI.
And I think that's about it.
Oh, there's a light bulb here.
What did I say? Did you know...
search engines do not consider noopener, or nonreferrer, to rank pages.
That's right.
It's only there to improve security of a web site. Yeah, this is getting a bit technical, um...
just when you use, you know when you open another page using "target='blank'", for example, the other page may run
on the same process as yours.
Right.
And this just means that other page can access the window object, and the window.open() property, um, but...
when you include noopener for all external links...
generally the new window is going to run in a separate process, so it won't be able to access the...
window.open() property of a parent page.
It's just safer. It just improves security 🔐. Anyways, that's a bit technical.
Again, like I mentioned, this is not such an important attribute.
I don't want to spend a long time on it, but you need to just know about it.
It's there.
And I think it's time 🕒.
I think it's time to move on.
See you in the next lecture.