How to nest p element in a element

HTML-CSS
#1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**


<h2>CatPhotoApp</h2>
<main>

<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>

<img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">

<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>
</main>

  **Your browser information:**

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

Challenge: Nest an Anchor Element within a Paragraph

Link to the challenge:

#2

You havent told us what your issue is?

#3

To nest means to put inside.

They want you to put an anchor tag inside of a paragraph tag, as in the example on the left in the challenge.

Say we have two elements, element1 and element2. If we need to nest element2 inside of element1 …

<element1>
   <element2></element2> <!-- Nested element --> 
</element1>

That is a general example. So, apply that concept to the paragraph and anchor tags in the challenge.

#4

Hi @abhinav0420 ,

For this challenge: Nesting Anchor Element within a Paragraph, there are two things worthy to note about:

There are two broad categories of elements (from previous HTML standard) that we can still use on HTML5 to ‘simplify’ things —

  1. Block Level Element — <p>...</p> is of this type and can nest inline level element/s such as <a>...</a> , and other block level elements like, <ul>...</ul>. A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a “block”.
    Ex.:
<p>For more details, <a href="#">continue reading...</a></p>
  1. Inline level Element — <a>...</a> is of this type and is used for phrasing content (e.g., inline text) and is not capable of nesting block level element such as <p>...</p> on this example. Inline elements are those which only occupy the space bounded by the tags defining the element, and does not start on a new line and only takes up as much width as necessary. Elements of this type can nest other inline elements, however.
    Ex.:
<a href="#"><cite>Accessibility</cite></a>
<a href="#"><li>Home</li></a>

Hope this helps to get you going.

1 Like
#5

My gosh, I’m stuck as well, no matter how I try it just wouldn’t accept and let me move on.
Will try tomorrow again

#6

It’s asking you to nest the existing a element within a new p element. The new paragraph should have text that says View more cat photos , where cat photos is a link, and the rest is plain text.

You should be able to create a p and the phrase “View more” before the a and closing /p after.

#7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.