Tutorial for More HTML elements

What you will be learning:

  • How to put text on a page using a paragraph element.
  • How to use containers to hold multiple elements

Let's get a second HTML tag

Let's try a few more basic HTML elements. Headings introduce content, so let's add some content: a paragraph.

The start tag and closing tags for a paragraph are <p> and </p>

Exercise

Instructions

Add a paragraph after the headings and add some content to it, your name for example. The paragraph element starts with <p> and ends with </p>.

👀 Hint

Your editor should look like this:

<h1>Hello world!</h1>
<h2 class="h4">How are you today?</h2>
<p>My name is Ernest Rutherford (I discovered the atomic nucleus)</p>

Containers

A paragraph is a container for your text content. It has a purpose and a meaning.

There are also generic containers, that have no particular meaning or purpose but will allow you to have things contained so you can manipulate them. This generic container is called a <div>

Exercise

Instructions

Let's put both the heading and the paragraph inside a <div> container.

👀 Hint

Try this piece of code:

<div>
  <h1>Hello world!</h1>
  <h2 class="h4">Hello World</h2>
  <p>Add your name</p>
</div>

As you can see, that didn't change anything visually, but both elements now are grouped in that container. That will be helpful when we look at making prototypes a little more complex, and for example show/hide a group of things.