Curious question - Basic CSS course

This is just something I’m curious about:
I know by definition that the <main> relates to the main content on my page, but why does FCC put the <h2> outside the <main> in this challenge, if it doesn’t relate to the main title (<h1>)?.

Think about it as if you were building a newspaper and you have your main title but of course each section needs a subtitle and the article content it’s as important as the subtitle.


<style>
.red-text {
  color: red;
}
</style>

<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<div>
  <p>Things cats love:</p>
  <ul>
    <li>cat nip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>flea treatment</li>
    <li>thunder</li>
    <li>other cats</li>
  </ol>
</div>

<form action="https://freecatphotoapp.com/submit-cat-photo">
  <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
  <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label><input type="checkbox" name="personality" checked> Loving</label>
  <label><input type="checkbox" name="personality"> Lazy</label>
  <label><input type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Challenge: Change the Font Size of an Element

Link to the challenge:

you can do like that. I believe for tag there’s no strict hard and fast rule in usage, thus its use may vary depends on context, IMO.

1 Like

You are not the first to make that observation. I don’t think there is a great reason why the h2 is not inside the main element.

You are asked to create the main element in this challenge and it only includes two paragraph elements as children and not the h2 heading element. The rest of the challenges uses the same structure.

I do believe the idea of putting the h2 inside the main has been floated, but because all the rest of the challenges uses this structure they would all need to be updated, which is a lot of changes to have to make for such a small adjustment.

And as said, there isn’t anything wrong with having a heading outside the main element, but it is a bit of an odd choice if you ask me.

1 Like