In it's simplest form, an HTML page is pretty basic and has just three sections. In this video, I'll break down the structure for you. But first you'll need to know a little bit more about the difference between tags and text. So HTML distinguishes between tags and text. Basically, the tags are the hidden code that tells the browser how to display the content. They aren't displayed to the user but they form the backbone of how the webpage actually works.

Tags are actually pretty easy to spot. They're always inside two angled brackets, like this. Most tags will also appear in pairs. You need an opening and a closing tag. The closing tag always has a forward slash included in it to tell the browser that that's where the tag ends. For instance, let's start with a header for the page. First, I'll open with an opening head tag, like this, which tells the webpage some information about the HTML file it's about to display.

On the next line, I want a title. Let's say, success. The title will be displayed in the browser tab and also what a search engine will list my page as. First, of course, I need to tell the browser that I want a title. So I need to open with a title tag like this. Right, after this, I can add the text I want the browser to display, which in this instance is success. Now, to close this title tag off, all I've got to do is add a closing title tag, which looks like this. Now, the only thing left to do is close the head.

So on the next line, I'm gonna add a closing tag to the header like this. Okay, so, before I move on, there are a few other lessons I can show you using what we've just done here. First up, did you notice that there was no space between the closing and opening of the title tags? This is because spaces inside the start and just before the closing tag have no effect on the display of text. Also, tags aren't case sensitive. So you don't need to use capital letters in writing it, and in fact, it's best practice to just use lower case in HTML.

Last up, did you notice how when I moved down a line from the opening head tag to the title tags, I also indented the text? This is useful because it means that finding different parts of the page is really easy. So this is good practice to indent your code. Most common development environments will do this automatically, or you can format the code when saving the file.

Great, so, now that we've dealt with the basics of tags and text, and how they work in an HTML page, let's go back to the three basic sections of an HTML page. These are the prologue, the head and the body. The prologue tells the browser what type of document it's dealing with. To do this, all I have to add in is the following tags. I open the document up, with !doctype html, then on the next line, open the page with the HTML tag, and at the very end of the page, I'll close it with my closing HTML tag.

The doctype may look like a tag, but it's actually not. Instead, it's a declaration, so it only needs to appear once. It essentially tells the browser which version of HTML the file is being written in, so it knows how to interpret the tags. We know it's a declaration because of the exclamation mark. The head, as you've already seen, is done using the head tag, and normally appears right after the prologue. Finally, the body. This is the area where the content that is displayed in the main browser window on the website will sit.

Again, I'll open up with the body tag. Then, on the next line, add some text, maybe something like HTML is awesome. And then close the body with my closing body tag. And that's it for this video. We've dealt with a few really important concepts here, from the basics of how tags work, a little bit about syntax and formatting, and finally, on the three basic elements of an HTML page.

Lectures

• The History of HTML
• Attributes and Comments
• Containers, Syntax Errors, Special Characters, and Non-Standard HTML
• Structural HTML