WEBVTT 0 00:01.000 --> 00:08.860 Welcome back dear students 👋. And now we're talking about yet another form attribute called "rel", short for... 1 00:08.860 --> 00:09.780 relationship. 2 00:09.940 --> 00:16.040 I'm going to start speeding up a little, bit because I don't think this is a very useful attribute. 3 00:16.060 --> 00:19.390 I don't really use it that often unless I feel I really have to. 4 00:20.170 --> 00:27.580 In short, you can think of the rel attribute as just little bits of HTML text, that detail the relationship... 5 00:27.580 --> 00:31.780 between a linked resource and the current document. 6 00:32.170 --> 00:37.390 And the "rel" attribute is not only used for forms. You can use it on links and other elements of HTML... 7 00:37.390 --> 00:41.770 like site navigation, anchor tags, and yes, forms. 8 00:41.770 --> 00:43.290 And this course is all about forms, 9 00:43.690 --> 00:48.970 so I'm only going to be discussing those values of the attribute that are applicable to forms. 10 00:49.300 --> 00:51.060 "But OK, Clyde, what is the rel attribute? 11 00:51.070 --> 00:51.850 Why do we need it?" 12 00:51.880 --> 00:54.030 Well, firstly, we don't really need it. 13 00:54.310 --> 00:58.840 I don't really use it. I can't remember the last time I used the rel attribute, but it's just good 14 00:58.840 --> 00:59.410 for you to know. 15 01:00.160 --> 01:03.310 OK, well, how can it be useful or why is it even allowed? 16 01:03.370 --> 01:09.100 Well, the purpose of the "rel" attribute is to pretty much help search bots, callers and Google spiders 🕷... 17 01:09.100 --> 01:14.760 to understand what's going on in your website, and how different elements work together. 18 01:14.980 --> 01:18.100 And just remember the supported value of the rel attribute, 19 01:18.100 --> 01:21.340 you know, we've got an example here on the screen where rel is "external". 20 01:21.700 --> 01:28.360 This just tells us that we're sending our form data to an external server, for example, that word "external", 21 01:28.720 --> 01:29.670 those values... 22 01:29.710 --> 01:34.000 all the supported values depend on the element of which the attribute is found. 23 01:34.360 --> 01:42.880 For example, we know every time we reference an external CSS file in our <link> tag, we include the ref "stylesheet" 24 01:42.880 --> 01:43.390 value. 25 01:43.930 --> 01:46.900 But that's obviously not applicable for a form. Alright Clyde, well... 26 01:47.290 --> 01:50.860 what are the allowed values on a form for the rel attribute? 27 01:51.040 --> 01:52.590 Well, that's a great question my dear student. 28 01:56.200 --> 02:01.600 These are all the values that the rel attribute can take, when it's on a form. That's important. 29 02:01.630 --> 02:03.290 That's why you don't see "stylesheet" here. 30 02:03.640 --> 02:07.650 I don't want to go through each one because it's just going to be mind numbing 😩. 31 02:07.960 --> 02:10.390 I'm just going to go over the ones that I think are most important. 32 02:10.960 --> 02:14.830 Firstly, you might be thinking, "well, does the rel attribute have a default value?" 33 02:15.610 --> 02:16.300 Good question. 34 02:16.690 --> 02:17.800 The answer is no, it 35 02:17.800 --> 02:21.110 doesn't. The rel attribute has no default value. 36 02:21.310 --> 02:26.200 And this just means if the attribute is omitted or none of the values in the attribute are even supported, 37 02:26.980 --> 02:32.440 then the document has no particular relationship with the destination resource, other than there being... 38 02:32.440 --> 02:33.990 just a hyperlink between the two. 39 02:34.610 --> 02:34.970 Got it. 40 02:36.220 --> 02:37.690 What are some other ones worth mentioning? 41 02:37.900 --> 02:39.930 Before I go further, let's just click on that light bulb. 42 02:40.320 --> 02:45.400 I just want you to know that search engines can also use the rel attribute to determine how to index 43 02:45.700 --> 02:46.810 or display pages. 44 02:47.380 --> 02:51.100 So sometimes it can be useful, but I'll say not so much with forms. 45 02:51.310 --> 02:54.190 The most common ones I use with forms are "external". 46 02:55.410 --> 03:01.140 For example, if the linked address is not part of the same site, aka. you're submitting data to an... 47 03:01.140 --> 03:05.190 external server, you might just want to put this attribute on there. 48 03:07.380 --> 03:13.620 Another useful one, or one that you may want to use, is "help". That just indicates the linked resource... 49 03:13.630 --> 03:15.300 contains or provides help. 50 03:16.300 --> 03:20.990 Another one I just want to mention is this "next", you know, why would you ever want to use "next"? Well, 51 03:21.010 --> 03:24.490 the next value indicates that the current document is part of a series. 52 03:24.520 --> 03:31.000 So, for example, let's say your user goes on a form, a login page... 53 03:31.000 --> 03:36.010 they log in, and then they get redirected to a home page. That home page is part of your own site, 54 03:36.010 --> 03:41.010 it's part of, kind of a series, right, of documents you might want to put "next" on there. 55 03:41.380 --> 03:46.030 What about if you've got a questionnaire and you've wrapped that questionnaire in a form, and the user clicks 56 03:46.030 --> 03:47.190 next on the questionnaire? 57 03:47.530 --> 03:50.440 Well, maybe you want to have a rel of "next". 58 03:50.530 --> 03:56.650 Basically, you just providing clues not only to the user, to the coder, to screen readers, but you're also... 59 03:56.650 --> 03:58.390 giving clues to spiders and crawlers. 60 03:58.580 --> 04:02.860 Now, I actually recently read somewhere, I can't remember where, but I recently read somewhere that... 61 04:02.860 --> 04:06.540 the next and previous are actually not really indexed anymore by crawlers... 62 04:06.540 --> 04:10.480 so, you know, maybe, maybe their usefulness is somewhat diminished now. 63 04:10.480 --> 04:13.810 But they are there, just FYI. 64 04:14.500 --> 04:15.700 And I think that's about it. 65 04:15.710 --> 04:16.710 Oh, there's a light bulb here. 66 04:16.720 --> 04:18.700 What did I say? Did you know... 67 04:18.700 --> 04:23.770 search engines do not consider noopener, or nonreferrer, to rank pages. 68 04:24.130 --> 04:24.670 That's right. 69 04:24.880 --> 04:25.370 That's right. 70 04:25.440 --> 04:30.520 It's only there to improve security of a web site. Yeah, this is getting a bit technical, um... 71 04:30.820 --> 04:37.030 just when you use, you know when you open another page using "target='blank'", for example, the other page may run 72 04:37.030 --> 04:38.410 on the same process as yours. 73 04:38.710 --> 04:39.130 Right. 74 04:39.160 --> 04:45.190 And this just means that other page can access the window object, and the window.open() property, um, but... 75 04:45.190 --> 04:47.870 when you include noopener for all external links... 76 04:49.510 --> 04:54.760 generally the new window is going to run in a separate process, so it won't be able to access the... 77 04:54.760 --> 04:56.730 window.open() property of a parent page. 78 04:56.740 --> 05:00.640 It's just safer. It just improves security 🔐. Anyways, that's a bit technical. 79 05:00.910 --> 05:04.050 Again, like I mentioned, this is not such an important attribute. 80 05:04.060 --> 05:07.460 I don't want to spend a long time on it, but you need to just know about it. 81 05:07.510 --> 05:08.080 It's there. 82 05:08.410 --> 05:09.220 And I think it's time 🕒. 83 05:09.220 --> 05:10.270 I think it's time to move on. 84 05:10.540 --> 05:12.060 See you in the next lecture.