1 1 00:00:00,580 --> 00:00:02,120 Hi guys and welcome back. 2 2 00:00:02,120 --> 00:00:03,800 In this video. We're going to take a look 3 3 00:00:03,800 --> 00:00:05,400 at some HTML attributes. 4 4 00:00:05,400 --> 00:00:08,350 Specifically at two of the most commonly used ones 5 5 00:00:08,350 --> 00:00:11,070 which are class and ID. 6 6 00:00:11,070 --> 00:00:13,326 You can see that I've got here in my editor already open 7 7 00:00:13,326 --> 00:00:16,620 and I've got a webpage open to the site as well. 8 8 00:00:16,620 --> 00:00:19,370 So I just created an index loaded HTML page on my editor. 9 9 00:00:19,370 --> 00:00:21,870 And that's what I'm gonna be editing throughout this video. 10 10 00:00:21,870 --> 00:00:23,770 And I've got it open there whenever we save 11 11 00:00:23,770 --> 00:00:26,680 we'll refresh the page and see what our output looks like. 12 12 00:00:26,680 --> 00:00:29,090 I've got my HTML boilerplate in there as well. 13 13 00:00:29,090 --> 00:00:30,930 So we're ready to begin. 14 14 00:00:30,930 --> 00:00:31,830 Let's get started. 15 15 00:00:32,780 --> 00:00:35,470 So let's begin by talking about the class attribute 16 16 00:00:35,470 --> 00:00:38,380 and that's one thing that we're going to be using a lot 17 17 00:00:38,380 --> 00:00:39,670 in this course. 18 18 00:00:39,670 --> 00:00:41,250 We're going to be adding class attributes 19 19 00:00:41,250 --> 00:00:43,330 to our HTML elements. 20 20 00:00:43,330 --> 00:00:46,740 Classes are used for identifying particular elements 21 21 00:00:46,740 --> 00:00:49,710 when we're applying styles with CSS later on 22 22 00:00:49,710 --> 00:00:53,220 or when we need to select certain groups of elements 23 23 00:00:53,220 --> 00:00:55,440 using JavaScript. 24 24 00:00:55,440 --> 00:00:59,410 So let's take a look at a simple paragraph element. 25 25 00:00:59,410 --> 00:01:01,760 So I'm gonna have a paragraph element here 26 26 00:01:01,760 --> 00:01:05,443 and we're gonna say, "This is some text," for example. 27 27 00:01:06,470 --> 00:01:07,990 If we save these unrefreshed 28 28 00:01:07,990 --> 00:01:09,370 we're gonna get this there. 29 29 00:01:09,370 --> 00:01:10,880 I'm just going to zoom in a little bit 30 30 00:01:10,880 --> 00:01:13,300 so you guys can see it a bit more easily. 31 31 00:01:13,300 --> 00:01:17,240 But what we can do is we can give it a class attribute. 32 32 00:01:17,240 --> 00:01:19,056 So to give it an attribute, 33 33 00:01:19,056 --> 00:01:22,420 we simply put a space after the paragraph 34 34 00:01:22,420 --> 00:01:26,223 and we do class equal text for example. 35 35 00:01:27,280 --> 00:01:30,150 So this is how we give attributes in HTML. 36 36 00:01:30,150 --> 00:01:33,630 We put the attribute name, then we put an equal sign 37 37 00:01:33,630 --> 00:01:37,100 and then we put whatever value we wanna give it 38 38 00:01:37,100 --> 00:01:39,560 in between quotation marks. 39 39 00:01:39,560 --> 00:01:44,140 So the class attribute can be applied to any HTML element. 40 40 00:01:44,140 --> 00:01:47,200 Most attributes are specific to certain elements 41 41 00:01:47,200 --> 00:01:49,680 but class is what's called a global attributes 42 42 00:01:49,680 --> 00:01:51,980 so we can apply it to anything. 43 43 00:01:51,980 --> 00:01:56,980 So this paragraph element now has a class of text 44 44 00:01:57,130 --> 00:02:02,130 and we could use text as a class to identify this paragraph. 45 45 00:02:03,140 --> 00:02:06,760 If we have two paragraphs, both with a class of text 46 46 00:02:06,760 --> 00:02:10,130 we can use the text class to identify both paragraphs. 47 47 00:02:10,130 --> 00:02:14,920 So this helps us sort of group elements in a different way. 48 48 00:02:14,920 --> 00:02:18,040 We can also add multiple classes to an element if we want 49 49 00:02:18,040 --> 00:02:20,030 just by separating them with spaces. 50 50 00:02:20,030 --> 00:02:23,170 So we've got class one, class two class three. 51 51 00:02:23,170 --> 00:02:25,460 Here we have three different classes 52 52 00:02:25,460 --> 00:02:29,600 and the spaces here are used to separate the classes. 53 53 00:02:29,600 --> 00:02:31,710 Let's say that we've got two paragraphs 54 54 00:02:31,710 --> 00:02:34,710 and one of them has class one, class, two, class three 55 55 00:02:34,710 --> 00:02:39,210 and the other one just has one of the classics. 56 56 00:02:39,210 --> 00:02:41,370 So obviously this renders as normal paragraph 57 57 00:02:41,370 --> 00:02:44,960 because the class doesn't have any effect on the output 58 58 00:02:44,960 --> 00:02:46,380 at the moment. 59 59 00:02:46,380 --> 00:02:50,040 But what we can do is we can use class one to identify both 60 60 00:02:50,040 --> 00:02:52,790 of these paragraphs and we could potentially alter them 61 61 00:02:52,790 --> 00:02:56,120 or change how they look using this class one 62 62 00:02:56,120 --> 00:02:58,340 because it is used in both paragraphs. 63 63 00:02:58,340 --> 00:03:00,510 But if we wanted to just this paragraph 64 64 00:03:00,510 --> 00:03:03,260 we would use either class two or class three. 65 65 00:03:03,260 --> 00:03:05,750 So that is sort of how that works. 66 66 00:03:05,750 --> 00:03:07,830 Another common attribute that can be used 67 67 00:03:07,830 --> 00:03:11,760 with any HTML element is the ID attribute. 68 68 00:03:11,760 --> 00:03:13,170 IDs are similar to classes 69 69 00:03:13,170 --> 00:03:15,590 in that therefore identifying particular elements 70 70 00:03:15,590 --> 00:03:19,000 but they're supposed to be unique unlike classes 71 71 00:03:19,000 --> 00:03:21,120 which can be used in multiple elements. 72 72 00:03:21,120 --> 00:03:22,810 So let's take a look at an example. 73 73 00:03:22,810 --> 00:03:26,070 Here we've got a title which is gonna have 74 74 00:03:26,070 --> 00:03:28,040 a class of title and awesome. 75 75 00:03:28,040 --> 00:03:30,030 So this has two classes and an ID, 76 76 00:03:30,030 --> 00:03:32,740 which is equal to page title. 77 77 00:03:32,740 --> 00:03:36,220 And here we can put whatever text we want. 78 78 00:03:36,220 --> 00:03:38,050 Notice that my editor is reformatting it 79 79 00:03:38,050 --> 00:03:40,520 into a single line because it's short. 80 80 00:03:40,520 --> 00:03:42,160 But again, it doesn't matter 81 81 00:03:42,160 --> 00:03:44,260 whether it's in multiple lines or not. 82 82 00:03:44,260 --> 00:03:45,900 So here we've got an H1 element 83 83 00:03:45,900 --> 00:03:48,990 that has two classes and one ID. 84 84 00:03:48,990 --> 00:03:52,230 So unlike classes, IDs are not normally used 85 85 00:03:52,230 --> 00:03:53,830 for applying styles 86 86 00:03:53,830 --> 00:03:57,530 because if the ID we're using is unique, as it should be 87 87 00:03:57,530 --> 00:04:00,970 that means that we have to craft CSS code differently 88 88 00:04:00,970 --> 00:04:04,050 or independently for each separate ID. 89 89 00:04:04,050 --> 00:04:08,130 So that reduces the opportunity for reusing our CSS code 90 90 00:04:08,130 --> 00:04:10,240 and reusing code can be really important 91 91 00:04:10,240 --> 00:04:12,760 because it allows us to essentially use the same code 92 92 00:04:12,760 --> 00:04:13,593 for many elements 93 93 00:04:13,593 --> 00:04:15,810 which means we don't have to type it out several times 94 94 00:04:15,810 --> 00:04:18,470 which is gonna reduce the size of the code 95 95 00:04:18,470 --> 00:04:20,700 which means the pages are gonna load faster. 96 96 00:04:20,700 --> 00:04:22,840 That's a big benefit. 97 97 00:04:22,840 --> 00:04:25,950 And a second benefit is that by reusing the code 98 98 00:04:25,950 --> 00:04:27,320 it means we'd only type in at once. 99 99 00:04:27,320 --> 00:04:29,910 So we're less likely to make mistakes. 100 100 00:04:29,910 --> 00:04:32,380 Also, if we then wanna come around and change the code 101 101 00:04:32,380 --> 00:04:34,160 we only have to change it in one place. 102 102 00:04:34,160 --> 00:04:37,400 So that's why IDs are generally not used for styling. 103 103 00:04:37,400 --> 00:04:39,080 Instead, we use classes for that, 104 104 00:04:39,080 --> 00:04:41,580 so that then we can add the same class to other elements 105 105 00:04:41,580 --> 00:04:43,820 if we want to apply the same style to them. 106 106 00:04:43,820 --> 00:04:47,990 But IDs are used for when we want to target something 107 107 00:04:47,990 --> 00:04:50,050 to a particular element only 108 108 00:04:50,050 --> 00:04:53,090 and that's normally used in JavaScript code. 109 109 00:04:53,090 --> 00:04:56,460 So both class and ID have their uses. 110 110 00:04:56,460 --> 00:05:00,160 Also, I should mention that IDs are unique in theory 111 111 00:05:00,160 --> 00:05:01,600 but in many web pages 112 112 00:05:01,600 --> 00:05:04,100 you're gonna find the IDs are reused all over the place. 113 113 00:05:04,100 --> 00:05:05,270 That's not good practise 114 114 00:05:05,270 --> 00:05:06,660 and you should try to avoid that. 115 115 00:05:06,660 --> 00:05:09,250 Try to make your ID unique if you can. 116 116 00:05:09,250 --> 00:05:10,903 Finally, there's a lot of other attributes 117 117 00:05:10,903 --> 00:05:12,590 that are available in HTML 118 118 00:05:12,590 --> 00:05:14,320 as well as class and an ID. 119 119 00:05:14,320 --> 00:05:16,000 For example, the required attribute 120 120 00:05:16,000 --> 00:05:18,650 that we've already seen as an example earlier on 121 121 00:05:18,650 --> 00:05:21,629 but you don't have to memorise all the available attributes. 122 122 00:05:21,629 --> 00:05:24,740 You're going to be coming across them as you code in HTML. 123 123 00:05:24,740 --> 00:05:26,580 Eventually you're gonna remember some of them, 124 124 00:05:26,580 --> 00:05:28,690 but if not, you can always search for them 125 125 00:05:28,690 --> 00:05:31,410 in the documentation, whenever you need something specific 126 126 00:05:31,410 --> 00:05:32,610 with HTML. 127 127 00:05:32,610 --> 00:05:34,320 As always, I'm gonna say that 128 128 00:05:34,320 --> 00:05:37,400 search for everything is going to really help you learn. 129 129 00:05:37,400 --> 00:05:38,233 I do that all the time, 130 130 00:05:38,233 --> 00:05:40,110 whenever I wanna make something in HTML, 131 131 00:05:40,110 --> 00:05:42,590 I'm like I know how to make this an HTML 132 132 00:05:42,590 --> 00:05:44,430 but maybe I don't know the best way. 133 133 00:05:44,430 --> 00:05:47,490 So I'm always searching for new ways to do things 134 134 00:05:47,490 --> 00:05:50,050 and that really helps me sort of understand more 135 135 00:05:50,050 --> 00:05:51,930 and learn more about what can be done, 136 136 00:05:51,930 --> 00:05:54,660 especially because things in the web do change quite quickly 137 137 00:05:54,660 --> 00:05:57,410 like HTML and CSS, new things are added all the time. 138 138 00:05:57,410 --> 00:05:59,410 So it's a good idea to stay on top of it 139 139 00:05:59,410 --> 00:06:02,880 by searching for stuff whenever you're coding. 140 140 00:06:02,880 --> 00:06:04,120 All right, that's everything from me. 141 141 00:06:04,120 --> 00:06:05,730 Thank you guys for joining me in this video. 142 142 00:06:05,730 --> 00:06:06,630 I hope you've enjoyed it. 143 143 00:06:06,630 --> 00:06:08,130 And I see you in the next one.