Web Foundations Lesson 1 of 7

HTML basics: tags and elements

25 min, 4 exercises

Learn

Tags describe content

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>

Learn

Elements and nesting

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>

Learn

Closing tags in order

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

Run it: a weekend plan

Press Run and the page appears in the preview under the editor. Change some text or a colour and run it again.

example.html to run
<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>

Practice

Heading and paragraph

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

exercise_1.html to run
<!-- Write your h1 and p below -->
<div>Songs I can't stop playing</div>

Practice

Build a three item list

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

exercise_2.html to run
<h2>Top songs</h2>
<ul>
  <li>Song one</li>
</ul>

Break/fixFix the bug

A heading that swallows the page

The recipe's first line should be the only big heading, with a normal paragraph under it. Instead the paragraph comes out huge and bold. Find out why and fix it.

exercise_3.html to run
<h1>Pancakes<h1>
<p>Serves 4. Takes 20 minutes.</p>
<ul>
  <li>2 eggs</li>
  <li>100 g flour</li>
</ul>

Your turn

A game night page

Write a page for a game night from nothing. It needs:

  • one h1 that says Game night
  • a paragraph that has the word Friday inside a strong
  • an h2 that says Games, followed by a list of three games
  • an h2 that says Snacks, followed by a list of two snacks

On your own. Hints open after your first check.

exercise_4.html to run

  
  

  

  





    
    

    
  

  

    
HTML, CSS and JavaScript