Level 1 · Complete beginner · 12 min

HTML Structure

HTML is the labelling system that tells a browser what each part of your page actually is.

What you will learn

Explain what HTML is for
Recognise the most common tags
Structure a tiny page correctly

The idea

HTML does not make things pretty and it does not make things move. It says what each piece of content is: this is a heading, this is a paragraph, this is a button. The browser reads those labels and shows the page.

Why does this matter?

When the labels are right, everything downstream works: styling is easier, search engines understand your page, and screen readers can describe it to someone who cannot see it. Wrong labels quietly break all three.

A real-world analogy

Labels on moving boxes. The boxes are your content. Writing KITCHEN on a box does not change what is inside, but it tells everyone what to do with it.

See it in code

A minimal, correctly labelled page

<main>
  <h1>Sam's Bakery</h1>
  <p>Fresh bread every morning from 7am.</p>
  <button type="button">Order now</button>
</main>

Line by line

<main>
Marks the main content of the page. Opening tag now, matching closing tag later.
<h1>Sam's Bakery</h1>
The single most important heading on the page. Text goes between the opening and closing tags.
<p>...</p>
A paragraph of ordinary text.
<button type="button">
A real button. Using a real button means it works with the keyboard for free.

What do you think happens?

Which tag should hold the main title of the page?

Have a guess before you read on. Guessing wrong is part of learning it.

Try it yourself

Write a tiny page for something you like: one heading, two paragraphs and a button.

The proper words for it

Element: A labelled piece of content, opening tag to closing tag.
Tag: The angle-bracket marker itself, like <p>.
Attribute: Extra information on a tag, like type="button".
Semantic HTML: Choosing the tag that matches the meaning, not the one that looks right.

Where you'll meet this

Rebuilding a site with correct headings and real buttons is one of the fastest accessibility and SEO wins a team can ship.

Lesson recap

HTML labels meaning, not appearance
Most elements have an opening and closing tag
One h1 per page
Real buttons and links behave correctly for free

Still fuzzy on any of this?

That's normal, and it's not a dead end. Pick a different way to hear it.

mini challenge · javascriptnot run

Build an HTML Attribute String

Behind every tag like <img src="cat.jpg" alt="A cat"> is a simple rule: each attribute is name="value", attributes are separated by a single space, and they appear in the order given.

Write buildAttributes(attrs) that takes an object of attribute names to values and returns a single string of name="value" pairs, in the same key order as the object, separated by a single space. If attrs has no keys, return an empty string.

Example: buildAttributes({src:"cat.jpg", alt:"A cat"}) returns 'src="cat.jpg" alt="A cat"'.

main.jsjavascriptnot run

function buildAttributes(attrs) {
  // 1. get the keys of attrs in order with Object.keys
  // 2. map each key to `${key}="${attrs[key]}"`
  // 3. join the pieces with a single space
  return "";
}

First, pass the quick check to unlock "Accessible HTML".