Introduction to HTML5 Elements - Creating a 'MAIN' element

I am a complete beginner. I don’t seem to understand what a main element is. This are the steps I have taken so far and happen to be lost at “Your code should have one main element.”.

You need 2 p elements with Kitty Ipsum text.

Passed

Make sure each of your p elements has a closing tag.

Passed

Your p element should contain the first few words of the provided additional kitty ipsum text .

Your code should have one main element.

The main element should have two paragraph elements as children.

The opening main tag should come before the first paragraph tag.

The closing main tag should come after the second closing paragraph tag.

Your code so far


<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/introduction-to-html5-elements

Hi @Nomso-code

main elements contains the all the main content of that particular page. Wrap both the paragraphs inside the main element. Remember the main element should start after the h2

to elaborate on the previous answer a main element works in the same manner as a div element.
So why use it then? That is a good question.
The reason that html5 has expanded on the type of elements available is that it enhances the semantics of the code. Meaning the readability of the code itself for your benefit and more importantly for the benefit of other people who might be making changes or updates to what you have developed.
for example:

<div>
    some stuff in here
</div>
<div>
    a lot of stuff in here
</div>
<div>
    some stuff in here
</div>

This does not tell us much about what the purpose of the pages content is right
now compare to this:

<header>
   stuff
</header>
<main>
   lots of stuff here
</main>
<footer>
 a bit of stuff in here
</footer>

as you can see just by glancing at this code you can have an understanding of the general structure of a page and what the content of of each division is intended for.
this exercise wants you to place the paragraph elements inside the main element (where it says lots of stuff here)
hope this helps

2 Likes

Thank you. Your explanation is very helpful.

1 Like