Step 1.2 · Day 1: HTML structure · Review

How HTML works

HTML (HyperText Markup Language) labels what each piece of content is, so the browser knows how to build the page.

Three simple house outlines; the first two are built correctly and the third leans and is marked with a red X — Like architecture, HTML follows rules that every browser understands. Ignore them and the structure falls apart.

HTML describes the structure of the page: here is a header, here is a heading, here is a list of dog care tips. It does not say what anything looks like. That is the job of CSS on Day 2.

Tags, elements and attributes

HTML uses tags: keywords inside angle brackets. Most come in pairs, an opening tag and a closing tag with a slash. The tags plus the content between them form an element.

HTML

<p class="tagline">A friendly guide to dogs</p>

<p> is the opening tag and </p> is the closing tag. p means paragraph.
class="tagline" is an attribute: extra information inside the opening tag, written as name="value".
A few elements hold no content, so they have no closing tag: <img>, <hr>, <meta> and <link>.

Nesting

Elements go inside other elements, like boxes inside boxes. Close them in the reverse order you opened them, and indent the inner ones so you can see the structure.

HTML

<ul>
  <li>A walk and playtime every day</li>
  <li>Plenty of attention from <strong>you</strong></li>
</ul>

Here, each <li> (list item) is inside the <ul> (unordered list), and <strong> is inside the second list item.

Comments

HTML

<!-- This is a comment. Visitors never see it. -->

Use comments to label each part of your page. They make your code easier to read, for you and for anyone grading it.

Look it up

Look up any element in the W3Schools HTML reference.