Learn
Site Structure
Add a Heading

Now, let’s learn more about the heading element.

Headings are a frequently used HTML element. You can think of them like headlines in a newspaper. Your eyes may notice headings first because the words are large and bold compared to other text on the webpage.

There are six heading elements: h1, h2, h3, h4, h5, and h6. h1 is the largest heading and h6 is the smallest.

For best practice, you should avoid skipping heading levels. There should also be only one <h1> per HTML page. Although skipping heading levels or using multiple <h1> elements will not cause errors in your code, it is important to keep a logical hierarchy of your HTML content. If you are unhappy with the styling of the heading elements, its appearance should be modified using CSS.

Instructions

1.

Use the largest heading to indicate the name of the website.

In index.html, one line below <body>, type (don’t copy/paste!) the code below:

<h1>Ollie Bike Sharing</h1>

Run your code to view the heading in the web browser.

2.

Use an h2 heading to create the tagline for Ollie Bike Sharing on the next line.

<h2>Share Your Pedals with the World.</h2>

Run your code to view the tagline in the web browser.

Notice how the tagline is smaller than the main heading because it’s in an h2 element.

Feel free to change the text of the heading and tagline of the website.

Folder Icon

Take this course for free

Already have an account?