1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

What is wrong with <p> and <ul> in this code?

Discussion in 'HTML & Website Design' started by PunitJain, Jul 26, 2022.

0
  1. #1
    I’m learning html Nowdays and i am not able to understand this what's the mistake i am doing- when i am entering my code it is giving output INSTRUCTIONS Create an <h1> heading called ‘Some random thoughts’. Create a paragraph using <p> which contains any text you like that describes your unordered list. Create an unordered list which contains a list of 4 random things.

    <!DOCTYPE html>
<html>
    <head>
        <title>Unordered Lists</title>
    </head>
    <body>
        <h1>Some random thoughts</h1>
        <p>
            <ul>
                <li>table</li>
                <li>pen</li>
                <li>book</li>
                <li>bag</li>
            </ul>
        </p>
    </body>
</html>
    Code (markup):
    can anyone suggest what's the error in code. Thanks in advance
     
    PunitJain, Jul 26, 2022 IP
  2. Wan Bo

    Wan Bo Member

    Messages:
    72
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    45
    #2
    Unfortunately, I didn't find any problem with the code. Maybe you can mention the specific problem which you faced and the editor you are using.
     
    Wan Bo, Jul 26, 2022 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #3
    Did you try this?
    <!DOCTYPE html>
<html>
    <head>
        <title>Unordered Lists</title>
    </head>
    <body>
        <h1>Some random thoughts</h1>
        <p>Some description of your unordered list</p>
            <ul>
                <li>table</li>
                <li>pen</li>
                <li>book</li>
                <li>bag</li>
            </ul>
    </body>
</html>
    Code (markup):
     
    qwikad.com, Jul 26, 2022 IP
    sarahk and cronik like this.
  4. shalom_m

    shalom_m Member

    Messages:
    49
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    33
    #4
    A p element can only contain phrasing content (which are “inline” elements like span and strong).
    uls and ols are flow content (“block” elements like p and div). So they can't be used inside a p.
     
    shalom_m, Jul 26, 2022 IP
  5. Sumit_Singh

    Sumit_Singh Well-Known Member

    Messages:
    716
    Likes Received:
    64
    Best Answers:
    6
    Trophy Points:
    100
    #5
    Yes, this code has an error because the <p> tag is for the paragraph so the browser can automatically add a blank line before and after the <p> tag. Your code will be executed but this is not the right way to nest the list in the <p> tag.
    As @qwikad.com mentioned above you can write a description or tagline for your list in the <p> tag.
     
    Sumit_Singh, Jul 26, 2022 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    What the devil makes an unordered list a grammatical paragraph.

    HTML tags have meanings. P is for a grammatical paragraph.

    A label and input are NOT a grammatical paragraph. An image all by itself is NOT a grammatical paragraph. A table of actual tabular data is NOT a grammatical paragraph. Headings and menus are NOT grammatical paragraphs.

    When in doubt, look it up in a decent reference like MDN's.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

    And pay attention to the "permitted content" part, which in this case links to "phrasing content".

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content

    Though... why would you think you even need that paragraph around the list in the first place? Are you making the mistake of choosing tags for their default appearance instead of what they actually mean?
     
    deathshadow, Aug 1, 2022 IP