Table of Contents

HTML Structure

Creating an HTML file is very simple. Open your text editor and write in any kind of text.

Then save the file with an extension of .html, as an example we could save it as index.html

Save file as index.html

Let's say for instance that you added the text 'Hello There' in your text editor and saved it as HTML, when you open this file in your web browser you will get the following output below:

Hello There HTML Webpage

Above it looks like you just created your first page; however, there is something wrong about the page above. It's not using the correct HTML structure. A basic HTML structure looks like the following:

<!DOCTYPE html>
<html>
<head>
	<title>This is the Page Title</title>
</head>
<body>

</body>
</html>

The code above is the default structure of a web page. Let's go into detail with each piece of code above.

The <!DOCTYPE html> is telling the browser that this document is of type HTML so our web browser will understand how to display the webpage.

The next thing we want to do is open up our HTML tags <html></html>. Anything that is put inside of our HTML tags will be rendered as HTML. We will go into full detail on tags in the next section.

Then inside of our HTML tags we have our <head></head> tags, the head tag includes descriptions or definitions of our webpage. The head tag will also include things like the title of our page <title>This is the Page Title</title>, and it can also include links to stylesheets or javascript files.

Finally, we have our <body></body>, which is where we will add the main content of our web page. Take a look at the HTML code similar to the example above. It will do the same thing except the code below is using the correct HTML syntax:

HTML Structure

Next, we'll move on to learning more about HTML tags.