1 1 00:00:01,090 --> 00:00:04,640 In this section, we're going to dive into the HTML syntax. 2 2 00:00:04,640 --> 00:00:05,550 But don't worry. 3 3 00:00:05,550 --> 00:00:07,420 HTML is not very complicated 4 4 00:00:07,420 --> 00:00:09,060 and you'll have a good understanding 5 5 00:00:09,060 --> 00:00:11,710 of what everything means in no time. 6 6 00:00:11,710 --> 00:00:15,040 So, first of all, what is an element in HTML? 7 7 00:00:15,040 --> 00:00:17,530 An HTML document is made up of units 8 8 00:00:17,530 --> 00:00:19,660 which describe the structure and meaning 9 9 00:00:19,660 --> 00:00:21,340 of a page's content. 10 10 00:00:21,340 --> 00:00:24,260 These units are called HTML elements. 11 11 00:00:24,260 --> 00:00:25,870 We write elements using tags 12 12 00:00:25,870 --> 00:00:28,580 which tell us where the elements start and end, 13 13 00:00:28,580 --> 00:00:31,280 and content between the opening and closing tags 14 14 00:00:31,280 --> 00:00:33,830 is considered to be inside the element. 15 15 00:00:33,830 --> 00:00:36,360 Some elements can't have content inside them. 16 16 00:00:36,360 --> 00:00:37,890 They're called void elements, 17 17 00:00:37,890 --> 00:00:40,870 and they're written with a single tag in HTML5, 18 18 00:00:40,870 --> 00:00:44,180 rather than with an opening on a closing tag. 19 19 00:00:44,180 --> 00:00:46,820 If the element we're writing can have content, 20 20 00:00:46,820 --> 00:00:49,550 then we can place other tags inside the content. 21 21 00:00:49,550 --> 00:00:53,040 That is how we construct a hierarchy using HTML. 22 22 00:00:53,040 --> 00:00:55,450 We can also write plain text between the tags, 23 23 00:00:55,450 --> 00:00:58,563 which is generally how we add text content to a page. 24 24 00:00:59,880 --> 00:01:02,190 We'll be covering how to nest HTML elements 25 25 00:01:02,190 --> 00:01:04,180 in more detail later on in the section, 26 26 00:01:04,180 --> 00:01:07,270 but first let's take a look at an example. 27 27 00:01:07,270 --> 00:01:10,690 The <p> element is one of the most common HTML elements. 28 28 00:01:10,690 --> 00:01:12,210 It represents paragraphs, 29 29 00:01:12,210 --> 00:01:15,170 and that can be used to break up chunks of text, 30 30 00:01:15,170 --> 00:01:17,760 but it also has a few more uses. 31 31 00:01:17,760 --> 00:01:18,900 Here's a paragraph element 32 32 00:01:18,900 --> 00:01:21,660 with a small amount of text content inside it. 33 33 00:01:21,660 --> 00:01:23,740 You can see there's an opening tag and a closing tag, 34 34 00:01:23,740 --> 00:01:26,330 because paragraph elements are permitted to have content. 35 35 00:01:26,330 --> 00:01:28,510 They wouldn't be much use otherwise. 36 36 00:01:28,510 --> 00:01:31,300 The opening tag is the name of the element, p, 37 37 00:01:31,300 --> 00:01:32,720 inside crocodile clips. 38 38 00:01:32,720 --> 00:01:35,010 And the closing tag contains a forward slash 39 39 00:01:35,010 --> 00:01:37,670 which marks it as a closing tag. 40 40 00:01:37,670 --> 00:01:39,310 If we don't write the forward slash, 41 41 00:01:39,310 --> 00:01:40,780 it looks like we're trying to create 42 42 00:01:40,780 --> 00:01:44,180 a second paragraph element inside the first one. 43 43 00:01:44,180 --> 00:01:46,800 And if we do that, our browsers will do their very best 44 44 00:01:46,800 --> 00:01:48,650 to fill in the missing closing tags, 45 45 00:01:48,650 --> 00:01:51,190 and we would end up with one paragraph element 46 46 00:01:51,190 --> 00:01:52,640 inside the other. 47 47 00:01:52,640 --> 00:01:54,980 But we shouldn't rely on the browser doing that. 48 48 00:01:54,980 --> 00:01:58,293 The browser might not put the closing tag where we intended. 49 49 00:01:59,500 --> 00:02:01,500 Okay, so far the opening tag for an element 50 50 00:02:01,500 --> 00:02:03,770 has just been the name of the element, 51 51 00:02:03,770 --> 00:02:07,530 but we can also write attributes in the opening tag as well. 52 52 00:02:07,530 --> 00:02:10,650 Different HTML elements accept different attributes. 53 53 00:02:10,650 --> 00:02:12,990 And they're used for a lot of different things, 54 54 00:02:12,990 --> 00:02:14,730 depending on the element. 55 55 00:02:14,730 --> 00:02:16,840 An attribute has three parts, 56 56 00:02:16,840 --> 00:02:19,740 a name, an equal sign, and a value. 57 57 00:02:19,740 --> 00:02:22,530 The value should be between quotation marks. 58 58 00:02:22,530 --> 00:02:25,280 For example, you might use an attribute to tell the browser 59 59 00:02:25,280 --> 00:02:28,420 that a certain form field will contain numbers. 60 60 00:02:28,420 --> 00:02:30,520 You could add another attribute to tell the browser 61 61 00:02:30,520 --> 00:02:32,150 that the field is required, 62 62 00:02:32,150 --> 00:02:36,029 and to not submit the form unless there is a value in it. 63 63 00:02:36,029 --> 00:02:39,300 Here you can see I'm missing the equal sign and the value. 64 64 00:02:39,300 --> 00:02:40,133 This is a shorthand 65 65 00:02:40,133 --> 00:02:43,490 for writing equal empty string after the attribute name. 66 66 00:02:43,490 --> 00:02:46,850 And it's used for attributes which don't take any value. 67 67 00:02:46,850 --> 00:02:49,440 You could write required equal quotation marks, 68 68 00:02:49,440 --> 00:02:51,660 but it's not really necessary. 69 69 00:02:51,660 --> 00:02:52,550 Later in this section, 70 70 00:02:52,550 --> 00:02:56,100 we'll take a look at some common attributes, class and ID, 71 71 00:02:56,100 --> 00:02:57,570 which can be used as anchors 72 72 00:02:57,570 --> 00:02:59,040 for referring to specific elements. 73 73 00:02:59,040 --> 00:03:02,080 We'll also learn why that is useful. 74 74 00:03:02,080 --> 00:03:04,090 All right. Thank you so much for joining me in this video. 75 75 00:03:04,090 --> 00:03:06,890 Thank you for watching and I'll see you in the next one.