So now that we’ve learned more about a couple of the different tag types, this lesson will go over a few more of them, and start to focus on how to organize these tags into something that looks closer to a typical web page.

Permalink Headings

You can use headings to group sections of a page into different sub sections. Look over the reference to see examples of the heading tag types.

Note:

  1. You can use them more than once
  2. They get smaller as you go, meaning they go from small to big

For example, here is a subsection of a body tag that you could have:

1
2
3
4
5
6
7
8

<h1>Playing a game</h1>
How to play a game

<h2>Installation</h2>
How to install...

<h2>Running the game</h2>
How to start it after it's installed

So here the general idea is playing a game, but that has smaller but related sections for installing and running it. You could also then break down the installation into even more smaller sections, using h3 or h4 tags.

Observe: What happens to the font color/appearance as the headings get smaller?

Permalink Paragraphs

When you write text you naturally group the text into paragraphs. For these situations you can use the p tag. The reference covers this material, but it’s really simple so will include it here too:

1
2
3
4
5
6
7
8

<p>
    This talks about a thing,  is a paragraph.
</p>

<p>
    Still talking about the same topic, aka is in the same section, but is
    another paragraph.
</p>

Permalink Lists

When you have a list of things (for example a list of your favorite games), there is a slightly more complex set of tags you use. Checkout the reference and read about the three tag types involved.

Permalink Completion

See if you can make a new paged called www/elements.html that look like this

link

Hint:

  1. There are three heading levels (1, 2, 3)
  2. Under the first heading, there are two paragraphs
  3. The second heading contains an ordered list
  4. The third heading contains a paragraph