Home / HTML Tutorial / Day 1

Day 1 — What HTML is, and the page skeleton

HTML is not a programming language. It is a way of labelling what things are, and once that clicks the rest is vocabulary.

HTML labels meaning, not looks

A web page is text with labels around it. The labels say what each piece is - this is a heading, this is a paragraph, this is a list - and the browser decides how to draw it.

That separation is the whole idea. HTML says what it is. CSS, from Day 7, says what it looks like.

An element

<p>This is a paragraph.</p>
↑ ↑
opening tag closing tag

Most elements come in a pair. The closing tag is the same name with a slash. Whatever sits between them is the content.

<h1>My first page</h1>
<p>This is a paragraph of text.</p>
<p>This is a second paragraph.</p>

Edit the markup and press Run. The three tabs under it are worth knowing now:

Preview - the page as a browser draws it.
Outline - the elements the browser actually built. Useful when the preview is not what you expected.
Check - a scan of what you typed for the mistakes beginners make. This is the one that will teach you fastest.

Empty elements

A few elements have no content, so they have no closing tag. <br> is a line break, <hr> a horizontal rule, <img> an image.

<p>First line<br>Second line, same paragraph</p>
<hr>
<p>After the rule.</p>

Never write </br> It is not a thing. Try adding it in the box above and look at the Check tab - it will tell you exactly that.

Attributes

An attribute is extra information on the opening tag, written as name="value".

<p title="You get a tooltip if you hover here">Hover over me.</p>
<p lang="hi">नमस्ते</p>
<p id="intro" class="lead">This one has an id and a class.</p>

Always quote the value class=lead happens to work. class=lead intro does not - the browser reads only lead and then gets confused. Quote every value and the problem never arises. The Check tab warns you about this.

The skeleton every real page needs

Everything so far was a fragment. A real page has a fixed frame around it, and it is the same five lines every time.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello</h1>
  <p>This is a complete web page.</p>
</body>
</html>

Line	Why it is there
`<!doctype html>`	Says "this is modern HTML". Leave it out and browsers switch to a 1990s compatibility mode that breaks your CSS.
`lang="en"`	Tells screen readers which language to pronounce, and search engines who to show it to.
`charset="utf-8"`	Without it, accented and Devanagari characters can come out as gibberish.
`viewport`	Makes the page behave on a phone. Miss it and mobile browsers pretend to be a desktop and shrink everything.
`<title>`	The browser tab, and the blue headline in Google results.

Delete any one of those from the box above and press Run. The Check tab names the missing one.

head and body

head is information about the page - nobody sees it directly. body is the page itself. Putting a paragraph in the head is a common first-week mistake, and the browser silently moves it.

Comments

<!-- This note is invisible on the page -->
<p>Only this shows.</p>

Comments are not private Anyone can read your HTML with Ctrl + U. Never put a password, an internal note about a client, or a "TODO: fix the security hole" in a comment.

Try these yourself

Write a complete page about yourself, with a doctype, a title and two paragraphs.
Break something on purpose - remove a closing tag - and read what the Check tab says.
Add a title attribute to a paragraph and hover over it in the preview.
Explain what happens if you leave out the viewport meta tag.
Which of these needs a closing tag: p, br, h1, img, hr?

← BackTutorial home Next →Day 2 — Text, headings and lists