1 00:00:02,120 --> 00:00:04,190 Let's take a quick break 2 00:00:04,190 --> 00:00:06,720 from our CSS learnings here 3 00:00:06,720 --> 00:00:08,880 and let's have a look at our website again 4 00:00:08,880 --> 00:00:11,930 from an HTML point of view. 5 00:00:11,930 --> 00:00:14,660 At the moment, we have a structure like this 6 00:00:14,660 --> 00:00:16,820 on our full week HTML page. 7 00:00:16,820 --> 00:00:20,740 We have the body element which holds the h1 element 8 00:00:20,740 --> 00:00:23,810 and our ordered list with the list items, 9 00:00:23,810 --> 00:00:26,320 so our challenges basically. 10 00:00:26,320 --> 00:00:27,900 As you learned throughout this course, 11 00:00:27,900 --> 00:00:31,900 HTML is all about the semantics in the end. 12 00:00:31,900 --> 00:00:33,160 We know that the body 13 00:00:33,160 --> 00:00:36,310 contains the actual content of our website. 14 00:00:36,310 --> 00:00:38,660 The h1 element holds the main heading, 15 00:00:38,660 --> 00:00:41,320 and the ordered list holds our list items, 16 00:00:41,320 --> 00:00:43,920 so related information. 17 00:00:43,920 --> 00:00:46,100 This has semantical meaning already. 18 00:00:46,100 --> 00:00:49,960 It provides information about what's inside this element, 19 00:00:49,960 --> 00:00:52,030 but the bigger a website gets, 20 00:00:52,030 --> 00:00:54,930 and typically websites these days are quite huge, 21 00:00:54,930 --> 00:00:57,600 the more information you might need. 22 00:00:57,600 --> 00:01:01,860 Information not only related to the actual element here, 23 00:01:01,860 --> 00:01:05,480 but to the position or to the area of this element 24 00:01:05,480 --> 00:01:07,340 on our website. 25 00:01:07,340 --> 00:01:11,420 So we could add more structure to this website. 26 00:01:11,420 --> 00:01:13,640 And I said, we could. 27 00:01:13,640 --> 00:01:15,730 It's not a must to do that. 28 00:01:15,730 --> 00:01:17,620 You learned this throughout this course. 29 00:01:17,620 --> 00:01:21,690 The browser is very forgiving, so we don't have to add 30 00:01:21,690 --> 00:01:26,250 this additional semantic information to our code. 31 00:01:26,250 --> 00:01:28,940 But as we also learned throughout this course, 32 00:01:28,940 --> 00:01:29,860 it helps a lot. 33 00:01:29,860 --> 00:01:31,640 It helps other developers. 34 00:01:31,640 --> 00:01:33,300 It also helps the browser. 35 00:01:33,300 --> 00:01:34,810 It helps screen readers, 36 00:01:34,810 --> 00:01:38,180 and basically, it improves the entire way 37 00:01:38,180 --> 00:01:42,310 the information is presented on our website. 38 00:01:42,310 --> 00:01:46,400 Therefore, all the elements we add right now are optional, 39 00:01:46,400 --> 00:01:49,850 but we show you a way how to add this semantic information 40 00:01:49,850 --> 00:01:53,533 easily with default HTML elements. 41 00:01:54,670 --> 00:01:57,500 For example, here our h1 element. 42 00:01:57,500 --> 00:01:58,810 This is the main heading, 43 00:01:58,810 --> 00:02:02,430 and therefore, it is part of the header section 44 00:02:02,430 --> 00:02:03,850 of our webpage. 45 00:02:03,850 --> 00:02:06,400 Header, as you can see, is an HTML element, 46 00:02:06,400 --> 00:02:08,820 so it can hold other elements. 47 00:02:08,820 --> 00:02:10,479 It can be styled and so on. 48 00:02:10,479 --> 00:02:13,480 It's a completely normal HTML element 49 00:02:13,480 --> 00:02:18,170 with the purpose of holding the header content here. 50 00:02:18,170 --> 00:02:21,270 If we continue this logic, the ordered list here, 51 00:02:21,270 --> 00:02:22,710 including the list items, 52 00:02:22,710 --> 00:02:27,560 is basically the core content of our full week HTML file. 53 00:02:27,560 --> 00:02:29,750 Turns out, the results and element for this, 54 00:02:29,750 --> 00:02:32,410 it is the main element. 55 00:02:32,410 --> 00:02:35,160 So the main element holds exactly that, 56 00:02:35,160 --> 00:02:38,200 it holds the core part of our webpage, 57 00:02:38,200 --> 00:02:41,270 so the main information that we want to display. 58 00:02:41,270 --> 00:02:44,350 We could also have more information on our website. 59 00:02:44,350 --> 00:02:47,230 For example, at the bottom, we could have a paragraph 60 00:02:47,230 --> 00:02:49,810 and this paragraph could contain information 61 00:02:49,810 --> 00:02:53,970 about the imprint or social media links, anything like this, 62 00:02:53,970 --> 00:02:55,470 so typical information, 63 00:02:55,470 --> 00:02:58,010 which is not the core of our website, 64 00:02:58,010 --> 00:03:01,330 but which fits perfectly into a footer. 65 00:03:01,330 --> 00:03:03,610 Here, we also have a corresponding element 66 00:03:03,610 --> 00:03:06,650 which can be used in such cases. 67 00:03:06,650 --> 00:03:09,610 Is it a must to structure your website this way? 68 00:03:09,610 --> 00:03:10,780 No, it's not. 69 00:03:10,780 --> 00:03:14,200 Do we recommend to do it? Yes, definitely. 70 00:03:14,200 --> 00:03:17,690 Because as I said, websites become bigger and bigger 71 00:03:17,690 --> 00:03:19,210 the more content you add to it. 72 00:03:19,210 --> 00:03:21,860 Therefore, adding structure is crucial 73 00:03:21,860 --> 00:03:24,660 to keep the website maintainable. 74 00:03:24,660 --> 00:03:27,380 But these are not all our elements 75 00:03:27,380 --> 00:03:29,823 when it comes to structuring a website though. 76 00:03:30,720 --> 00:03:33,980 On the MDN docs, link is attached to this lecture, 77 00:03:33,980 --> 00:03:37,280 you can find more information about the document 78 00:03:37,280 --> 00:03:38,910 and the website structure. 79 00:03:38,910 --> 00:03:39,920 If you go down a bit, 80 00:03:39,920 --> 00:03:42,930 you see all the basic sections of a document, 81 00:03:42,930 --> 00:03:46,120 the header, the main content, and the footer I described, 82 00:03:46,120 --> 00:03:48,670 and also in navigation bar, a sidebar, 83 00:03:48,670 --> 00:03:51,050 so basically lots of different areas 84 00:03:51,050 --> 00:03:53,093 a typical website can have. 85 00:03:54,260 --> 00:03:56,870 You can find more information about the elements 86 00:03:56,870 --> 00:03:58,350 if you scroll down further, 87 00:03:58,350 --> 00:04:00,460 but the purpose of this course 88 00:04:00,460 --> 00:04:02,960 is to turn you into a web developer 89 00:04:02,960 --> 00:04:07,290 so you can, of course, focus onto all these details. 90 00:04:07,290 --> 00:04:10,600 We recommend to first start with the basics here, 91 00:04:10,600 --> 00:04:13,350 so to add a core structure to the website. 92 00:04:13,350 --> 00:04:16,490 Once the concepts are set, then you can dive deeper 93 00:04:16,490 --> 00:04:20,880 and structure your website in even more details. 94 00:04:20,880 --> 00:04:23,130 We'll get started with the basics though, 95 00:04:23,130 --> 00:04:24,970 so let's go back to our code 96 00:04:25,930 --> 00:04:29,470 and let's have a look at the full week HTML file. 97 00:04:29,470 --> 00:04:32,460 As I said, we are inside the body element here, 98 00:04:32,460 --> 00:04:34,930 so structure is not required in the head obviously 99 00:04:34,930 --> 00:04:35,830 with the metadata. 100 00:04:35,830 --> 00:04:40,830 And here, I first want to add the header element here 101 00:04:43,260 --> 00:04:46,260 and now put the h1 element, 102 00:04:46,260 --> 00:04:49,000 so our header here into this header 103 00:04:49,000 --> 00:04:53,140 and actually also our anchor tag 104 00:04:53,140 --> 00:04:56,170 because the anchor tag is also part of the headline 105 00:04:56,170 --> 00:04:59,680 so to say of the top part of this page. 106 00:04:59,680 --> 00:05:01,918 If you look at it, you see we have the challenges 107 00:05:01,918 --> 00:05:03,210 and below today's challenge, 108 00:05:03,210 --> 00:05:06,390 so these are not part of the main area 109 00:05:06,390 --> 00:05:09,610 because the main area are just the actual challenges, 110 00:05:09,610 --> 00:05:12,223 so the list of all our challenges here. 111 00:05:13,270 --> 00:05:16,550 Therefore, we can select this anchor tag here, 112 00:05:16,550 --> 00:05:19,760 put it up into the header like this. 113 00:05:19,760 --> 00:05:23,000 So what remains for the main part is our ordered list, 114 00:05:23,000 --> 00:05:27,210 so we can now create below our header our main element, 115 00:05:27,210 --> 00:05:31,070 and here put the ordered list into this main element. 116 00:05:31,070 --> 00:05:33,583 And maybe also quickly format this a bit. 117 00:05:35,020 --> 00:05:37,210 With this, if we go back to the project, 118 00:05:37,210 --> 00:05:41,090 you see nothing changed from a visual point of view, 119 00:05:41,090 --> 00:05:43,510 but we added more semantic meaning, 120 00:05:43,510 --> 00:05:45,983 more structure to our webpage. 121 00:05:47,640 --> 00:05:51,850 With this, we added even more elements to our webpage. 122 00:05:51,850 --> 00:05:53,210 This is not a problem at all. 123 00:05:53,210 --> 00:05:55,630 As I said, it adds a lot of value here. 124 00:05:55,630 --> 00:05:56,680 But at the moment, 125 00:05:56,680 --> 00:06:01,030 we are only working with the so-called type selector 126 00:06:01,030 --> 00:06:03,590 and a pseudo selector here with the hover effect 127 00:06:03,590 --> 00:06:06,610 in our full week CSS file. 128 00:06:06,610 --> 00:06:09,160 Now, the thing is that we don't only have 129 00:06:09,160 --> 00:06:11,040 these type selectors. 130 00:06:11,040 --> 00:06:14,340 You learned about one other selector in the last module 131 00:06:14,340 --> 00:06:17,690 here in the daily challenge CSS file, 132 00:06:17,690 --> 00:06:20,040 we have this todays-challenge selector, 133 00:06:20,040 --> 00:06:22,530 a so-called ID selector, 134 00:06:22,530 --> 00:06:26,483 which was added right here by this ID attribute. 135 00:06:27,940 --> 00:06:31,230 Now with our website becoming a bit more complex 136 00:06:31,230 --> 00:06:34,620 step by step, the next thing we should discover now 137 00:06:34,620 --> 00:06:38,220 is if we have additional selectors 138 00:06:38,220 --> 00:06:39,700 which might be helpful here 139 00:06:39,700 --> 00:06:42,310 to select exactly the specific element 140 00:06:42,310 --> 00:06:44,300 that should be selected. 141 00:06:44,300 --> 00:06:48,310 Because what if we would add a fourth list item here, 142 00:06:48,310 --> 00:06:53,310 for example right here, and say learn all about forms, 143 00:06:56,340 --> 00:06:59,200 and now we have four different goals 144 00:06:59,200 --> 00:07:01,800 and now two goals should be highlighted 145 00:07:01,800 --> 00:07:04,530 as your main priority goals. 146 00:07:04,530 --> 00:07:06,630 With an ID, this would not be possible 147 00:07:06,630 --> 00:07:11,470 because as you learned, the ID should only be used once. 148 00:07:11,470 --> 00:07:13,380 It's a unique ID. 149 00:07:13,380 --> 00:07:15,570 Selecting the list items won't work 150 00:07:15,570 --> 00:07:17,960 because then all list items would be highlighted. 151 00:07:17,960 --> 00:07:20,773 So what do we do in such cases?