Welcome to part 2 of this course, where you'll learn a broad overview of common HTML elements that you'll find useful when building your projects.
As you use these elements, bear in mind what we discussed in part 1: the HTML you write should suit the story you want to tell with your content. This means choosing elements with purpose. Let's see what your options are.
Textual structuring
When you read a book, you may notice that the book's title is often the largest heading in the whole thing. There are usually headings at the beginning of each chapter, but they're smaller. Lastly, the book's actual text ("Once upon a time, there was...") is never in the form of an enormous, 300-page long heading; that would be impractical and impossible to read! It's often in a smaller font size.
Adding structure to a text creates a hierarchy for the content in an immediate, easy-to-understand way. Apply the same thinking to the text in your web pages by using <h> elements and <p> elements. You've already seen both in this course!
In this chapter, we'll only look at headings. In the next, we'll put together headings and paragraphs to make a nice text flow.
Heading elements
Create headings in HTML by using tags that include a lowercase "h" and a number from 1-6. The numbers 1-6 let you control the default size of your heading and therefore the importance it has in your page structure.
What do each of these tags — <h1>, <h2>, <h3>, <h4>, <h5>, <h6> — actually look like on a web page?
<h1>I'm an h1 heading!</h1>
<h2>I'm an h2 heading!</h2>
<h3>I'm an h3 heading!</h3>
<h4>I'm an h4 heading!</h4>
<h5>I'm an h5 heading!</h5>
<h6>I'm an h6 heading!</h6>Screenshot 2018-03-19 08.21.58.png
As the number from 1-6 increases, the heading becomes smaller!
If you're wondering why you need so many headings, remember that <h1> headings often reserved for page titles, smaller headings are to delineate articles and sub-sections, etc. You should only use one <h1> heading per page so as not to confuse your reader or browsers/search engines about the page's primary content, but you're free to use the others as much as you like.
You won't have only heading elements in your web page. You'll also have normal-sized text underneath the headings. Let's see that in the next chapter!
