Having added content to our very first <h1> element I already feel the power of hacking vested in me. Well, almost. We’ll get there 😉

By completing the HTML task so admirably, we now have a similar step ahead:

Add an h2 tag that says „CatPhotoApp“ to create a second HTML element below your „Hello World“ h1 element.

freeCodeCamp

Why not use another heading element, such as the <h3> element? Good you ask.

Because it screws with semantics!

Well, that escalated quickly… It’s no understatement, however. While you might be perfectly fine reading the <h3> element above on your fancy hipster retina display, a lot of users and even more machines will struggle to do the same – because they depend on a page’s right semantic to understand what your awesome page is about. Sorry about the insult btw. 😉

So how to structure headings the right way? MDN to the rescue!

<h1>Beetles</h1>
    <h2>External morphology</h2>
        <h3>Head</h3>
            <h4>Mouthparts</h4>
        <h3>Thorax</h3>
            <h4>Prothorax</h4>
            <h4>Pterothorax</h4>

Now, let’s apply this to the task at hand. We are given the following:

<h1>Hello World</h1>

Looks familiar? Yes, it’s what we provided in the last task. 

<h1>Hello World</h1>
    <h2>CatPhotoApp</h2>

The tab used to visually divide the <h1> and the <h2> element will not influence our result – it’s there to give yourself some slack, using whitespace. And yes, it works for code too!

Summa summarum: this task is about adding a subheading to our previous solution. In order to do so, we need to add „CatPhotoApp“ as content in between the <h2> and </h2> tags.

Photo by Jae Park on Unsplash