Integrate Headings into Web Pages
In this guide you will learn how to add headings to a web site, including working with all the heading options that will automatically alter the size and emphasis for content.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a Bottega Bootcamp license

For the next session, we will journey into heading tags.

The largest default heading in HTML is Heading 1, and is commonly associated with the title. This is represented as <h1></h1>.

If you want a smaller heading, you can choose Heading 2, that is represented as <h2></h2>, and another size decrease, it's Heading 3, and so on.

medium

Shown above is the default size of each text as it becomes smaller as we go down the Heading list. The Heading 5 tag is even more compact than the default text. In most settings of practical application, there's few chances to use <h5></h5>, but it's beneficial to know how it looks.

One more aspect of heading tags is they all begin on a new line. Because of this feature, they function similar to a <div> tag.

For an example, create a <div> tag and have two lines of content that read "Line 1" and "Line 2". Automatically, they are displayed side by side. Now, add a <h1> tag to the first line, and the second line is consequently moved to below.

medium

Anything placed inside a heading tag, will be isolated on another line.