Your First HTML Page

12 minBeginnerHTML · CSS · JS

In this lesson

Write the standard skeleton of an HTML page from memory
Explain the difference between a tag, an element and an attribute
Nest elements correctly and leave notes with comments

The big idea

Every HTML page has the same skeleton: a doctype, then <html> holding a <head> (information about the page) and a <body> (what people see). Everything else lives inside that.

In the last lesson you edited a page someone else wrote. Now you'll write one yourself. Good news: almost every HTML page on the internet starts with the same ten lines.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello!</h1>
    <p>This is my first page.</p>
  </body>
</html>

The standard HTML skeleton. Learn this once and you'll use it forever.

<!DOCTYPE html> tells the browser "this is a modern HTML page". It isn't a tag, just a declaration, and it always goes on the very first line.
<html lang="en"> wraps the whole page. lang tells screen readers and translators which language the page is in (use ms for Malay).
<head> holds information about the page: the character set (utf-8 lets you type any language and emoji) and the <title> shown on the browser tab.
<body> holds everything visible: headings, text, images, links.

Tags, elements and attributes

These three words get mixed up a lot, so here's the difference in one line: Hi is one element, made of an opening tag, some content and a closing tag. The class="intro" part is an attribute: extra information that lives inside the opening tag.

Tag: The label in angle brackets. Opening: . Closing:  (note the slash).
Element: The whole thing: opening tag + content + closing tag. This is what the browser actually builds.
Attribute: A name="value" pair inside the opening tag that adds detail, like lang="en".
Void element: An element with no content and no closing tag, such as <meta> or  .

Nesting: boxes inside boxes

Elements can sit inside other elements. Think of tiffin carriers: whatever you open last, you close first. If a  starts inside a , it must also end inside that .

Tangled (wrong)

HTML

<p>Open <strong>every day</p></strong>

Properly nested

HTML

<p>Open <strong>every day</strong></p>

Close tags in the reverse order you opened them. Indenting nested lines makes this easy to see.

Browsers are forgiving (too forgiving)

If you forget <head> or <body>, the browser quietly guesses and fixes it for you. That's why the starter page still shows up. But guesses can go wrong, and other tools (search engines, screen readers, your future self) rely on clean structure. Always write the full skeleton.

Comments: notes for humans

Anything between  is a comment. The browser skips it, so it never appears on the page. Use comments to label sections or leave reminders. Just remember anyone can still read them with View Source, so never put passwords or secrets there.

HTML

<!-- Opening hours -->
<p>Open <strong>every day, 7am to 6pm</strong>.</p>

The starter has content but no skeleton. Wrap it properly:

1. Put <!DOCTYPE html> on the first line.

2. Add <html lang="en"> … </html> around everything.

3. Inside it, add a <head> with <meta charset="utf-8"> and a <title>.

4. Move the <h1> and  into a <body>.

Checks

The page starts with a doctype
The page has <html>, <head> and <body> tags
<html> has a lang attribute
The page has a <title>

Check understanding

Which part of the page holds the content people actually see?

<head><body><!DOCTYPE html>

Which line is nested correctly?

HiHiHi

What happens to  in your HTML?

It shows up as small grey textIt's hidden from the page, but anyone can read it in the sourceIt's deleted when the page loads

What you learned

Every page starts with <!DOCTYPE html>, then <html> containing <head> and <body>.
An element is an opening tag, content and a closing tag; attributes add extra detail to the opening tag.
Nested elements close in reverse order: inner first, then outer.
 are notes for humans, hidden on the page but visible in the source.

Preview

Console output from your code appears here.