Understanding Basic HTML

brackets iconIn this lesson we’ll learn about some of the simplest HTML tags and how they function.

So far we have a very simple index.html:

<!DOCTYPE html>
<html>
<head>
<title>FOTC First Website</title>
</head>

<body>
This is our first FOTC web page.
</body>

</html>

Let’s look in more detail at this HTML.

Use the buttons below to navigate through the lesson

img0
img1
img2
img3
img4
img5
img6
img7
img8
img9
img10
img11
img12
img13
img14
img15
img16
img17
img18
img19
img20
img21
img22
img23
img24


First, we can see a strange-looking tag that says <!DOCTYPE html>

This is an unusual tag as it has an exclamation symbol at the beginning, and it doesn’t have a matching end tag anywhere. That’s because this is not technically a HTML tag. Instead it tells our web browser what language we’re using to communicate with it. In this case, we are using HTML.

The DOCTYPE declaration must always come first in a HTML page. There are other possible values for DOCTYPE. If you look at webpages using the F12 Developer Tools (see earlier in the course for an example of how to do this) you will see a variety of different DOCTYPEs. For the purposes of our course we are not interested in these other DOCTYPES: <!DOCTYPE html> tells browsers that we want to use the updated version of HTML, which is currently HTML 5.

After the DOCTYPE declaration we can see our first HTML tag: <html>.

If we look at the very end of the document we see the matching closing tag: </html>.

This means that everything else in the document is inside our <html> tag. The <html> tag acts as a container. It tells the browser that everything inside it is to be rendered (displayed) as HTML.

Putting tags inside other tags is often referred to as nesting. We say that the other tags are nested inside the <html> tag.

Inside the <html> tag we put two very important tags: <head> and <body>.

This is the fundamental structure of every HTML page. They all must have a DOCTYPE declaration, then a single <html> tag, which contains <head> and <body> tags.

 

The <head> Tag

The <head> tag can contain a number of other special tags. We will learn about more of those in later lessons.

The important fact to remember about the <head> tag is that it contains data that is not directly displayed as part of the page. Often it tells the browser about extra resources the browser needs to fetch to display the page properly, such as additional CSS or JavaScript files. The <head> tag is also where we put metadata about the page.

Metadata is a fancy way of saying ‘data about the web page’. For example, in our <head> tag we have a <title> tag. The <title> tag contains some metadata: in this case, the title of the page. You can see the title in your browser tab:

4 - 1

So the <title> tag is one of the tags that can go in the <head> tag, and it defines the title of the web page. We will see more of these metadata tags in future lessons.

The <body> Tag

The <body> tag is where we put the body of the website. In other words, all the data that is displayed as part of the web page. As you can imagine, for complex websites this can be a LOT of data. At the moment our web page body is only a simple sentence… but from the next lesson we will start to add much more.

Conclusion

We now have the foundation of every website: a simple index.html with the basic structure of a HTML document. Before you move on, make sure you understand how the <html>, <head> and <body> tags are formed and what kinds of data we put in <head> and <body>.