1 1 00:00:00,650 --> 00:00:01,940 Hi guys, and welcome back! 2 2 00:00:01,940 --> 00:00:02,773 In this lecture. 3 3 00:00:02,773 --> 00:00:04,580 We're going to introduce a handful 4 4 00:00:04,580 --> 00:00:06,470 of really common HTML elements. 5 5 00:00:06,470 --> 00:00:09,760 So you can start writing some real HTML code. 6 6 00:00:09,760 --> 00:00:11,740 We'll discuss what some of these elements are used for 7 7 00:00:11,740 --> 00:00:14,790 and some important attributes usually associated 8 8 00:00:14,790 --> 00:00:16,170 with some of them. 9 9 00:00:16,170 --> 00:00:17,700 Let's start with span. 10 10 00:00:17,700 --> 00:00:19,400 Span elements are generally used 11 11 00:00:19,400 --> 00:00:21,780 to annotate small pieces of text. 12 12 00:00:21,780 --> 00:00:24,950 Usually because we want to apply some specific styles 13 13 00:00:24,950 --> 00:00:27,240 or because we want to add some behaviour 14 14 00:00:27,240 --> 00:00:28,330 that doesn't apply 15 15 00:00:28,330 --> 00:00:30,350 to the surrounding content. 16 16 00:00:30,350 --> 00:00:33,010 Span elements are very generic by design. 17 17 00:00:33,010 --> 00:00:35,080 They don't inherently represent anything 18 18 00:00:35,080 --> 00:00:37,640 or apply any meaning to their content. 19 19 00:00:37,640 --> 00:00:39,380 So as such, they should really be treated 20 20 00:00:39,380 --> 00:00:41,400 as a last resort element 21 21 00:00:41,400 --> 00:00:43,600 for when we can't offer a better description 22 22 00:00:43,600 --> 00:00:45,943 of the content with a more specific element. 23 23 00:00:46,940 --> 00:00:48,840 For example, let's say we have some content 24 24 00:00:48,840 --> 00:00:50,780 like this paragraph, and we want 25 25 00:00:50,780 --> 00:00:53,040 to highlight the word, extremely, 26 26 00:00:53,040 --> 00:00:55,060 to give it additional emphasis. 27 27 00:00:55,060 --> 00:00:57,230 Perhaps we want to change its appearance as part 28 28 00:00:57,230 --> 00:00:59,630 of this to visually distinguish the word 29 29 00:00:59,630 --> 00:01:01,630 from the rest of the content. 30 30 00:01:01,630 --> 00:01:04,230 This is not a good job for the span element, 31 31 00:01:04,230 --> 00:01:06,630 although a lot of people would jump to span 32 32 00:01:06,630 --> 00:01:08,360 in this situation. 33 33 00:01:08,360 --> 00:01:10,870 Because there is an HTML element specifically designed 34 34 00:01:10,870 --> 00:01:13,200 to describe stress emphasis in text, 35 35 00:01:13,200 --> 00:01:15,390 we should use that instead of span. 36 36 00:01:15,390 --> 00:01:19,470 And that is the em element for emphasis. 37 37 00:01:19,470 --> 00:01:21,940 If we wanted to change the colour of the word, ticket, 38 38 00:01:21,940 --> 00:01:24,160 for example, but without meaning 39 39 00:01:24,160 --> 00:01:25,550 that it's more important 40 40 00:01:25,550 --> 00:01:27,700 or more emphasised than other words, 41 41 00:01:27,700 --> 00:01:30,370 then the span element is a great choice. 42 42 00:01:30,370 --> 00:01:32,200 We'd just be using the span element 43 43 00:01:32,200 --> 00:01:34,410 to make targeting the word easier 44 44 00:01:34,410 --> 00:01:36,710 with our CSS styles. 45 45 00:01:36,710 --> 00:01:40,040 This is a very common and important thing in HTML. 46 46 00:01:40,040 --> 00:01:41,170 Try to use the element, 47 47 00:01:41,170 --> 00:01:43,770 that means what you want if there is one. 48 48 00:01:43,770 --> 00:01:45,810 Sometimes that means you have to search 49 49 00:01:45,810 --> 00:01:48,650 and try to investigate whether there is a correct element 50 50 00:01:48,650 --> 00:01:50,650 for what you're trying to do. 51 51 00:01:50,650 --> 00:01:53,760 All right, let's look at the a or anchor element. 52 52 00:01:53,760 --> 00:01:56,140 These are used for links, and they're really one 53 53 00:01:56,140 --> 00:01:58,900 of the most important elements we have in our arsenal. 54 54 00:01:58,900 --> 00:02:00,405 The internet, as we know it is built 55 55 00:02:00,405 --> 00:02:02,900 on these linking elements. 56 56 00:02:02,900 --> 00:02:05,540 We can provide a destination for the link using 57 57 00:02:05,540 --> 00:02:10,030 the href attribute, which stands for hypertext reference. 58 58 00:02:10,030 --> 00:02:12,250 The content between the opening and closing tags 59 59 00:02:12,250 --> 00:02:14,800 of the a element is where the user will click on 60 60 00:02:14,800 --> 00:02:16,163 to trigger the link. 61 61 00:02:17,110 --> 00:02:18,610 Next up, lists. 62 62 00:02:18,610 --> 00:02:21,760 The ol, ul and li elements, 63 63 00:02:21,760 --> 00:02:23,960 are used to structure lists in HTML. 64 64 00:02:23,960 --> 00:02:27,700 And we have several types of lists available to us. 65 65 00:02:27,700 --> 00:02:30,840 The most common are Ordered and Unordered lists. 66 66 00:02:30,840 --> 00:02:35,050 And we use the ol and ul elements for this. 67 67 00:02:35,050 --> 00:02:36,440 A third less common type of list 68 68 00:02:36,440 --> 00:02:38,190 is known as a definition list, 69 69 00:02:38,190 --> 00:02:40,950 which maps terms to descriptions. 70 70 00:02:40,950 --> 00:02:42,860 Ordered lists are used when the order 71 71 00:02:42,860 --> 00:02:45,620 of the list is vital to the meaning of the content. 72 72 00:02:45,620 --> 00:02:47,940 For example, when providing instructions. 73 73 00:02:47,940 --> 00:02:49,680 If the steps were performed out of order, 74 74 00:02:49,680 --> 00:02:51,210 the result may not be the same, 75 75 00:02:51,210 --> 00:02:52,980 so here the order of the element 76 76 00:02:52,980 --> 00:02:55,840 determines the meaning of the content. 77 77 00:02:55,840 --> 00:02:57,620 Unordered lists are used obviously, 78 78 00:02:57,620 --> 00:03:00,250 when the order isn't important to the content. 79 79 00:03:00,250 --> 00:03:02,440 For example, for things like shopping lists. 80 80 00:03:02,440 --> 00:03:05,200 Ultimately the order in which we write our shopping list 81 81 00:03:05,200 --> 00:03:07,540 doesn't have any real bearing on the meaning of the list. 82 82 00:03:07,540 --> 00:03:10,830 So we could use an unordered list in that situation. 83 83 00:03:10,830 --> 00:03:11,790 A good rule of thumb is, 84 84 00:03:11,790 --> 00:03:13,390 if you'd write the list with bullet points 85 85 00:03:13,390 --> 00:03:16,720 instead of numbers, you'd want an unordered list. 86 86 00:03:16,720 --> 00:03:20,040 But oil and UL describe the type of list. 87 87 00:03:20,040 --> 00:03:23,270 We also need to tell the list which items it contains, 88 88 00:03:23,270 --> 00:03:26,900 and that's where the li elements come into play. 89 89 00:03:26,900 --> 00:03:28,740 Next up, let's look at forms. 90 90 00:03:28,740 --> 00:03:31,270 Forms are a vital part of many websites. 91 91 00:03:31,270 --> 00:03:33,560 We use them every time we want to log into a site 92 92 00:03:33,560 --> 00:03:35,140 or fill out delivery information 93 93 00:03:35,140 --> 00:03:37,410 for online purchases, for example. 94 94 00:03:37,410 --> 00:03:39,600 Because it is so common, there is a whole host 95 95 00:03:39,600 --> 00:03:42,560 of HTML elements just for building forms. 96 96 00:03:42,560 --> 00:03:46,400 For now, let's just talk about the form element, itself. 97 97 00:03:46,400 --> 00:03:47,880 There are two special attributes 98 98 00:03:47,880 --> 00:03:49,860 that we can apply to form elements, 99 99 00:03:49,860 --> 00:03:52,320 which determine what the form does 100 100 00:03:52,320 --> 00:03:54,120 when the user submits it. 101 101 00:03:54,120 --> 00:03:56,583 These are action and method. 102 102 00:03:57,540 --> 00:04:00,260 The action is where we want to send the form data, 103 103 00:04:00,260 --> 00:04:01,870 when the form is submitted. 104 104 00:04:01,870 --> 00:04:04,020 When writing our server side code, 105 105 00:04:04,020 --> 00:04:05,450 we write handler functions 106 106 00:04:05,450 --> 00:04:07,510 to deal with this form data. 107 107 00:04:07,510 --> 00:04:09,170 The method determines the type 108 108 00:04:09,170 --> 00:04:12,120 of HTTP request, which gets submitted. 109 109 00:04:12,120 --> 00:04:13,030 Generally speaking, 110 110 00:04:13,030 --> 00:04:15,020 we're going to be submitting post requests, 111 111 00:04:15,020 --> 00:04:17,010 but we can also use get requests. 112 112 00:04:17,010 --> 00:04:18,310 We'll talk more about this later, 113 113 00:04:18,310 --> 00:04:19,950 but inside the form element 114 114 00:04:19,950 --> 00:04:22,350 we put things like text fields or drop downs 115 115 00:04:22,350 --> 00:04:24,200 and their data is what would be sent 116 116 00:04:24,200 --> 00:04:26,563 to the server when the form is submitted. 117 117 00:04:27,410 --> 00:04:29,573 Finally, let's talk about images. 118 118 00:04:29,573 --> 00:04:31,830 Img elements are one of several elements 119 119 00:04:31,830 --> 00:04:33,830 that can be used to display an image 120 120 00:04:33,830 --> 00:04:35,460 in the browser window. 121 121 00:04:35,460 --> 00:04:38,990 We use the src, short for source, attribute 122 122 00:04:38,990 --> 00:04:41,600 to give the element the path to the image file 123 123 00:04:41,600 --> 00:04:43,290 that it should display. 124 124 00:04:43,290 --> 00:04:44,850 This can be a complete URL 125 125 00:04:44,850 --> 00:04:47,750 or a file path relative to the HTML document. 126 126 00:04:47,750 --> 00:04:51,040 Note that the img element doesn't have a closing tag. 127 127 00:04:51,040 --> 00:04:52,710 It is a void element. 128 128 00:04:52,710 --> 00:04:55,530 And while src is the only required attribute 129 129 00:04:55,530 --> 00:04:57,370 for the img element, we should strive 130 130 00:04:57,370 --> 00:04:59,920 to add another attribute whenever possible, 131 131 00:04:59,920 --> 00:05:02,200 the alt attribute. 132 132 00:05:02,200 --> 00:05:04,480 Alt is used to provide a text description 133 133 00:05:04,480 --> 00:05:06,010 of the image content. 134 134 00:05:06,010 --> 00:05:07,210 It's displayed in the event 135 135 00:05:07,210 --> 00:05:08,690 that the image fails to load 136 136 00:05:08,690 --> 00:05:09,780 and it can really help 137 137 00:05:09,780 --> 00:05:13,720 with site accessibility for those who are visually impaired. 138 138 00:05:13,720 --> 00:05:15,510 Thank you very much for joining me in this video. 139 139 00:05:15,510 --> 00:05:18,410 I hope you've enjoyed it and I'll see you in the next one.