InnoMarts logo
InnoMarts
Fast websites
← Back to course

The HTML Document Structure

The HTML Document Structure

Welcome back.

In the previous lesson, you created your first HTML page.

Now we slow down and look at the structure more carefully.

Because HTML is not just “some tags on a page”.

A good HTML document has a clear structure.

And if the structure is bad, the browser may still try to help you.

But relying on the browser to fix your chaos is like asking a waiter to rebuild your kitchen during dinner.

Possible?

Maybe.

Good idea?

No.

What You’ll Learn

In this lesson, you’ll learn:

The Basic HTML Structure

A standard HTML document looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
<body>
  <h1>Welcome</h1>
  <p>This is my web page.</p>
</body>
</html>

This structure is the foundation of almost every HTML page.

It may look small.

But it is doing important work.

Like the frame of a house.

Not glamorous.

Very necessary.

DOCTYPE

The first line is:

<!DOCTYPE html>

This tells the browser:

This document uses modern HTML.

More specifically, it tells the browser to use standards mode.

That means the browser should render the page according to modern web standards.

If you forget it, browsers may enter strange compatibility behavior.

And nobody wants the browser to behave like it found an old dusty manual from 2003.

So keep it.

Always.

The html Element

After DOCTYPE, we open the main HTML element:

<html lang="en">

And we close it at the end:

</html>

Everything on the page goes inside this element.

It is the root of the document.

The big container.

The digital suitcase.

The lang Attribute

This part is important:

lang="en"

It tells browsers and assistive technologies what language the page uses.

For English:

<html lang="en">

For Italian:

<html lang="it">

For Polish:

<html lang="pl">

For Ukrainian:

<html lang="uk">

For Russian:

<html lang="ru">

This helps:

Small attribute.

Big usefulness.

HTML has many small things like this.

Tiny details that quietly prevent future pain.

The head Element

The <head> element contains information about the page.

Example:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>

This content is usually not visible directly on the page.

The user does not see the <head> as normal page content.

But the browser reads it.

The <head> is like the backstage area of your webpage.

Not visible to the audience.

Still very important.

The meta charset Tag

This line is important:

<meta charset="UTF-8">

It tells the browser which character encoding to use.

Use UTF-8.

It supports many languages and special characters.

Without it, text can sometimes appear broken.

For example, letters with accents, Cyrillic characters, or symbols may become digital spaghetti.

So yes:

<meta charset="UTF-8">

Always include it.

Your future multilingual website will thank you.

Quietly.

But sincerely.

The Viewport Meta Tag

This line is also important:

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

It helps your page display correctly on phones and tablets.

Without it, mobile browsers may show your page as if it were a tiny desktop site squeezed into a small screen.

Very uncomfortable.

Like reading a newspaper through a keyhole.

The viewport tag tells the browser:

Use the device width as the page width.

This is essential for responsive design.

Even though CSS will handle most visual styling later, HTML prepares the page properly.

Good structure first.

Beautiful layout later.

The title Element

The <title> element sets the title in the browser tab:

<title>My Page</title>

This is not the same as an h1.

The title appears in the browser tab, bookmarks, and search engine results.

The h1 appears inside the page.

Example:

<title>About Me</title>

And inside the body:

<h1>About Me</h1>

They can be similar.

But they are not the same thing.

One is for the browser and search engines.

The other is for the page content.

The body Element

The <body> element contains everything visible on the page:

<body>
  <h1>Welcome</h1>
  <p>This is my web page.</p>
</body>

Headings, paragraphs, images, links, lists, forms — they all go inside body.

If the user sees it, it probably belongs in body.

The body is where the actual webpage lives.

The head is the planning room.

The body is the stage.

Indentation

HTML does not require perfect indentation to work.

This works:

<body><h1>Hello</h1><p>Text</p></body>

But it is ugly.

And harder to read.

Better:

<body>
  <h1>Hello</h1>
  <p>Text</p>
</body>

Indentation helps humans understand the structure.

Browsers may forgive messy HTML.

Humans are less forgiving.

Especially future you at 23:47 trying to understand your own code.

HTML Comments

You can write comments in HTML:

<!-- This is a comment -->

Comments are not shown on the page.

They are useful for notes:

<!-- Main page heading -->
<h1>Welcome</h1>

Do not overuse comments.

Good HTML should already be understandable.

Comments should explain useful things, not decorate the page like confetti.

Create a Better Page

Open your index.html file from lesson 1.

Replace it with this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My HTML Practice Page</title>
</head>
<body>
  <h1>My HTML Practice Page</h1>
  <p>This page has a clean HTML document structure.</p>
  <p>I am learning how browsers understand web pages.</p>
</body>
</html>

Save the file.

Open or refresh it in the browser.

The page still looks simple.

That is fine.

Today we are not decorating.

We are building the skeleton.

The skeleton does not need a hat yet.

Common Mistakes

Forgetting DOCTYPE

Do not start directly with:

<html>

Use:

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

The browser likes clarity.

Putting Visible Content in head

This is wrong:

<head>
  <h1>Hello</h1>
</head>

Visible content belongs in body:

<body>
  <h1>Hello</h1>
</body>

The head is for page information.

The body is for visible content.

Forgetting the viewport

Without this:

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

your page may behave badly on mobile devices.

Add it now.

Do not wait until your website looks like a postage stamp on a phone.

Practice

Create a new file:

touch structure.html

Inside it, create a full HTML document with:

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Structure Practice</title>
</head>
<body>
  <!-- Main heading -->
  <h1>HTML Structure Practice</h1>
  <p>This page helps me understand HTML structure.</p>
  <p>Good structure makes pages easier to read and maintain.</p>
</body>
</html>

Open it in your browser.

Then change the title and refresh.

Watch the browser tab change.

Small thing.

Real result.

Mini Challenge

Create a file called:

profile.html

Build a valid HTML document for a simple profile page.

It should include:

No CSS.

No JavaScript.

Just clean HTML.

Because before we put a jacket on the page, we need the bones in the right place.

Summary

Today you learned:

HTML structure may look simple.

But this simple structure is the beginning of every good webpage.

Next Lesson

In the next lesson, we’ll work with text, headings, and paragraphs.

We’ll learn how to organize content so the page does not look like someone dropped words from a balcony.