Basic Structure of HTML page

PUBLISHED Jul 17th, 2018

If you don’t know how you can setup your computer to do HTML, I highly recommend please refer back to this article here and get ready! It is easier than you think.

HTML tags

An HTML tag has three things

  1. open tag
  2. content for the tag.
  3. closing tag

And to use tags, we do like this:

<tag_name> content of the tag </tag_name>

For example, referring back to the last article, we have already used a tag for creating headings. Its called h1 and so was used like this:

<h1>My first web page</h1>

This tells the web browser something like this, begin a heading, this is the heading “My first web page”, now end the heading.

Tags are easy to use. It doesn’t matter whether the tags are capital, small, have spacing etc. They are not as strict as the tokens of other languages.

<title>A page</title>


	My first web page

Both produce the same effect.

NOTE: There are some tags which are different from normal conventions shown above. But we will learn them along. :)

Structure of HTML webpage

Let’s catch up what was left in the last article. We created an example page, and that is sufficient to understand the basic structure of HTML.

The following is a basic structure of a normal HTML page.

<!DOCTYPE html>

Let break it down.


At the very beginning, just add <!DOCTYPE html>. This statement is simply used to tell the modern browsers that the document is about HTML5 source code for a webpage. Nothing much, just write it at the beginning and ignore.


This initiates the HTML source code. The webpage source is valid from <html> to </html>. Everything about our webpage comes between these two tags.

An HTML webpage is divided into two sections. Head and Body.


This section is covered between <head> and </head>. This section contains all the things which we do not see directly on the page.

Not all tags are allowed to use in head sections. Only those tags which carry some information, links, resources about the page are allowed.

For example, the title of the web page is an information about the page itself, but do not see it on the page content itself.

<title>My first web page</title>

Obviously, this tag is present inside the head section. That is, between <head> and </head>.

You can notice whatever you write here at the name of the tab on the chrome browser. If you don’t give any title to your page, it will simply show the name of the file (index.html).


This section contains everything that we see. All the headings, texts, images, everything. The page and content are designed and shown here. Whatever we want to show our users, we place it between <body> and </body> tags.

As I explained above, the tag <h1> doesn’t contain information about the site, but it contains content for the page. So tags like these are put inside body section.

Another example was button, it will be shown to the user so the following code is put inside the body section.

<button>click me</button>

Putting it all together

Whatever we have discussed so far, connect it with this pic below. I hope now you can easily understand now how the browser is going to interpret our code.

Creating your first HTML webpage
Creating your first HTML webpage

The above explained basic tags and structure of an HTML document are enough to start developing sites now! In the next article, we will start learning the tags that will help you start building your very own page.

Until then keep learning programming from zero at

You might also like:


(rand) libgdx tutorial how to setup and begin game development
(rand) How technology affected our Lives? Happy being Busy?
(rand) Operators Introduction

© Shubham Ramdeo, 2020
you are really awesome!