National 5 / Web Development / HTML - Basic Structure

HTML - Basic Structure

Learn to set up the basic structure of a webpage.

Introduction

All webpages start with the same basic HTML code.

During this lesson we will learn how to set up the basic structure of a webpage using the following elements:

At the beginning of every webpage we need to add the doctype declaration.

This tells the web browser what type of document to expect. In our case, this will tell the browser that it will be running HTML code.

index.html

<!DOCTYPE html>

The doctype declaration is not an HTML tag. It is an instruction to the web browser.

We will add all other code underneath this.

Under the doctype declaration, we add the HTML element. This is made up of an opening html tag and a closing html tag.

index.html

<!DOCTYPE html>
<html>

</html>

All other elements for our webpage will go inside the HTML element.

The head element is where we add information about our webpage called metadata.

This information is generally not displayed on the webpage itself.

This includes the title of the webpage which is the text that will be added to the tab at the top of the page.

This is placed in between the html tags.

index.html

<!DOCTYPE html>
<html>
    <head>

    </head>
</html>

We should indent our code if it is contained within another element as shown above.

This helps to keep our code easily readable as the file grows larger.

The body element is where we add the content of our webpage.

This is also placed in between the html tags. It should be added below the head element as shown below.

index.html

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

The body element is where we add all the elements that will be displayed on the webpage.

This includes text, images, videos, links and more.