1 00:00:02,070 --> 00:00:03,320 Now did we did add 2 00:00:03,320 --> 00:00:05,860 this special style element, 3 00:00:05,860 --> 00:00:08,420 we can definitely see that there are different kinds 4 00:00:08,420 --> 00:00:10,410 of HTML elements. 5 00:00:10,410 --> 00:00:13,440 The vast majority of available elements is 6 00:00:13,440 --> 00:00:14,790 about outputting content, 7 00:00:14,790 --> 00:00:17,760 which we can see like this text here, 8 00:00:17,760 --> 00:00:20,610 but we also have some elements like style, 9 00:00:20,610 --> 00:00:24,220 which do something which might have in visual impact, 10 00:00:24,220 --> 00:00:26,520 after all this sets some styling. 11 00:00:26,520 --> 00:00:29,630 But of course the style element itself is not visible. 12 00:00:29,630 --> 00:00:31,380 We don't see it here on the screen. 13 00:00:32,490 --> 00:00:35,968 So we could say that this style element 14 00:00:35,968 --> 00:00:40,320 actually adds some meta information to our page. 15 00:00:40,320 --> 00:00:43,380 It adds some information which is important for the browser, 16 00:00:43,380 --> 00:00:46,930 but which is not visible itself to the user. 17 00:00:46,930 --> 00:00:51,250 And because we have that differentiation between actual 18 00:00:51,250 --> 00:00:55,490 visible elements, and content, and meta information, 19 00:00:55,490 --> 00:01:00,490 we also should split our HTML document into two parts 20 00:01:01,680 --> 00:01:04,580 to make that separation between meta data 21 00:01:04,580 --> 00:01:06,610 and content more official. 22 00:01:06,610 --> 00:01:09,270 Because there is an official anatomy 23 00:01:09,270 --> 00:01:11,870 of a valid HTML document, 24 00:01:11,870 --> 00:01:15,980 which we should try to respect as a web developer. 25 00:01:15,980 --> 00:01:19,340 If we have visible content like a h1 tag 26 00:01:19,340 --> 00:01:21,130 with some text inside of it, 27 00:01:21,130 --> 00:01:23,350 we should wrap this kind of content 28 00:01:23,350 --> 00:01:25,950 with a extra body element. 29 00:01:25,950 --> 00:01:30,870 So that then defines the actual page content of our page. 30 00:01:30,870 --> 00:01:33,900 And we should then have a extra head section 31 00:01:33,900 --> 00:01:37,140 next to the body, which will hold extra metadata 32 00:01:37,140 --> 00:01:38,590 for this page. 33 00:01:38,590 --> 00:01:41,750 For example, styles, or also a title, 34 00:01:41,750 --> 00:01:43,610 which we're going to set soon, 35 00:01:43,610 --> 00:01:45,510 which will set the page title, 36 00:01:45,510 --> 00:01:47,380 which will not show up on the page. 37 00:01:47,380 --> 00:01:48,620 But which for example, 38 00:01:48,620 --> 00:01:52,310 would be the title showing up on search engines. 39 00:01:52,310 --> 00:01:56,330 What you see here, that's what's set with the title element 40 00:01:56,330 --> 00:01:59,810 in the head section of an HTML file. 41 00:01:59,810 --> 00:02:02,960 So you should split your HTML elements 42 00:02:02,960 --> 00:02:07,360 into these two main sections, head and body. 43 00:02:07,360 --> 00:02:09,960 And then those two sections should be wrapped 44 00:02:09,960 --> 00:02:12,350 by an HTML element. 45 00:02:12,350 --> 00:02:15,000 So an element named HTML, 46 00:02:15,000 --> 00:02:18,200 and then last but not least at the very top of the file, 47 00:02:18,200 --> 00:02:20,790 you should have this DOCTYPE element, 48 00:02:20,790 --> 00:02:22,510 which looks super weird. 49 00:02:22,510 --> 00:02:25,680 And which is the only kind of element that looks that weird, 50 00:02:25,680 --> 00:02:27,300 which simply tells the browser, 51 00:02:27,300 --> 00:02:30,290 which version of HTML we're using. 52 00:02:30,290 --> 00:02:31,830 Why does this matter? 53 00:02:31,830 --> 00:02:35,970 Because HTML is a language with some history. 54 00:02:35,970 --> 00:02:39,170 It's not a language that was invented yesterday. 55 00:02:39,170 --> 00:02:43,490 Instead, HTML has been around since 1993, 56 00:02:43,490 --> 00:02:47,120 which was when HTML version 1 was released. 57 00:02:47,120 --> 00:02:49,560 And then we had different versions being released 58 00:02:49,560 --> 00:02:51,140 over the different years. 59 00:02:51,140 --> 00:02:54,503 And the most important, big new version that was released 60 00:02:54,503 --> 00:02:58,600 was HTML 5 in 2014. 61 00:02:58,600 --> 00:03:01,100 And that's the version with which we still work 62 00:03:01,100 --> 00:03:03,980 and which will stick around for the future. 63 00:03:03,980 --> 00:03:06,660 But because we have those different versions 64 00:03:06,660 --> 00:03:09,360 and theoretically you could still have a webpage 65 00:03:09,360 --> 00:03:12,060 that was built before 2014, 66 00:03:12,060 --> 00:03:14,690 and that was never updated thereafter, 67 00:03:14,690 --> 00:03:17,700 it is strongly recommended that you do specify 68 00:03:17,700 --> 00:03:22,130 the HTML version you are using in your HTML document, 69 00:03:22,130 --> 00:03:25,420 right at the top with this special line, 70 00:03:25,420 --> 00:03:29,760 and this special, strange looking HTML element, 71 00:03:29,760 --> 00:03:32,380 exclamation mark, DOCTYPE html. 72 00:03:32,380 --> 00:03:36,360 That simply means that we're using HTML version 5, 73 00:03:36,360 --> 00:03:38,950 even though there is no 5 in this element, 74 00:03:38,950 --> 00:03:40,430 but that's what it is. 75 00:03:40,430 --> 00:03:43,340 And that then simply tells the browser that we're using 76 00:03:43,340 --> 00:03:45,430 the latest version of HTML. 77 00:03:45,430 --> 00:03:47,240 And if we would not have that, 78 00:03:47,240 --> 00:03:49,190 we would tell the browser that we don't know 79 00:03:49,190 --> 00:03:51,600 which word we're using, or that we're maybe using 80 00:03:51,600 --> 00:03:54,280 an older version, which then will affect 81 00:03:54,280 --> 00:03:58,010 how the browser sees and parses our page. 82 00:03:58,010 --> 00:04:02,430 So we should add this as well and then have the HTML element 83 00:04:02,430 --> 00:04:04,593 with head and body inside of it. 84 00:04:05,440 --> 00:04:07,910 And you might recall that in the dev tools, 85 00:04:07,910 --> 00:04:10,990 you actually already solved this separation. 86 00:04:10,990 --> 00:04:14,880 There, you already see HTML head and body, 87 00:04:14,880 --> 00:04:18,240 even though we haven't added this in our code. 88 00:04:18,240 --> 00:04:20,779 But the browser kind of adds it automatically 89 00:04:20,779 --> 00:04:24,680 if it's missing, but that's no excuse for us to not add it. 90 00:04:24,680 --> 00:04:26,190 We should always add it. 91 00:04:26,190 --> 00:04:28,840 Also to help other developers 92 00:04:28,840 --> 00:04:30,850 or ourself in a couple of months, 93 00:04:30,850 --> 00:04:33,930 when we come back to this code to quickly see 94 00:04:33,930 --> 00:04:36,360 where our metadata will be defined 95 00:04:36,360 --> 00:04:38,793 and where the actual page content will live. 96 00:04:39,870 --> 00:04:42,270 And therefore now we'll change this. 97 00:04:42,270 --> 00:04:46,730 I'll add this DOCTYPE html element at the top. 98 00:04:46,730 --> 00:04:51,110 And then below that, the HTML element opening and closing. 99 00:04:51,110 --> 00:04:53,500 And then inside of this HTML element, 100 00:04:53,500 --> 00:04:58,000 we add the head element and next to this head element, 101 00:04:58,000 --> 00:04:59,223 the body element. 102 00:05:00,180 --> 00:05:02,160 And then we put metadata, 103 00:05:02,160 --> 00:05:06,500 like this style element into the head section. 104 00:05:06,500 --> 00:05:08,653 So cut this and add this here. 105 00:05:09,720 --> 00:05:12,210 And we put our visual body. 106 00:05:12,210 --> 00:05:17,033 So all the HTML code down there into this body. 107 00:05:18,400 --> 00:05:22,210 And now we got a correctly structured HTML document. 108 00:05:22,210 --> 00:05:25,180 And if we save this and reload, 109 00:05:25,180 --> 00:05:27,910 you see there's some spacing added at the top, 110 00:05:27,910 --> 00:05:30,260 which is some browser default style, 111 00:05:30,260 --> 00:05:33,480 which we get now that we have this official structure. 112 00:05:33,480 --> 00:05:35,850 But other than that, nothing changed. 113 00:05:35,850 --> 00:05:38,280 Still, this is the structure you should use 114 00:05:38,280 --> 00:05:41,520 for every HTML file you're creating 115 00:05:41,520 --> 00:05:45,270 because that is the correct form of defining HTML 116 00:05:45,270 --> 00:05:49,470 and of splitting your metadata and your visual data. 117 00:05:49,470 --> 00:05:52,060 And now, speaking of metadata, 118 00:05:52,060 --> 00:05:56,730 I did mention this title here on this slide. 119 00:05:56,730 --> 00:05:58,690 And I mentioned that this sets the title, 120 00:05:58,690 --> 00:06:01,700 which shows up on search engines, for example. 121 00:06:01,700 --> 00:06:03,100 It also sets the title, 122 00:06:03,100 --> 00:06:06,070 which you see here in your tabs. 123 00:06:06,070 --> 00:06:09,030 At the moment, it just repeats the file name here, 124 00:06:09,030 --> 00:06:11,330 but you might want a different title here, 125 00:06:11,330 --> 00:06:13,600 so that if you have multiple tabs open, 126 00:06:13,600 --> 00:06:16,160 you don't just see index HTML here, 127 00:06:16,160 --> 00:06:19,613 but some title that clearly identifies your website. 128 00:06:20,740 --> 00:06:22,820 And to set this title, 129 00:06:22,820 --> 00:06:25,830 you simply add another HTML element here 130 00:06:25,830 --> 00:06:29,243 inside of this head section, the title element. 131 00:06:30,270 --> 00:06:33,740 Now title sounds a bit like it would set some title, 132 00:06:33,740 --> 00:06:36,380 which you see on the screen, but it doesn't. 133 00:06:36,380 --> 00:06:39,480 For titles, and headings, and headlines 134 00:06:39,480 --> 00:06:40,850 that should be visible, 135 00:06:40,850 --> 00:06:43,270 you should use the h1 element 136 00:06:43,270 --> 00:06:47,660 or one of its sibling elements, h2, h3, 137 00:06:47,660 --> 00:06:50,320 which we're going to see later in the course. 138 00:06:50,320 --> 00:06:54,630 The title element is not visible on the page itself. 139 00:06:54,630 --> 00:06:56,760 Instead, it just sets this title, 140 00:06:56,760 --> 00:07:00,203 which shows up in a tab and in the search engine results. 141 00:07:01,070 --> 00:07:03,580 And here we could say, My Daily Challenge 142 00:07:03,580 --> 00:07:06,743 because we are building a daily challenge website here. 143 00:07:07,970 --> 00:07:11,320 And if we now set this title and save everything, 144 00:07:11,320 --> 00:07:14,470 if we reload, we see no change here on the screen, 145 00:07:14,470 --> 00:07:17,470 but now in the tab, you see this title now. 146 00:07:17,470 --> 00:07:20,460 And if you would have this website on a server 147 00:07:20,460 --> 00:07:22,940 and search engine crawlers would see it, 148 00:07:22,940 --> 00:07:25,560 it's also this title, which would show up 149 00:07:25,560 --> 00:07:28,630 on the search results as a title. 150 00:07:28,630 --> 00:07:31,690 And that's there for another common piece of metadata, 151 00:07:31,690 --> 00:07:34,063 which you often add to your pages.