Hi everyone, Kevin here. Today we’re going to learn the basics of HTML or what stands for hypertext markup language. I know that may not mean very much right now, but the thing to keep in mind is that it’s the basic building block of the web. When you type in a website address, like let’s say kevincookiecompany.com, the web server sends back an HTML file to your web browser, say Google Chrome or Microsoft Edge, that tells your browser how to display the content on the page. In this video, we’re going to build a very simple HTML page and you’re welcome to follow along. We’ll go through this step-by-step and the great thing is you don’t have to install anything, you already have all the tools that you need. We’ll start with the basic HTML structure, what elements you have available. We’re not going to touch CSS or cascading style sheets, which defines the look and feel of the page. We’re also not going to touch on JavaScript, which allows you to make a website more interactive. We’re just looking at the essentials of HTML. So if you’re ready to learn about HTML, let’s check this out. Here I am on my desktop and we are going to create an HTML website directly on your computer. I happen to be running Windows, but this will work on any operating system. On my desktop, I’ll right click and let’s go down to new. At the very top of this menu, let’s click on folder and this places a new folder on my desktop. I’ll title it Kevin Cookie Company Website and feel free to do the same if you would like to follow along. Then let’s click into this folder. This opens up File Explorer. At the very top, let’s click on view and then go all the way to the bottom to show. Within this menu, we see the option for file name extensions. Make sure that there’s a check mark next to this, and you’ll see why in just a moment. Let’s now click out of this menu. Let’s now right click and within this menu, let’s go to new and then let’s select text document. This now places a new text document in the Kevin Cookie Company Website. And because we turned on file name extensions, you’ll see that the extension is .txt. Now we want to create an HTML file. So, let’s select all of this and in place of this text, let’s type in index.html. Look at that. We’re creating our very first HTML file. Let’s now click away. And when we click away, we get a dialogue telling us that we’re changing the file name extension and that the file might become unusable. That sounds scary, but we know why we’re changing it to .html. So, let’s click on yes. And as soon as we do that, you’ll now notice a logo appears next to the file name. This simply means that Windows knows what application is associated with this file. Microsoft Edge is my default browser, which is why we see the Edge logo here, but you might see the Google Chrome logo if that’s your default browser. Let’s now click on this file and this opens up Microsoft Edge, or maybe it opens up Google Chrome. And look at that. We’ve now opened our very first HTML file, but you’ll notice that there’s nothing in this file. It’s completely blank. And that makes sense because we haven’t yet added anything to that HTML file. Let’s now close out this browser window. Back in File Explorer, I now want to edit my HTML file. So, I’ve opened up an application called Notepad. It’s a really simple application and you don’t have to install it. It comes pre-installed on Windows PCs. Especially for creating a very basic HTML website, Notepad will work just fine. To edit this file index.html in Notepad, simply press and hold on this file and then drag and drop it into Notepad. And up at the top, we’ll see that it’s opened up a new tab for index.html. I’ll click onto the untitled tab and let me close out of that. So here we just have this one file open and down below, I can type in some text. Let’s type in Kevin Cookie Company, and then I’ll press control S and that saves the file. Back over here, let’s click on index.html and that opens up Microsoft Edge. And look at that. We’ve now included some content into our HTML file. Nice work so far. Let’s close back out of Edge. Back within File Explorer, I want to be able to edit my website side-by-side with my browser window so I can see all of the different changes that I’m making. I’ll snap this window over to the left-hand side and next I’ll click into File Explorer and let’s open up this index.html file again in the browser, and let’s snap this over to the right-hand side. And now I have my Notepad opened up side-by-side with my web browser. This way I could see all of the changes that I’m making. I now want to add some additional text to my HTML file. I’ll press enter on my keyboard and here I’ll paste in some additional text. You can pull this text from the kevincookiecompany.com website if you simply want to copy and paste it into your index.html file. I’ll press control S in Notepad. That saves the file. Then I’ll click into the browser window and a really easy way to refresh the view is simply press the F5 key and that’ll refresh it, and here I see all that text within the browser window. If you look closely at the text in the web browser, it doesn’t quite match up with what we see in the HTML file. I’ll zoom in a little bit here. I say the Kevin Cookie Company. This is my title and then I have a new line where it jumps to deliciousness in every bite. If we look over at the HTML file, here it says Kevin Cookie Company and it just runs into that next sentence. So why is that? Well, HTML is what’s called a declarative language. We need to declare what things are. So, I need to tell it, hey, this is a title. This is a header. This is a paragraph, or maybe this is a list. I need to tell the computer the meaning of the different content that I have in my file. And to do that, we’re going to use something called elements and also tags. Let’s now insert our very first tag. I want Kevin Cookie Company to be the header of this entire page. To insert a tag, we’re going to enter in the less than symbol followed by H, H for header. Then I’ll enter in a one. This is the biggest header. And then I’ll enter in the greater than symbol. So, there’s my very first tag. Now I could save my file and over on the right-hand side, I’ll press F5 to refresh, but whoa, look at that. It turned everything into a header. I don’t want that. So, if we look up at the top, you’ll see that I opened the tag with H1, but I also need to close the tag at the very end. So here again, I’ll type in H1, but to close a tag, we need to enter a forward slash before H1, and this lets the browser know that we are closing this tag at this point. This whole section together, the opening tag, the text, and then the closing tag, this is referred to as an element. And an HTML page is made up of many different elements. I’ll press control S to save my file, and over on the right-hand side, let’s press F5. And look at that. The Kevin Cookie Company is now the header and all of the other text is smaller than the header. That’s exactly what I wanted. Over on the left-hand side, for the header, you can choose header one, which I currently have set, all the way down to header six. So here, I’ll change it to a six, save the page and let’s refresh it over on the right-hand side, and here you see that it’s a lot smaller. Now I actually want this to be the title of my page. So header one is the most appropriate for this, but I also want deliciousness in every bite to also be a header. Here, I’ll lower that text down and let’s insert another header. Here, I’ll enter in the less than sign H, but this time I’ll enter in two. And the reason why is Kevin Cookie Company is the main title, and this is a sub header. So I don’t want it to be on the same level as my title, which is why I’ll use two here. And just like we did in this element up on top, we need to close it. Here, I’ll enter in the closing tag. I’ll type in H2 and then the greater than sign. And here, I have my second header. I’ll save this page and over on the right-hand side, let’s refresh it. And look at that. Here, I have my title and then here I have my sub header. As you insert different headers into your HTML file, don’t think of how it looks. Instead, choose the header based on the meaning that you want to convey. Later on, you can use something called CSS to change the look and the feel, but for now we’re just concerned about the meaning of the different items within your HTML page. Within my HTML file, I have all of this text down here at the bottom, but I don’t declare to the web browser what this is. And this is a paragraph of text. So I want to insert a paragraph element. Right up here, let’s enter in the less than sign. And here, I’ll type in a P and then I’ll enter in the greater than sign. Now you’ll see that with these different tags, you can use uppercase letters or lowercase letters. They are case insensitive. So here, I’ll enter in the lowercase letter. You’ll typically find that they’re entered in lowercase, but you really don’t have to worry. I’ll copy this tag and right down here, I want to close it. I’ll move that text down and here, let’s close out this paragraph. And right here, I’ll enter in another paragraph for baking is our passion and we take it very seriously, and here, I’ll also close it out. On this page now, we have four different elements. This is one element. We have the second. Here’s our third element. And then we also have a fourth element. I’ll save the file and over on the right-hand side, let’s press F5 to refresh. And here you see that I have a paragraph and then down here, I have another paragraph. Now, because I declared these as separate paragraphs, here it inserts spacing between these different paragraphs. Within this block of text, you see that I say every cookie made at the Kevin Cookie Company is crafted with only the finest ingredients, and I really want to emphasize the text every. We can insert an element within another element or basically a nested element. Over on the left-hand side in our HTML file, here I say every, and I’m going to open a tag and close the tag. And let’s use EM for emphasis. And after every, here I’ll close it out and type in EM. So here I have one element within another element. Let’s now save this file. And over on the right-hand side, I’ll press F5 and look at that. It’s now italicized the word every. Over on the left-hand side, instead of emphasizing this word, I can also use another element called italics. I’ll change this to an I and here I’ll change this to an I, and then I’ll save the file and back over on the right-hand side, I’ll press the F5 key. And it doesn’t look like there’s any difference. Here, it still shows every cookie made in italics. Here’s every in italics. Visually, they look exactly the same. So, does it matter whether you use I or EM for emphasis? It does. When you use a screen reader, it’ll read the words differently. When you use EM, it’ll apply extra emphasis to the word every. However, if I just use I, that only affects the visual appearance and a screen reader wouldn’t treat it any differently. So, the element that you use is very important. So, although they may look the same visually, keep in mind that screen readers may treat them differently. Back over on the left-hand side, you can also bold a word here. I’ll change the I to B, save the file and let’s refresh. And here we see every in bold. I can also change this to strong. I’ll copy this text and let’s place it in for the closing tag, save the page and here I’ll refresh. And here again, just like with emphasis and I, you’ll notice that the visual treatments exactly the same, but this word for screen readers now carries additional weight. Back over on the left-hand side, I can also underline words. Instead of strong, I’ll enter in a U and here I’ll change that to U and over on the right-hand side, let’s refresh. And here we see that the word is underlined. There are many different elements that you can use to affect the visual appearance and also the semantic meaning of the word. As we’ve been working through this, you’re probably realizing that HTML is not a programming language. Instead, it’s what’s referred to as a markup language. That is after all why it’s called hypertext markup language. As we’re going through this HTML file, we’re marking up or declaring what all of these different elements are. Here’s the header. Here’s another header, but not quite as important as the main title. Here’s a paragraph and here’s another paragraph. We’re helping tell the browser what every single element is within this HTML file. Along with entering in individual elements, you can also tell the browser what elements go together. For instance, here I have deliciousness in every bite with all of this text and this all belongs together. So I want to tell the browser that. Right up above, I’ll insert some new lines and here I’ll declare this as a section. Now I also need to close it out. I’ll enter the end tag at the bottom. Here I’ll enter section and let me put in a forward slash. Now it’s a little hard to read or to know that all of these other elements go within the section element and to make all of your different HTML more readable, I also recommend using indentation. So here I’ll indent this out, indent out my paragraph, and also indent out this paragraph. Now, Notepad isn’t quite the best. Here you see the text wrapping. So it’s a little hard to tell that all of this is within section. So we could go up to view and here’s the option to turn off word wrap. And when I select this, here it’s very easy to tell that all of this content goes within this section and that all of this content is related. Next, I want to enter another section into my HTML file. Here I’ll insert a new line and here I’ll enter in a new section. Just like I did in the first section, here I use an H2. I’ll use another header two with chocolate chip cookie recipe. I want to make sure to include that on this homepage and within the chocolate chip cookie recipe, I also have two additional headers, but they’re one level down from the recipe. Here I have the ingredients and then I also have the baking instructions. I’ll press control S to save the file and over on the right-hand side, let’s press the F5 key to see how it looks. Look at that. Now we just need to fill in the ingredients. Now that I have these additional headers on my page, I now want to fill in the ingredients. You can get the ingredient list from the kevincookiecompany.com website under recipes. Over on the left-hand side, I’ll insert a new line and here I’ll paste in all of the ingredients required for our delicious chocolate chip cookies. Now the order of the ingredients doesn’t so much matter. Here I’ll save the file and let’s refresh and right now it’s just one long list of all these ingredients, but I would like to show them in a bulleted list. So to include a bulleted or unordered list, we’re going to use another element. Here I’m going to open it and we’re going to enter UL and this stands for unordered list. Now just like we’ve been doing all along, we also need to close it out. Here at the very bottom, I’ll enter in the closing tag and type in UL and that closes it out. But I also need to specify or let the browser know where each list item is or an LI. So here we’re going to nest another element within the unordered list. Here I’ll open and close. We’ll enter LI for list item and here at the very end, I’ll close it out and there that should also close the list item. I’ll go through and do that for the rest of the items here. I’ve now added all of my different list items and I also indented all the different items so I know that these are all part of this list. Again, it just makes your code a little bit more readable. I’ll now save the file and over on the right hand side, let’s press F5 and here I can now see an unordered list of all the different ingredients required to make our cookies. Down below, I also want to include a list for all the different baking instructions. I copied a list of all the baking instructions from the kevincookiecompany.com website and back over on the left hand side, I’ll insert a new line. I can insert a whole bunch of new lines and I’ll paste in all the baking instructions. Now I want this to be a list as well, but the order of all of these steps very much matters unlike with the ingredients. So instead of using an unordered list, we want to use an ordered list and you guessed it, the element name for an ordered list is OL. At the very top, I’ll make sure to open it and at the very bottom, I’ll close it out. And here too, just like we did with this unordered list, we need to add list items for every single step in the instructions. So here, let’s open it up. I’ll add a list item and at the very end, I’ll also close it out and here too, I’ll go through and do it for every single item and also apply indentation. And look at that. We now have an ordered list for all the baking instructions. I’ll press control S to save the file and over on the right hand side, let’s press F5 to refresh and look at that. We now have an ordered list. So what’s the difference between an ordered list and an unordered list? Well, here you’ll notice that we just have bullets for each one of these items and down below we have a numbered list. So again, this implies that the order matters. Remember, when we enter these different elements into the HTML, we’re trying to make the right choice to convey the right meaning for the content that’s contained within. Over on the right hand side, in number four and number five, I have two sentences in each of these, but just to make sure it really stands out, I want to place each of these sentences onto a separate line. Here I’ll zoom out just a little bit and here I see where that second sentence starts. Here’s mix on low speed. Here’s mix on low speed. And then I also say stir and here’s stir. So to insert another line, if I just press enter on my keyboard, that won’t make any difference to what’s shown within my browser. So we need to tell the browser that I want a new line there. And there’s an element that we can use called the break. I’ll enter in a BR. That’ll tell the browser that it should insert a new line. And here too, I’ll also insert a break. Now with the break element, you don’t have to close it. That’s because all you need to say is break and the browser knows exactly what it needs to do. You don’t need to wrap it around the sentence. Let’s now press save, and over on the right-hand side, let’s refresh. And here I see that second sentence is on another line and here that second sentence is also on another line. I think that makes it a little bit more readable. The page is coming together very nicely, but over on the left-hand side, I want to make sure that if any web developer comes in to this page in the future, that they understand that this isn’t just any ordinary chocolate chip cookie recipe. This is our best-selling cookie recipe. So I want to add what’s called a comment just to add a little bit of extra clarity to this HTML page. Right underneath this header, I’ll type in a comment that says this is the Kevin Cookie Company best-selling recipe. I used a less than sign and exclamation mark and two hyphens and then two hyphens at the end and the greater than symbol to let the browser know that this is a comment and it shouldn’t display it to a visitor coming to this page. I’ll save the page and over on the right-hand side, let’s press F5 and you’ll notice that that comment doesn’t show up at all. It’s only embedded into this HTML file. So only if you come in to edit the file, can you actually see it. Now, one fun little trick, over here on the HTML page in my browser, you can right click and there’s the option at the very bottom to view the page source. You could also press control together with U. And when you view the page source here, you can see all of the different HTML that makes up this page. And look at that. Here’s that comment highlighted in green. So it’s not visible on the page, but it’s very much contained within the HTML file. I’ll close out of the source. All in all, this page looks pretty solid, but on second thought, I don’t know if it makes sense to include the chocolate chip cookie recipe directly on the homepage or the index page. It probably makes sense to have a separate page that we link to from this homepage. Over on the left-hand side, let’s select this entire section with the chocolate chip cookie recipe. I’ll highlight all of that and then press control X on my keyboard. That cuts all of that content and places it onto my clipboard. Next, let’s open up File Explorer again. Back within File Explorer, I want to create another page that contains the recipe. I’ll right click with my mouse and let’s go down to new. And here let’s select text document just like we did with the index page. Here I’ll highlight all of this text and let’s type in recipe.html and then hit enter. Here we get that warning again. Let’s click on yes. And look at that. We now have a recipe page. Just like we did before with the index page, let’s now drag and drop this file into Notepad. Now we have the index file opened up side-by-side with the recipe. Let’s now arrange Notepad so it’s side-by-side with the web browser window. Here I now have my recipe.html file and I’ll paste in all of the content that contains the chocolate chip cookie recipe. I’ll save this file and I’ll also save the index file. And over here, let’s refresh the index page. But one problem is how do I get from this index page to my recipe page? Well, to do that, we can use what’s called a link. To insert a link, over on the left-hand side on my index page, I’ll insert a new line and type in some text that says, learn how to make our chocolate chip cookies. If I save it and refresh, we see that line of text, but it’s not yet a link. There’s an element that we can use to turn this into a link and it’s called the anchor element. Here I’ll open it and let’s type in an A for anchor and I’ll copy this tag, paste it at the end and let’s close it out. But still, that doesn’t yet tell the browser where to send the person. So we need to insert what’s called an attribute. It basically tells the anchor where to send someone and we’re going to use an attribute called href or what stands for hypertext reference. It basically tells the browser where we should send someone and I want the person to go to recipe.html. Here I’ll type in recipe.html and then I’ll save it. Now over on the right-hand side, let’s refresh and look at that. There we have that link underlined and you see that my cursor changes when I hover over it. When I click on it, look at that, that brings us directly to our recipe page. Now to go back, I could also click on this back button or we could also include a back link directly on the recipe page. Let’s do that. Right up on top, let’s click into recipe. Back on the recipe page, at the very top, I’ll insert a new line and let me paste in a link. Here I’m using that anchor element again and we’re referring to the index.html page and here I’m referring to it as home. I’ll save this page, let’s refresh it over on the right and now I have a link that goes back home. So I could click on home, back on the home and I can click back and forth between my different pages. This way you can help people navigate throughout your website. The website really has some fantastic and valuable content, but what would bring it to that next level is if we included some imagery. Up on top, I have another tab open for the Kevin Cookie Company and here we have this beautiful logo that I would like to incorporate into the website. I’ll right click on this logo and then save image as. Feel free to do the same. This opens up my file picker and I’ll place it in the Kevin Cookie Company website folder. Down below, click on save. Back within my index.html file, I want to include the image here. I’ll insert a new line and I want to place it right above my header. There’s an element called IMG, which stands for image that allows us to insert an image onto the page. Let’s open it up by typing in IMG. We also need to specify the image that we want to use. We need to specify the image source, so we’ll use an attribute called src. Then let’s enter an equals and open quotes and then here we’ll type in the file name. It’s called KCC Logo.png and then we’ll close the parentheses and here let’s enter in the greater than sign. And next, let’s save it. All we need is this one tag. We don’t have to open and then close it. It basically stands alone, similar to the line break. Now that I saved the file on the right hand side, let’s refresh the page and look at that. We now have the logo on the page, but it’s a little bit big. Over on the left-hand side, we can also define the height and also the width of this image. To define the width, we’re going to use the width attribute. I’ll type in width equals and then insert quotes. And I want this to be 400 pixels wide, so I’ll enter in just 400. We can also define the height by using the height attribute. I’ll type in height, insert quotes, and this will be 122 pixels high. Then I’ll save this file and on the right-hand side, let’s click on refresh and look at that. That looks a lot better. Another benefit of specifying the width and the height is that the browser knows to reserve this space for an image before it’s able to completely load the image. If you’ve ever been to a website where the content jumps around, if it hasn’t all loaded yet, that’s typically because they haven’t defined the width and the height of the different elements on the page. So it’s a good practice to always do that for every single image. There’s one more attribute that I recommend including as part of the image element and that’s the alt description. Here I’ll enter it in, alt equals and then insert quotes. And here I can define what this image is. I’ll call it the Kevin Cookie Company logo. And now I’ll save it. Now, when I refresh the page, you don’t notice any difference, but let’s say that someone comes to this website using a screen reader, or maybe they’re blind and they can’t actually see what this logo is. With the alt text, they’ll be able to hear that it’s the Kevin Cookie Company logo. And just for demonstration purposes, I’m going to misspell the name of the file and save it and then refresh the page. Here you’ll notice that it’s not able to load the logo yet, but you see this text that identifies what it should be. So anytime you add an image to a page, it’s always good to include these four attributes, including the source, the width, the height, and also the alt text. I’ll now return it to the previous file name. Not only can you insert images, but you can also insert other types of media like audio and video. Down at the very bottom of this file, I’ll insert some new lines and here I’ll paste in two additional elements, one of them for audio and one of them for video. And it follows a very similar structure to an image. Over here, we call out that this is audio, and here you define what the source is. Here, I typed in the name of the audio file. We insert controls because I want it to show audio control. So you could play or stop the playing. And here you could also define the type. Now, unlike with image, we also use a closing tag. That’s because this element is newer and this has been incorporated into that element. And video is very similar to audio. When I save this over on the right-hand side, I’ll refresh, and here we see an audio player controls and down below we see the video player. If you’re interested in using audio or video, do know that you have additional attributes that you can use. Maybe you want the audio to loop or maybe you want it to autoplay, although that one can be a little bit annoying. With videos, you could also incorporate subtitles and you have many other options as well. This is just to let you know that you can insert many different types of media into your HTML page. We have a lot of compelling content on this page now. There’s text, there’s recipe, there’s audio, and there’s video. I think what we really need now is an order form where people can order some of these cookies. Let’s open up File Explorer once again. Within File Explorer, let’s right click, go down to new, and let’s click on text documents. And let’s add a new HTML file called Order Form.html. Then let’s click yes on this dialog. And let’s now open this file in Notepad. I now have Notepad open with the Order Form.html, and over on the right-hand side, I have the browser window that shows me what this HTML file looks like. Currently, there’s nothing in this HTML file, which is why the browser window is empty. First, I want to include a table that lists out all of the cookies that we offer here at the Kevin Cookie Company and the associated price. I’m going to use the table element. I’m going to paste in some HTML. Right here, we see that I’m setting up a new paragraph, and down at the bottom, I close the paragraph. And here I use the table element. Right here, I open it up, and down at the bottom, we close it again with the closing tag. And in a table, it’s made up of multiple rows and also multiple columns. And here, I’m setting up the first row of this table. We use the element TR. This stands for table row. And down here, I close it again. So this is the first row in the table. And within this row, I have two columns, the cookie type and also the price. Now, I refer to this element as TH. What does that stand for? Well, this is table header. This is letting my browser know that this is the header of the table. Down here, I then have another row in my table. So I use table row, and then here I close table row. And here too, I also have two columns, except this one is referred to as TD. So what’s the difference between TD and TH? TD stands for table data. So it’s not the header row. This is now where all the data within the table lives. And here, I have one cookie called chocolate chip, and it costs $4.50. I’ll save this file, and over on the right-hand side, let’s now refresh the browser window to see what this looks like. And there, I have a very basic table. Of course, when we look at the table over on the right-hand side, it’s a little bit difficult to make out that this is in fact a table. Over on the left-hand side, we can add an attribute that adds a border to this table. So here, I’ll type in border and let’s say equals one. I’ll save the file. And on the right-hand side, let’s refresh. And now, we can see a border around this table. To add additional rows, here I’ll copy this row and paste it in. And maybe we also have, let’s say, an oatmeal raisin cookie. So we’ll say oatmeal raisin, and this one goes for $2.50. I’ll save it. Over on the right-hand side, let’s refresh. And here, we now see another row in this table. This is a very simple view of how you can create tables. There are many more attributes you can use. You could even have certain columns span over multiple columns. So there are all sorts of different options here, but this just gives you an idea of how you can use tables to represent data just like this. Now that we’ve included a table listing out all of our different products and the associated price, I’d like to add a very simple form that people can use to order some of these cookies. Over on the left-hand side, I’ll insert a new line, and here, I’ll paste in some very basic HTML to add a form. Here, I use the form element. We open it, and down at the bottom, we close it. And there are some very simple elements within here. Let me save this HTML page, and over on the right-hand side, let’s refresh it to see what it looks like. Here, I have a label for the cookie type, and here, we see the label show up. To the right of that, I have an input field, and here, we have input name, and this adds that input field. And down below, I use the same structure for the quantity and also the delivery date. Now, instead of just using an input field for the delivery date, here, I could use one of the attributes. I’ll type in type equals, and let’s set this to date, save and refresh, and this now adds a date picker. The browser has tremendous functionality when it comes to displaying forms via HTML. There are all sorts of different elements you can use. You can add drop-down lists. You can add password fields. You can add radio buttons, check boxes, all sorts of different things as you build out your forms. This is more just to give you a quick tour of what’s possible with forms, and especially if you want to build them out, I recommend going deeper on this topic. We’ve now looked at many of the different available elements within HTML, but up to this point, we haven’t yet formed a proper HTML page. To do that, in Notepad, let’s click back over into the index.html file. Back within the index.html file, down below, we see all of the content that’s displayed on the page. But what if we want to include a title that shows up on the tab? Or what if we want to include a description for search engines? That wouldn’t be visible on the page, but we still need to pass that information to the browser. And so far, we’ve just been focusing on the body content, but we need to structure this as a proper HTML page. At the top, let’s add a few new lines and then go to the very top line. At the very top, I’m going to add an element that tells the browser that this is in fact an HTML document type. We’ll type in doc type and then HTML. Next, we need to tell the browser that all this content that appears below is in fact HTML. So we’re going to use a block element to do that. Here, I’ll type in HTML. And at the very bottom, let’s add it again, but this time we’re going to close it off. Now the browser knows that all this content stored within is HTML. And now we want to separate this out into two separate sections. We have the head where we can pass information that’s not visually displayed on the page, and then we also have the body content. So right at the very top, I’m going to add a block element called head. I’ll copy it. And down below, let’s close it out. And right down here, I’ll add one called body, open it, and down below, I’ll close it out. Now that I’ve added all of those, let me apply some indentation just so everything’s a little bit easier to see. I’ve now applied some indentation, so hopefully everything’s a little bit easier to parse. Throughout this video, we’ve been focused on the body section of the HTML document, basically everything that’s visually shown on the page. Let’s now shift our focus to the head. The head contains all of the metadata about the page, basically all the stuff that the web browser needs to know, but that won’t be shown. Right up here, I’ll paste in two examples of the types of content that you would put here. I’ve included a title, the Kevin Cookie Company homepage, and also the description. This is what search engines can pick up. Over here, if we scroll over, the description is the Kevin Cookie Company is the best cookie company in the world. Now, if I save this right now, over on the right-hand side, I’ll refresh the page, and you’ll notice that none of the body has changed. But if we look at the very top, you’ll now see that the tab name is titled Kevin Cookie Company homepage. It’s taking the title that I provide here. We also have a description. So let’s say that search engines now index this page. They’ll take this description into account. You could put lots of different things into the head. You could also include, let’s say, a favicon. You could also load various CSS, which affects the look and feel of the page. You could even load up different JavaScript that you want to use on the page. So there are lots of different items that you could put within the head of your page. Under the head, we have the body section of our page. And again, this is what we focused on for most of the video. And this is all of the content that’s displayed visually on the page. Now you might be wondering, well, when we started creating this HTML page, how is it that it worked without all of this structure in place? Well, the reason why is HTML is very resilient. Even though we didn’t include HTML, the web browser assumed that this was an HTML document. So it continued to work. However, to structure an HTML page properly, I recommend using these key building blocks every single time you set up an HTML page. All right, well, thank you so much for helping with this basic HTML website for the Kevin Cookie Company. I am sure we’re going to sell a lot of cookies. Of course, there are many more HTML elements and also attributes. To learn more, I’ve included resources down below in the description. To watch more videos like this one, please consider subscribing and I’ll see you in the next video.