Put a page together

INPUT · Slides

Your first HTML

01 / 07

What is HTML?

HTML is the language that builds the structure of a web page.

It decides the frame of the page — this bit is a heading, this bit is a paragraph. If JavaScript is the movement, HTML is the body.

02 / 07

Wrap it in tags

HTML is written by wrapping text in <tagname> and </tagname>.

  • <h1>...</h1> … the biggest heading
  • the closing one has a / on it

A set like that is called an element.

<h1>My page</h1>

03 / 07

A paragraph is a p tag

Ordinary text goes in <p> (paragraph).

Line up several elements and they show up in order, from the top.

<h1>My page</h1><p>Welcome!</p><p>I am learning to program.</p>

04 / 07

Headings come in levels

Heading tags run from <h1> to <h6>, six levels in all. The bigger the number, the smaller the heading.

It is the same idea as the big, medium and small headlines in a newspaper.

<h1>The name of the shop</h1><h2>Menu</h2><h3>Our picks</h3>

05 / 07

Why structure before looks?

It is tempting to think about "how it looks" first, but HTML's job is to say what each piece of text is. Looks come later, from CSS.

Write <h1> and it correctly tells the browser, screen readers used by people who cannot see the page, and search engines alike, "this is a heading." There are other ways to just make text bigger, but none of them say "this is a heading" the way a real heading tag does.

06 / 07

What happens if you forget the closing tag?

Browsers try hard to show something even from broken HTML. Forget a </p> and the page often still looks mostly fine.

Don't lean on that, though. Pile up enough missed closing tags and you lose track of where one element ends and the next begins. Make a habit of always closing what you opened.

07 / 07

Write it and see it straight away

From here you write for yourself. The HTML you write shows up in the preview just below.

Keep the rhythm going: write, look, fix.