HTML basics: tags, elements and nesting

HTML: tags, elements and nesting

Every web page you have ever scrolled past is, underneath, a text file written in HTML. HTML does not make things pretty and it does not make things move. Its one job is to say what each piece of content is: this is a heading, this is a paragraph, this is a list.

You say that with tags. Most come in pairs, an opening tag and a closing tag with a slash:

<h1>Biggest heading</h1>
<p>A paragraph of text.</p>

The opening tag, the content and the closing tag together make an element. Some useful ones:

<h1> to <h6>: headings, from biggest to smallest
<p>: a paragraph
<ul> with <li> inside: a bulleted list, one <li> per item
<strong>: important (usually bold) text

Elements can live inside other elements. That is called nesting, and it is how a page gets its structure:

<ul>
  <li>Bread</li>
  <li>Cheese</li>
</ul>

The rule: close things in the reverse order you opened them, like stacking boxes. <p><strong>Hi</strong></p> is fine. <p><strong>Hi</p></strong> is a mess, and browsers will quietly guess what you meant (often wrongly).

Indenting nested elements is optional for the browser but very much not optional for your sanity. Future you, debugging at 1am, will thank you.

Type the examples yourself, change the text, break a closing tag on purpose and see what happens. That is how this sticks.

Try it yourself

Edit it. Break it. Run it again.

<h1>My weekend</h1>
<p>Things I plan to do, in order of <strong>actual likelihood</strong>:</p>
<ul>
  <li>Sleep</li>
  <li>Snacks</li>
  <li>Homework (maybe)</li>
</ul>
<h2>Notes</h2>
<p>Headings go from h1 (biggest) down to h6.</p>

Your turn

Type it yourself. That is the whole trick.

1Heading and paragraph

Add an <h1> heading with the exact text My Playlist, and below it a <p> paragraph with any text you like.

<!-- Write your h1 and p below -->
<div>Songs I can't stop playing</div>

2A list of three

The list below has only one song. Make it a <ul> with exactly three <li> items (any song names you like).

<h2>Top songs</h2>
<ul>
  <li>Song one</li>
</ul>