SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    P tags within unordered lists?

    I can't remember the rules here - can I put a block element like a paragraph in an li? Or actually, now that I think about it, probably what would be better would be to use a definition list - which means I'd want to put my p tags in the dd tag.

    What I'm wanting to do is create a kind of glossary. The dt tag would hold the type of item, and the dd would be the actual note about the item. The notes may have more than one paragraph, though, which is the reason for the question. If I can't use p tags, what's the best solution? A span that's styled like a p?

  2. #2
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,350
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    yes, you can use block tags like P within LIs and DDs
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I know this is for "XHTML1.1" (which they shouldn't be teaching) but 99% of the time it's relevant to HTML as well:
    http://learningforlife.fsu.edu/webma...es/xhtml/tags/

    You can see quickly who can be a parent and who can be a child of whom. Thing is, watch out for stuff like <button>... it can have an inline as a parent, and a block as a child, but know that this:

    <a href="#"><button><div>blahblahblah</div></button></a>

    would be illegal because the inline a is still getting a block div as a descendant.

    There is also this: http://www.w3.org/TR/html401/
    just not as quick a reference guide : )

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Thing is, watch out for stuff like <button>... it can have an inline as a parent, and a block as a child, but know that this:

    <a href="#"><button><div>blahblahblah</div></button></a>

    would be illegal because the inline a is still getting a block div as a descendant.
    No, that's not illegal.
    The button element type is a (replaced) inline element but it can have block-level children. In CSS terms you can think of it as an inline-block. And since button is inline and a valid child of an a, it doesn't matter what its content is (except that it can't be another a – since links aren't allowed to be nested and buttons aren't allowed to contain links – or a form, fieldset or form control).

    It's quite like the object element type, which is also (replaced) inline and can have block-level children.
    Birnam wood is come to Dunsinane

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The specs help in understanding. They make wonderful bedtime reading; guaranteed to put you to sleep, with no nasty side effects.

    The specs for &#167;17.5 The BUTTON element read like so:
    Code:
    <!ELEMENT BUTTON - -
         (&#37;flow;)* -(A|%formctrl;|FORM|FIELDSET)
         -- push button -->
    This says the button element requires opening and closing tags (the two hyphens), and may contain zero or more %inline or %block elements (the %flow entity), except that it may not contain an a, a %formctrl (form control), a form, or a fieldset.

    Which simply repeats what Tommy said, using the word from on high.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    What I wish they would say (or do they, in some secret code?) is when an element is a BLOCK and when it is an INLINE (or something else). Instead, it states what they may contain.

    Thanks for the check on the button.. I could have sworn I got an error on that one long ago because of such a contruct.

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That only applies to rendering via CSS. In other words, how to handle a semantically weird mix of block and inline.

    It essentially creates anonymous block boxes around inline-level content, so that child boxes are either all block-level or all inline-level.
    Birnam wood is come to Dunsinane


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •