# Laying Out an HTML Page

## What We'll Be Building!

![](https://3764443643-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1CV_PDi4uSEWhb3GlC%2F-MBVd17fPmhV9xfQCrgc%2F-MBVjvu01HUlzptPPgMt%2F3.JPG?alt=media\&token=ba0d85f2-6f1a-4d89-ae17-abc07e4ca33d)

In the last section we said all web pages are made using HTML and those HTML pages are made up of HTML tags. We'll now look at the way all your HTML pages will look when you first create them.

Every HTML page uses the same basic, as shown in **layout.html**.

The version of html being used is specified in the **\<!DOCTYPE>** tag, followed by a set of **html** tags that wrap all other tags. They also have a **head** tag and a **body** tag, that hold the website's settings and content respectively.

{% code title="layout.html" %}

```markup
<!DOCTYPE html>
<html>

    <head>
        <title>My Blog</title>
    </head>
    
    <body>
        Hello World!
    </body>

</html>
```

{% endcode %}

{% hint style="info" %}
Your HTML page can be more complicated but at the very least this is what it will look like.
{% endhint %}

### The Tags Used

* \<title>&#x20;
  * The name of your page
* \<html>
  * Everything inside this tag is part of your HTML page
* \<head>
  * This contains important information about your page
* \<body>
  * This contains the content of your page

{% hint style="info" %}
The DOCTYPE tag tells the web browser what version of html you're using. \<!DOCTYPE html> just means you're using the latest version available.
{% endhint %}

### Exercises

1. Create an html page using the example above as a reference. Name it **layout.html**
2. Change the title tag of your page to anything you'd like. Refresh your page and see the result.
