Learn HTML by building a registration form Step 31: isn't the <p> tag needed for the bit of text that will display on screen?

Hello how are you?

So I just passed Step 31, adding a bit of text, then another bit of the text is a link to another website. I wrote the following:

   <label for="terms-and-conditions"><input id="terms-and-conditions" type="checkbox" required/> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a></label>

And my code passed. However, I practised this after completing the Build a Cat App project, and my understanding was that the part of the text that displays on screen, before the link, needs a p tag. This is one of my codes I worked on in Visual Studio code, with a link to a Chinese Metal band:

<p>A FANTASTIC Metal band from China, <a href=https://www.metalkingdom.net/band/black-kirin-28860>Black Kirin.</a></p>

And it totally worked like this in Visual Studio Code, as did ALL my other links, since I had practiced just this with random various links linking to various webpages. But for Step 31, my code wouldn’t pass because of my p tag, so I took it off, and then it passed. So is this p tag compulsory / not compulsory? Do we not need it here since all of this is inside a label tag (my original practice exercise on Metal bands and such like didn’t have the code inside a label)? Thank you! On the one hand I’m happy my code passed in Step 31, but on the other hand, as I want to learn my syntax properly, I wondered about this. Thank you! :slightly_smiling_face:

Hey good question but no you dont need p tags everywhere that is mostly for paragraphs and some of the test only want the requirment to pass. One other thing, very seldom do you see p tags inside other tags.

1 Like

Hi! So if you wouldn’t have a p tag inside other tags, then you wouldn’t have a p tag, for instance, inside a label tag then? That seems to make sense, as on a further step in the project, Step 35, we also found that it didn’t work to put a p tag in exactly the same context… And it also makes sense the p tag would be more for whole paragraphs of text… But I guess I am confused then that my OTHER CODE, the one on that Chinese Metal band, worked with the p tag… Was I not meant to write the p tag in that other context (there was no wider context, my exercise to learn this was just me writing one line of text each time, with bits of the text liking to random websites each time…)? Because what surprised me is that Visual Studio Code didn’t flag it for me as a syntax error at the time, and also, the link worked when I tried it… I am just trying to make sure that in doing that exercise myself with twenty links, I didn’t teach myself something wrong… So was I not supposed to add the p tag in links like the one on the Chinese Metal band then? Thank you so much for your reply! :slightly_smiling_face:

I think you are correct in trying to see what is going on here because of putting text in other things like a lable, and some things work in vs code that dont here and you`re not trying to pass a test either. The key takeway after all this code is the browser has a different way of looking at what tag you use and has special importance behind the scenes. The good thing about VS code is that you could click on code to get usage information and the like.

Definition and UsageThe

tag defines a paragraph. Browsers automatically add a single blank line before and after each

element. Tip: Use CSS to style paragraphs.


HTML p tag - W3Schools

](HTML p tag)

I hope this helps :slightly_smiling_face:

Right, so possibly Visual Studio Code was more accepting of that p tag even if it may have been best not to have it… And yes, I understand it’s not a test or anything, but I am also just trying to figure out best practice with this in the eventuality I ever learn enough coding to land a job that requires it. So I suppose, if I had a simple webpage with a few links, not random links like my one on that Chinese Metal band, but say, a webpage on coding with links to excellent coding schools for instance, with one line on each school and the same types of links, it would be best practice not to use that p tag then, even if Visual Studio Code doesn’t flag it as an error? I guess what I should do now is to take a link like the one on that Chinese metal band and write it again WITHOUT the p tag in Visual Studio code, to see how Visual Studio code interprets it… Thank you so much for your reply!

1 Like