1 00:00:02,170 --> 00:00:04,850 Now we got our editor's set up 2 00:00:04,850 --> 00:00:07,160 and even before that wrote 3 00:00:07,160 --> 00:00:11,980 our first HTML code, which leads to this page. 4 00:00:11,980 --> 00:00:13,730 And of course, this is great. 5 00:00:13,730 --> 00:00:15,210 It's our first page, 6 00:00:15,210 --> 00:00:18,090 but the content of this page is not amazing yet. 7 00:00:18,090 --> 00:00:21,330 This is of course not a realistic website. 8 00:00:21,330 --> 00:00:25,100 We typically want to build more complex things. Nonetheless, 9 00:00:25,100 --> 00:00:28,490 this of course is our first important step. 10 00:00:28,490 --> 00:00:32,570 Now let's take a closer look at this HTML code though, 11 00:00:32,570 --> 00:00:36,180 because understanding this code and how it works and how you 12 00:00:36,180 --> 00:00:37,840 would add more content, 13 00:00:37,840 --> 00:00:41,660 that of course all is extremely important to become a web 14 00:00:41,660 --> 00:00:43,010 developer. 15 00:00:43,010 --> 00:00:47,370 Now, HTML is a markup language, 16 00:00:47,370 --> 00:00:49,770 and that means that it is in the end, 17 00:00:49,770 --> 00:00:54,770 a language that is there to add extra annotation to content, 18 00:00:55,300 --> 00:00:57,840 which we might have in our page, 19 00:00:57,840 --> 00:01:01,210 just as we might make content bold, 20 00:01:01,210 --> 00:01:05,510 or turn content into a title or a subtitle in a word 21 00:01:05,510 --> 00:01:06,500 document. 22 00:01:06,500 --> 00:01:09,881 We also typically want to assign different meanings to the 23 00:01:09,881 --> 00:01:14,460 different pieces of content we have on our webpage, 24 00:01:14,460 --> 00:01:15,930 because on a webpage, 25 00:01:15,930 --> 00:01:20,310 we also have titles and subtitles and paragraphs of texts 26 00:01:20,310 --> 00:01:22,710 and links and images and buttons. 27 00:01:22,710 --> 00:01:26,920 And we describe our content with HTML. 28 00:01:26,920 --> 00:01:30,040 That's why it's called a markup language. 29 00:01:30,040 --> 00:01:35,040 HTML is a language for adding extra meaning to our content. 30 00:01:35,530 --> 00:01:38,570 Hence, describing our content. 31 00:01:38,570 --> 00:01:42,180 HTML instructs the browser about our content, 32 00:01:42,180 --> 00:01:44,520 its structure and its meaning. 33 00:01:44,520 --> 00:01:49,520 And we do provide extra meaning and structure to our content 34 00:01:49,650 --> 00:01:54,650 with those angled bracket things here, we write HTML code, 35 00:01:55,110 --> 00:01:59,610 always like this and this overall thing here. 36 00:01:59,610 --> 00:02:04,247 This entire code snippet here is called a so-called HTML 37 00:02:05,160 --> 00:02:06,330 element. 38 00:02:06,330 --> 00:02:09,630 So let's start understand these HTML elements 39 00:02:10,738 --> 00:02:11,571 and how they are 40 00:02:11,571 --> 00:02:13,360 written and structured and what their different building 41 00:02:13,360 --> 00:02:14,263 blocks are. 42 00:02:15,781 --> 00:02:17,140 As I just said, this entire thing, 43 00:02:17,140 --> 00:02:21,440 which we wrote is a so-called HTML element and those 44 00:02:21,440 --> 00:02:23,780 elements, as a whole, tell the browser 45 00:02:23,780 --> 00:02:25,480 what our content is and 46 00:02:25,480 --> 00:02:28,000 which kind of content it is. 47 00:02:28,000 --> 00:02:32,610 We do inform the browser about the type of content with help 48 00:02:32,610 --> 00:02:37,610 of those angle bracket, things which are called HTML tags. 49 00:02:39,090 --> 00:02:41,660 So every HTML element, 50 00:02:41,660 --> 00:02:46,080 which is the entire thing has such HTML tags, 51 00:02:46,080 --> 00:02:49,720 which describe which kind of content is stored inside of 52 00:02:49,720 --> 00:02:51,880 that element and that's there 53 00:02:51,880 --> 00:02:53,613 for the parts between the tags, 54 00:02:53,613 --> 00:02:56,240 the element content. 55 00:02:56,240 --> 00:03:00,870 So an HTML element is made up of HTML tags and the element 56 00:03:00,870 --> 00:03:02,030 content. 57 00:03:02,030 --> 00:03:06,460 Now you can't pick any arbitrary tags and I'll come back for 58 00:03:06,460 --> 00:03:07,320 that later, 59 00:03:07,320 --> 00:03:11,140 but instead there is a clearly standardized list of 60 00:03:11,140 --> 00:03:15,210 available tags, which you as a web developer can use. 61 00:03:15,210 --> 00:03:16,043 For example, 62 00:03:16,043 --> 00:03:20,830 the h1 tag stands for heading one and marks a main 63 00:03:20,830 --> 00:03:23,670 title on your website. 64 00:03:23,670 --> 00:03:27,990 There are other tags for describing other types of content, 65 00:03:27,990 --> 00:03:30,793 but that's something we're going to dive into later. 66 00:03:31,670 --> 00:03:33,060 Now for those tags, 67 00:03:33,060 --> 00:03:37,260 you might of course notice that these two tags don't look 68 00:03:37,260 --> 00:03:38,693 exactly the same. 69 00:03:39,677 --> 00:03:44,290 The second tag has this forward slash after the opening 70 00:03:44,290 --> 00:03:45,263 angle bracket, 71 00:03:46,330 --> 00:03:48,490 the first tag does not have that. 72 00:03:48,490 --> 00:03:49,920 That's the case because 73 00:03:49,920 --> 00:03:52,570 we have two different kinds of tags 74 00:03:52,570 --> 00:03:55,590 for every HTML element. 75 00:03:55,590 --> 00:03:59,190 We have the opening and the closing tag, 76 00:03:59,190 --> 00:04:03,210 and we have a different syntax here as it's called. 77 00:04:03,210 --> 00:04:07,102 We have the forward slash on the closing tag to tell those 78 00:04:07,102 --> 00:04:10,030 two tags apart for the browser. 79 00:04:10,030 --> 00:04:12,180 So for the computer in the end, 80 00:04:12,180 --> 00:04:15,334 And we need this differentiation because we want to tell the 81 00:04:15,334 --> 00:04:20,334 browser where an element starts and where it ends, 82 00:04:20,579 --> 00:04:23,520 and if we would be using exactly the same tag. 83 00:04:23,520 --> 00:04:26,994 So both times without the forward slash for example, 84 00:04:26,994 --> 00:04:31,280 then the browser wouldn't know if the second time we use it 85 00:04:31,280 --> 00:04:35,900 marks the end of an element or already the start of another 86 00:04:35,900 --> 00:04:37,130 element. 87 00:04:37,130 --> 00:04:40,190 That's why we have a clear distinction here between opening 88 00:04:40,190 --> 00:04:43,760 and closing tag, and we therefore have opening tag, 89 00:04:43,760 --> 00:04:47,660 content closing tag, and that altogether forms 90 00:04:47,660 --> 00:04:49,473 the HTML element. 91 00:04:50,350 --> 00:04:53,050 Now, if we take a closer look at those texts, 92 00:04:53,050 --> 00:04:56,530 we can also split those up even more there, 93 00:04:56,530 --> 00:05:01,040 we have those angle brackets less than and greater than. 94 00:05:01,040 --> 00:05:02,950 And between those angle brackets, 95 00:05:02,950 --> 00:05:05,730 we have the so-called element name, 96 00:05:05,730 --> 00:05:07,990 and that's another official term, 97 00:05:07,990 --> 00:05:10,200 which you might want to memorize. 98 00:05:10,200 --> 00:05:14,440 So in this case, h1 is the element name, 99 00:05:14,440 --> 00:05:19,020 Hello World is the element content together with the angle 100 00:05:19,020 --> 00:05:21,646 brackets, the element name forms the HTML tag. 101 00:05:21,646 --> 00:05:24,380 And when it comes to those tags, 102 00:05:24,380 --> 00:05:27,330 we have the opening tag and the closing tag, 103 00:05:27,330 --> 00:05:29,600 which looks just like the opening tag, 104 00:05:29,600 --> 00:05:32,060 but has this extra forward slash, 105 00:05:32,060 --> 00:05:34,558 and that all together forms the HTML element, 106 00:05:34,558 --> 00:05:39,128 which has the Hello World content and instructs the browser 107 00:05:39,128 --> 00:05:43,870 about which kind of content this is in case of the h1 108 00:05:43,870 --> 00:05:44,703 tag, 109 00:05:44,703 --> 00:05:48,350 it tells the browser that this is a main heading a main 110 00:05:48,350 --> 00:05:50,083 title on the website, 111 00:05:50,920 --> 00:05:54,500 but that of course brings us to another important question, 112 00:05:54,500 --> 00:05:57,420 which HTML elements exist. 113 00:05:57,420 --> 00:06:00,073 How do we know which elements we can use.