Sign In Get Started
Sign In Get Started
Courses / Complete HTML Course by codesofrohan / HTML Basics / Basic Structure

Basic Structure

When you open any website, whether it is YouTube, Amazon, Google, or even a simple personal portfolio, you are looking at a page that is built using HTML.

Now, if you are just starting with web development, you might look at HTML code and think, “There are so many tags. Where do I even start?”

Don't worry. Before learning hundreds of HTML tags, you only need to understand one very important thing: the basic structure of an HTML document.

Think of HTML as the skeleton of a website. Just like our body needs a skeleton to give it structure, a webpage needs HTML to define its structure.

Let's understand it with a real-world example.

Imagine You Are Building a House

Suppose you want to build a house.

Before you add furniture, paint the walls, install lights, or decorate the rooms, you need a basic structure.

You need:

  • A foundation

  • Walls

  • Rooms

  • Doors

  • Windows

  • A roof

HTML works in a similar way.

An HTML document has a basic structure that tells the browser:

“This is an HTML document, this is the head section, and this is the content that should appear on the webpage.”

A basic HTML document looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>

    <h1>Welcome to My Website</h1>
    <p>This is my first webpage.</p>

</body>
</html>

At first, this might look like a lot of syntax. But don't worry. We will understand every part one by one.

1. <!DOCTYPE html>

Let's start from the very first line:

<!DOCTYPE html>

This is called the DOCTYPE declaration.

It tells the browser:

“Hey browser, this document is written using HTML5.”

Notice that DOCTYPE is written in uppercase here, but HTML is generally not case-sensitive for tag names.

You might wonder:

“Is this actually an HTML tag?”

No.

<!DOCTYPE html> is a declaration that tells the browser which HTML standard the document follows.

For modern websites, we normally use:

<!DOCTYPE html>

So whenever you create a new HTML page, this is usually the first line you write.

Think of it like putting a label on a file:

File Type: HTML5

2. The <html> Element

After the DOCTYPE declaration, we have:

<html>

And at the bottom:

</html>

Together, these create the main HTML element.

<html>

    <!-- Everything related to the webpage goes here -->

</html>

You can think of <html> as the main container of the entire webpage.

Just like a house contains all of its rooms, the <html> element contains the different parts of your HTML document.

Most of the HTML code you write will be inside this element.

3. The <head> Section

Inside <html>, we usually have two major sections:

<head>
</head>

<body>
</body>

Let's first understand the <head>.

<head>
    <title>My First Webpage</title>
</head>

The <head> contains information about the webpage.

A beginner might think:

“If I write something inside <head>, will it appear on my webpage?”

Usually, no.

The <head> is mainly used for information and resources that the browser needs to understand and process the page.

For example:

<head>

    <title>My First Webpage</title>

</head>

The <title> defines the title of the webpage.

If your webpage is:

<title>My First Webpage</title>

you will normally see My First Webpage in the browser tab.

The <head> can also contain things such as:

  • Page title

  • Character encoding

  • Viewport information

  • CSS files

  • SEO-related metadata

  • Other resources required by the webpage

For example:

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>My Website</title>

</head>

Don't worry if you don't understand <meta> yet. We will cover it in detail when we learn about HTML metadata.

For now, just remember:

<head> contains information about the webpage rather than the main visible content of the webpage.

4. The <body> Section

Now we come to the most important part for what the user actually sees:

<body>

</body>

The <body> contains the visible content of your webpage.

For example:

<body>

    <h1>Welcome to My Website</h1>

    <p>This is my first webpage.</p>

</body>

When you open this page in a browser, you will see:

Welcome to My Website

This is my first webpage.

So you can think of it like this:

<head> → Information about the page

<body> → Content displayed on the page

Let's Take a Real-World Website Example

Imagine you are creating a simple restaurant website.

The website needs:

  • A page title

  • Restaurant name

  • Description

  • Menu

  • Contact information

Your HTML could look something like this:

<!DOCTYPE html>

<html>

<head>

    <title>Rohan's Restaurant</title>

</head>

<body>

    <h1>Welcome to Rohan's Restaurant</h1>

    <p>Delicious food made with fresh ingredients.</p>

    <h2>Our Menu</h2>

    <p>Pizza - ₹299</p>

    <p>Burger - ₹199</p>

    <p>Pasta - ₹249</p>

    <h2>Contact Us</h2>

    <p>Call us at 9876543210</p>

</body>

</html>

Now look at how everything fits together.

The browser first sees:

<!DOCTYPE html>

It understands that this is an HTML5 document.

Then:

<html>

This tells the browser that the HTML document begins here.

Inside it, we have:

<head>

This contains information about the webpage.

Then:

<title>Rohan's Restaurant</title>

This gives the webpage its title.

After that, we have:

<body>

This is where the actual restaurant content goes.

Inside the body, we can add headings, paragraphs, images, buttons, links, forms, lists, and many other HTML elements.

Finally:

</body>
</html>

These closing tags tell the browser that the body and the HTML document have ended.

Opening and Closing Tags

You may have noticed something else.

Most HTML elements look like this:

<h1>Welcome</h1>

Here:

<h1>

is the opening tag.

And:

</h1>

is the closing tag.

The content is placed between them:

<h1>Welcome</h1>

The same idea applies to:

<p>Hello World</p>

Here <p> is the opening tag and </p> is the closing tag.

Some HTML elements, however, don't need a separate closing tag. These are called void elements.

For example:

<img src="photo.jpg" alt="My Photo">

You don't normally write:

</img>

because <img> is a void element.

HTML Elements Can Be Nested

Another important concept is nesting.

Look at this:

<html>

    <head>
        <title>My Website</title>
    </head>

    <body>

        <h1>Hello World</h1>

        <p>Welcome to my website.</p>

    </body>

</html>

Here, <head> and <body> are inside <html>.

And <title> is inside <head>.

Similarly, <h1> and <p> are inside <body>.

This is called nesting elements.

Think about our house example again.

The house contains rooms.

A room can contain furniture.

And furniture can contain smaller components.

HTML works in a similar hierarchical way.

The Complete Picture

So, whenever you create a basic HTML page, remember this structure:

HTML Document
│
├── DOCTYPE
│
└── <html>
    │
    ├── <head>
    │   └── Information about the page
    │
    └── <body>
        └── Visible webpage content

And the actual code looks like:

<!DOCTYPE html>

<html>

<head>

    <title>My Website</title>

</head>

<body>

    <h1>Welcome to My Website</h1>

    <p>This is my first webpage.</p>

</body>

</html>

If you understand this structure, you've already learned one of the most important foundations of HTML.

You don't need to memorize hundreds of tags right now.

Just remember the basic idea:

DOCTYPE tells the browser that we're using HTML5.

<html> is the main container of the document.

<head> contains information about the webpage.

<body> contains the content that users see.

Once this structure becomes familiar, learning other HTML elements becomes much easier because you will always know where those elements belong and how they fit into a webpage.

And that's the real purpose of HTML: not to make a webpage beautiful, but to give its content a meaningful structure.

🔖 Bookmark saved successfully!