site icon

Hi, I’m Chris

I am a web developer teaching
regular people how to code

~ Welcome to my blog ~

How to set up a basic HTML page for beginners

When starting out creating websites. we first need to get to grips with the core structure of a HTML page.

HTML pages can get big. Really big for large sites, but they all begin with the same basic structure, which looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<title>Page title</title>
</head>

<body>

</body>

</html>

But what does this all mean? Let's break it down.

When creating HTML pages which are to be read by a web browser, it is important we structure our code correctly.

The first thing we need to add to our index page is a DOCTYPE declaration.

This declares which version of HTML we are using, HTML5 is the latest version and the doctype looks like this:

<!DOCTYPE html>

Doctypes for earlier versions of HTML were a lot longer and more complicated, but HTML5 is now nice and simple.

The doctype is not case sensitive, but I always like to type it uppercase anyway.

HTML

Then we add the root HTML element tags like this:

<!DOCTYPE html>
<html lang="en">

</html>

Like most HTML elements, there is an opening and closing tag.

This is the main root element, meaning everything else must be added between these tags, with the doctype being the only exception.

Inside of the opening tag we can also add a language attribute, an attribute is just some additional information about the element.

I am going to be creating this site in English, so the language code is “en”.

If you want to use a different language, you can find a full list by searching for “HTML language codes”.

This main HTML element now contains 2 elements nested inside:

<!DOCTYPE html>
<html lang="en">

<head></head>

<body></body>

</html>

First we have the head, again with an opening and closing tags.

This section contains data, sometimes referred to as metadata, which is information about the HTML document.

This information is not displayed in the browser, but it provides important information about your site, such as a site title, description and also links to other files too which we will look at later.

Then the other section is the body.

This section contains all of the websites content which is displayed in the browser such as text and images.

So basically, the head contains our websites data which is not displayed, and the body is for our websites content which does get displayed.

We can now add some contents to the head, starting with some meta data:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="styles.css">
	<title>Page title</title>
</head>

<body>

</body>

</html>

The <meta> tag does not contain a closing tag, inside of here we can add an attributes, starting with the charset.

Here we can specify the character encoding for the web page, the most commonly used is UTF-8, you can find a list of other available character sets online

UTF-8 is the HTML5 standard, and contains almost all characters and symbols available in the world, so we are covered for almost any character we want to use in our project.

Another essential meta tag to add is viewport, the viewport is the visible area of the web page, basically what we see in the browser.

This used to be just be a computer screen, but since smartphones and tablets, the viewport size can now vary considerably, so this is why this tag is important.

First, we add content="width=device-width"

This allows the width of the page to be equal to the width of the device it is being viewed on.

Then, separated with a comma we set the initial-scale=1

This sets the zoom level when the page is first loaded, this can help keep zooming consistent when rotating devices from landscape to portrait for example.

Below this you will see a link tag. This is used to link the current HTML page to a stylesheet, which is used to style and layout our web page.

Along with stylesheets, we can also link to Javascript in the head section too, using the script element.

Finally in the head, we have the site title. This one is pretty straightforward, and the title will also be displayed in the browsers tab too.

This just leaves the body section:

<body>

</body>

This is where we add our pages content such as text, images, links etc. To do this we use HTML elements, and you can read more about them here:

Mozilla HTML Elements reference

So, this is the basic structure we need for out HTML pages.

If this is all new to you, don’t worry about memorising all of this.

We use this same structure across all of our pages so it will become familiar after a few projects.


- By Chris Dixon

Chris Dixon is a web developer and teacher. Teaching thousands of students mainly in Vue.js React.js, WordPress and web development.