Learn HTML Part 1.2: Headings

11/08/18 - How to add headings, leading up to a basic article.

Review

Last time we learned:

We left off with the following page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <p>
      Hello, world!
    </p>
  </body>
</html>

Trying headings

A heading is a bit of text that tells the viewer what section this is. For example, the heading just above@

In HTML, there are six types of headings: <h1>, <h2>, <h3>, <h4>...

Load the file from the previous lession. Let's make our "Hello, world" a heading.

<h1>
  Hello, world!
</h1>

Save the file and open it in your web browser. You should now see "Hello, world" in big text.

Let's try a smaller heading. Below your "Hello, world" message, add:

<h2>
  And this is a sub-heading!
</h2>

You should now have "Hello world" in large text and "And this is a subheading" in slightly smaller text.

It's about time I showcased a common mistake. Try adding this to the Hello World!

<h1>
  Hello World!
  <p>
    Oi, spaceman!
  </p>

You'll notice that "Oi, spaceman!" is also a heading. Remember to end with </h1> every time.

Learn HTML is continued here.