1 1 00:00:00,610 --> 00:00:01,970 In this lecture, we need to talk about 2 2 00:00:01,970 --> 00:00:04,330 an important concept in modern HTML 3 3 00:00:04,330 --> 00:00:08,220 that cuts to the core of what HTM is actually for. 4 4 00:00:08,220 --> 00:00:11,920 So far we've discussed HTML in the context of describing 5 5 00:00:11,920 --> 00:00:14,820 and structuring the content on the page. 6 6 00:00:14,820 --> 00:00:16,670 When we talk about describing the content of the page 7 7 00:00:16,670 --> 00:00:18,940 it's worth asking, what features 8 8 00:00:18,940 --> 00:00:20,980 are we interested in describing? 9 9 00:00:20,980 --> 00:00:22,020 What are we describing 10 10 00:00:22,020 --> 00:00:25,650 and who are we describing those features for? 11 11 00:00:25,650 --> 00:00:27,680 So let's take a look at that in this video. 12 12 00:00:27,680 --> 00:00:28,580 Let's get started. 13 13 00:00:30,430 --> 00:00:33,020 So what are we trying to describe? 14 14 00:00:33,020 --> 00:00:36,120 HTML is used to describe the meaning of the page's content. 15 15 00:00:36,120 --> 00:00:40,040 I've said this many times throughout this course already. 16 16 00:00:40,040 --> 00:00:41,700 So what does that mean? 17 17 00:00:41,700 --> 00:00:45,670 Well, it means that what is the role of a block of content 18 18 00:00:45,670 --> 00:00:47,920 in the context of the whole document? 19 19 00:00:47,920 --> 00:00:51,780 What does each piece of the HTML document do? 20 20 00:00:51,780 --> 00:00:53,253 What does it represent? 21 21 00:00:54,220 --> 00:00:57,840 HTML is not for describing what the page looks like, 22 22 00:00:57,840 --> 00:01:00,783 like colours, sizes, shadows, et cetera. 23 23 00:01:01,770 --> 00:01:03,910 Although when we use different HTML documents 24 24 00:01:03,910 --> 00:01:05,890 they do look different. 25 25 00:01:05,890 --> 00:01:07,670 That's because the browser 26 26 00:01:07,670 --> 00:01:10,940 applies default styles to every element. 27 27 00:01:10,940 --> 00:01:12,990 For example, if you have a paragraph 28 28 00:01:12,990 --> 00:01:16,210 and inside the paragraph you have some bold HTML element 29 29 00:01:16,210 --> 00:01:20,190 or <b> element, then those are generally displayed 30 30 00:01:20,190 --> 00:01:24,830 or rendered or painted by the browser as bold, 31 31 00:01:24,830 --> 00:01:27,700 but we should avoid using HTML for visual effect, 32 32 00:01:27,700 --> 00:01:30,860 because that's just not what it's for. 33 33 00:01:30,860 --> 00:01:31,890 Let's take a look at an example. 34 34 00:01:31,890 --> 00:01:35,580 Here is some HTML code, very simply HTML code, 35 35 00:01:35,580 --> 00:01:38,350 which is a paragraph element, a <p> element, 36 36 00:01:38,350 --> 00:01:40,050 with some text inside it 37 37 00:01:40,050 --> 00:01:41,680 and you can see that inside that text 38 38 00:01:41,680 --> 00:01:45,410 we've got an <em> element, which is used for emphasis. 39 39 00:01:45,410 --> 00:01:47,170 If you give that to a browser, 40 40 00:01:47,170 --> 00:01:49,730 it will display the text that's shown at the bottom. 41 41 00:01:49,730 --> 00:01:51,780 This is some lorem ipsum text 42 42 00:01:51,780 --> 00:01:55,110 and lorem ipsum is going to be italics. 43 43 00:01:55,110 --> 00:01:58,410 However, here's some different HTML code 44 44 00:01:58,410 --> 00:02:01,670 that displays the exact same output. 45 45 00:02:01,670 --> 00:02:06,670 This is some < i lang="la"> lorem ipsum text. 46 46 00:02:06,720 --> 00:02:09,580 So you can see that the element that contains lorem ipsum 47 47 00:02:09,580 --> 00:02:11,670 is a different element, 48 48 00:02:11,670 --> 00:02:15,370 but the browser will display them both as identical. 49 49 00:02:15,370 --> 00:02:18,240 So what does that mean? 50 50 00:02:18,240 --> 00:02:22,280 Well, it means that the browser has the same default style 51 51 00:02:22,280 --> 00:02:25,853 for the <em> element as for the <i> element. 52 52 00:02:26,950 --> 00:02:30,130 However, they have different meanings. 53 53 00:02:30,130 --> 00:02:33,170 The <em> element is used for emphasis. 54 54 00:02:33,170 --> 00:02:35,640 So that is saying that lorem ipsum 55 55 00:02:35,640 --> 00:02:40,300 is a particularly important part of this paragraph. 56 56 00:02:40,300 --> 00:02:44,300 However, the <i> element is used for idiomatic text 57 57 00:02:44,300 --> 00:02:46,660 or something that comes from a different language. 58 58 00:02:46,660 --> 00:02:49,860 So this tells it that this is Latin text. 59 59 00:02:49,860 --> 00:02:51,270 Now, obviously, which element you use 60 60 00:02:51,270 --> 00:02:54,490 depends on what you want your document to mean. 61 61 00:02:54,490 --> 00:02:57,590 If lorem ipsum is a very important word in your paragraph 62 62 00:02:57,590 --> 00:02:59,150 then you should use <em > 63 63 00:02:59,150 --> 00:03:00,760 But if what you're trying to convey 64 64 00:03:00,760 --> 00:03:02,390 is that it comes from Latin 65 65 00:03:02,390 --> 00:03:04,570 and therefore it can't be read 66 66 00:03:04,570 --> 00:03:06,700 in the same way as the rest of the paragraph, 67 67 00:03:06,700 --> 00:03:08,400 then you should use the <i> element 68 68 00:03:08,400 --> 00:03:11,870 and provide lang=la as an attribute, 69 69 00:03:11,870 --> 00:03:13,930 we're gonna learn more about those later on, 70 70 00:03:13,930 --> 00:03:16,130 to tell it that this is Latin text. 71 71 00:03:16,130 --> 00:03:18,370 The la stands for Latin. 72 72 00:03:18,370 --> 00:03:20,810 So this is really the point of this lecture. 73 73 00:03:20,810 --> 00:03:23,000 The browser has default styles 74 74 00:03:23,000 --> 00:03:25,210 and your page is going to look maybe similar, 75 75 00:03:25,210 --> 00:03:27,230 even if you use different elements, 76 76 00:03:27,230 --> 00:03:28,270 but where you have to focus on 77 77 00:03:28,270 --> 00:03:32,750 on when we're coding HTML is what those elements mean. 78 78 00:03:32,750 --> 00:03:33,760 So let's take a look at 79 79 00:03:33,760 --> 00:03:37,340 who we are describing the content for, 80 80 00:03:37,340 --> 00:03:40,610 because the people that are gonna be looking at our pages 81 81 00:03:40,610 --> 00:03:43,680 are mostly concerned about the styling of them. 82 82 00:03:43,680 --> 00:03:45,440 So for somebody that's just 83 83 00:03:45,440 --> 00:03:47,080 looking at your page on a browser 84 84 00:03:47,080 --> 00:03:52,050 both of those pieces of HTML are the same, really. 85 85 00:03:52,050 --> 00:03:53,710 So who are we describing for? 86 86 00:03:53,710 --> 00:03:56,530 Well, we're describing for computers. 87 87 00:03:56,530 --> 00:04:00,110 It is the computer that is going to read the HTML code 88 88 00:04:00,110 --> 00:04:03,900 and turn it into something that person is gonna look at. 89 89 00:04:03,900 --> 00:04:05,750 So that's really key. 90 90 00:04:05,750 --> 00:04:09,740 Computers turn the HTML into things that user sees, 91 91 00:04:09,740 --> 00:04:12,200 but computers not only do that. 92 92 00:04:12,200 --> 00:04:15,690 HTML is also vital for things like screen readers, 93 93 00:04:15,690 --> 00:04:17,300 also computers in a way, 94 94 00:04:17,300 --> 00:04:19,910 but the screen reader is going to tell the user 95 95 00:04:19,910 --> 00:04:23,790 if they have, for example, eyesight problems 96 96 00:04:23,790 --> 00:04:26,290 what things mean and how to find different things 97 97 00:04:26,290 --> 00:04:28,810 on their page and it's gonna help them navigate the page. 98 98 00:04:28,810 --> 00:04:31,820 So a good markup is gonna really help navigation 99 99 00:04:31,820 --> 00:04:35,150 for people that need accessibility help. 100 100 00:04:35,150 --> 00:04:40,150 So use HTML to describe the content, what the content means 101 101 00:04:41,160 --> 00:04:43,230 and that is why we focus on using 102 102 00:04:43,230 --> 00:04:45,950 correct markup and good markup 103 103 00:04:45,950 --> 00:04:49,270 and then now we're gonna use CSS to style the output 104 104 00:04:49,270 --> 00:04:52,220 or we're gonna say, "Okay this <em> element 105 105 00:04:52,220 --> 00:04:54,610 is gonna look like that, it's gonna be red 106 106 00:04:54,610 --> 00:04:57,530 or it's gonna be bigger or it's gonna be italics. 107 107 00:04:57,530 --> 00:05:00,230 And we can similarly style the <i> element 108 108 00:05:00,230 --> 00:05:02,810 in a completely different way if we want to, 109 109 00:05:02,810 --> 00:05:05,300 but for the computer or for a screen reader, 110 110 00:05:05,300 --> 00:05:08,430 or even for Google when they are looking at your page 111 111 00:05:08,430 --> 00:05:11,470 to determine where to place it in their search rankings, 112 112 00:05:11,470 --> 00:05:13,640 the HTML is really what's telling them 113 113 00:05:13,640 --> 00:05:16,730 what is in the page and what the page of means. 114 114 00:05:16,730 --> 00:05:20,290 So again, we're gonna use HTML to describe the content 115 115 00:05:20,290 --> 00:05:21,960 and we're gonna use CSS to style it 116 116 00:05:21,960 --> 00:05:25,020 and we can style everything in different ways, 117 117 00:05:25,020 --> 00:05:27,710 totally up to us, how the page ends up looking. 118 118 00:05:27,710 --> 00:05:28,680 So we're gonna look at CSS 119 119 00:05:28,680 --> 00:05:30,410 in more detail in the next section, 120 120 00:05:30,410 --> 00:05:34,430 but this is really, really key for web development. 121 121 00:05:34,430 --> 00:05:36,000 So thank you guys for joining me in this video. 122 122 00:05:36,000 --> 00:05:37,590 I hope this was useful 123 123 00:05:37,590 --> 00:05:39,240 and I'll see you in the next one.