1 00:00:02,270 --> 00:00:05,530 We already worked on the full-week HTML file. 2 00:00:05,530 --> 00:00:09,870 And now it's time to explore the content of this page 3 00:00:09,870 --> 00:00:11,670 in a bit more detail. 4 00:00:11,670 --> 00:00:14,110 Specifically I would like to focus onto 5 00:00:14,110 --> 00:00:16,160 these three paragraphs down here. 6 00:00:16,160 --> 00:00:17,300 These. 7 00:00:17,300 --> 00:00:20,750 These paragraphs contain information about the challenges 8 00:00:20,750 --> 00:00:23,800 I want to accomplish in the end. 9 00:00:23,800 --> 00:00:27,350 Now we can use paragraphs to display this information, 10 00:00:27,350 --> 00:00:30,653 but from a semantic point of view, it's not totally correct. 11 00:00:31,500 --> 00:00:34,530 Because if you think about other tools, for example, 12 00:00:34,530 --> 00:00:36,920 Word if you write an essay, for example, 13 00:00:36,920 --> 00:00:41,430 if you have such information, such related information, 14 00:00:41,430 --> 00:00:44,940 all three paragraphs contain challenges. 15 00:00:44,940 --> 00:00:48,570 Well then another way to display such information 16 00:00:48,570 --> 00:00:51,020 would be preferred, right? 17 00:00:51,020 --> 00:00:54,440 Wouldn't you use a list in Word? I think you would do so. 18 00:00:54,440 --> 00:00:57,940 And the great thing is that HTML also comes with 19 00:00:57,940 --> 00:01:00,423 a list element to achieve exactly that. 20 00:01:01,470 --> 00:01:04,760 We actually have two lists elements, two list types 21 00:01:04,760 --> 00:01:06,060 to be more precise. 22 00:01:06,060 --> 00:01:08,200 We'll dive into this in a few seconds, 23 00:01:08,200 --> 00:01:11,180 but before we do so it's very important to keep in mind 24 00:01:11,180 --> 00:01:15,430 that the list is again, all about the semantics. 25 00:01:15,430 --> 00:01:17,600 We will see that the two list types we have 26 00:01:17,600 --> 00:01:20,140 are styled a bit differently by default, 27 00:01:20,140 --> 00:01:22,860 but it's important to keep in mind that it's all about 28 00:01:22,860 --> 00:01:26,600 the semantics for other developers and for the browser 29 00:01:26,600 --> 00:01:30,040 to exactly state what should be displayed here. 30 00:01:30,040 --> 00:01:32,220 You have content that is related in a way? 31 00:01:32,220 --> 00:01:33,600 Well then use a list. 32 00:01:33,600 --> 00:01:36,470 That's the reason why we change our logic here 33 00:01:36,470 --> 00:01:39,030 from the paragraph to this list. 34 00:01:39,030 --> 00:01:42,940 Now, how can we create such lists now in HTML? 35 00:01:42,940 --> 00:01:45,870 Well, for this, I'll add two dummy lists first, 36 00:01:45,870 --> 00:01:47,310 down here, maybe a bit. 37 00:01:47,310 --> 00:01:49,520 And the first list type I want to use 38 00:01:49,520 --> 00:01:51,703 is the so-called ordered list. 39 00:01:52,590 --> 00:01:56,360 Ordered list, written like this with the OL tag, 40 00:01:56,360 --> 00:01:58,660 with tab you can auto complete this. 41 00:01:58,660 --> 00:02:01,730 The ordered list, as the name indicates, 42 00:02:01,730 --> 00:02:06,660 is a list which contains list items in a certain order. 43 00:02:06,660 --> 00:02:09,180 An example for this would be if you want to display 44 00:02:09,180 --> 00:02:10,979 the different weekdays in a list, 45 00:02:10,979 --> 00:02:12,940 so Monday, Tuesday, and so on. 46 00:02:12,940 --> 00:02:16,020 Typically such weekdays follow a certain order, 47 00:02:16,020 --> 00:02:19,473 well then an ordered list would be your choice. 48 00:02:20,940 --> 00:02:25,460 The other list type we have is the so-called unordered list. 49 00:02:25,460 --> 00:02:28,500 Here we use the UL tag, this one here. 50 00:02:28,500 --> 00:02:30,257 And in opposite to the ordered list, 51 00:02:30,257 --> 00:02:34,150 the unordered list contains related information 52 00:02:34,150 --> 00:02:37,050 where the order is not that important. 53 00:02:37,050 --> 00:02:41,040 An example here could be a list of things you want to buy 54 00:02:41,040 --> 00:02:43,460 in the grocery store, let's say tomatoes, 55 00:02:43,460 --> 00:02:45,290 apples, and bananas. 56 00:02:45,290 --> 00:02:47,920 Well, if you buy tomatoes, apples, or bananas, 57 00:02:47,920 --> 00:02:49,910 or apples, bananas, and tomatoes, 58 00:02:49,910 --> 00:02:51,680 I don't think this makes a big difference. 59 00:02:51,680 --> 00:02:54,620 It's just important to keep these items in a list, 60 00:02:54,620 --> 00:02:57,313 then an unordered list would be your way to go. 61 00:02:58,240 --> 00:03:01,500 This is just the semantic logic for the list, 62 00:03:01,500 --> 00:03:03,410 so to differentiate the list type, 63 00:03:03,410 --> 00:03:06,340 but it wouldn't be a list without any list items 64 00:03:06,340 --> 00:03:10,890 and list items are added with the LI tag. 65 00:03:10,890 --> 00:03:13,770 So we can add a list item like this, 66 00:03:13,770 --> 00:03:16,490 LI, first list item, ordered list. 67 00:03:16,490 --> 00:03:19,150 Let's say this is Monday. 68 00:03:19,150 --> 00:03:23,150 Second list item, this could be Tuesday, 69 00:03:23,150 --> 00:03:26,230 and third list item here in our ordered list, 70 00:03:26,230 --> 00:03:28,223 this could be Wednesday. 71 00:03:29,370 --> 00:03:32,440 For the unordered list, the logic of the list items 72 00:03:32,440 --> 00:03:33,860 is exactly the same, 73 00:03:33,860 --> 00:03:36,850 just that we have, well unordered list items in here. 74 00:03:36,850 --> 00:03:41,513 So this could be something like, as I said, apples, 75 00:03:42,810 --> 00:03:46,190 then maybe bananas. 76 00:03:46,190 --> 00:03:50,593 And finally, we could have tomatoes in here. 77 00:03:52,290 --> 00:03:55,713 And with that, our two list types are completed. 78 00:03:57,020 --> 00:04:00,010 Let's save this now, and let's go back to our website 79 00:04:00,850 --> 00:04:04,480 and you see from a general styling point of view, 80 00:04:04,480 --> 00:04:06,853 both lists kind of look the same. 81 00:04:07,910 --> 00:04:10,810 But if we focus on the left part here, 82 00:04:10,810 --> 00:04:13,140 you see that the ordered list by default 83 00:04:13,140 --> 00:04:15,440 comes with an ordering, so to say. 84 00:04:15,440 --> 00:04:16,850 So one, two, three, four. 85 00:04:16,850 --> 00:04:19,930 The unordered list just comes with bullet points. 86 00:04:19,930 --> 00:04:21,180 As I mentioned already, 87 00:04:21,180 --> 00:04:24,480 this visual differentiation is not very important. 88 00:04:24,480 --> 00:04:26,310 As you learned already throughout this course, 89 00:04:26,310 --> 00:04:29,170 we can change the style of elements with CSS. 90 00:04:29,170 --> 00:04:32,590 So the core focus here are the semantics, again. 91 00:04:32,590 --> 00:04:35,410 However, we don't need these two lists here at the moment, 92 00:04:35,410 --> 00:04:37,023 so we can get rid of these. 93 00:04:38,220 --> 00:04:39,600 And now it's your turn. 94 00:04:39,600 --> 00:04:44,600 Make sure to turn these three paragraphs into a list now. 95 00:04:44,630 --> 00:04:47,940 So you have to decide which list type you want to use, 96 00:04:47,940 --> 00:04:49,750 ordered list or unordered list. 97 00:04:49,750 --> 00:04:52,220 And then you have to create three list items, 98 00:04:52,220 --> 00:04:56,640 well, to turn these three paragraphs into these lists items. 99 00:04:56,640 --> 00:04:58,130 Good luck with this little challenge. 100 00:04:58,130 --> 00:05:00,693 We'll solve this in a few seconds together.