Learn HTML Part 1.2: Headings
Review
Last time we learned:
-
The essential tags
<html>,<head>,<meta charset=utf-8>, and<body> -
The meaning of tags in HTML
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.