SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    573
    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,016
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    yes, you can use block tags like P within LIs and DDs
    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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,159
    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
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 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
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    See &#167;21 Document Type Definition.

    All entities, &#37; block, e.g., are defined before use, as are their components. See this progression toward defining the %inline; entity.
    Code:
    <!ENTITY % fontstyle
     "TT | I | B | BIG | SMALL">
    
    <!ENTITY % phrase "EM | STRONG | DFN | CODE |
                       SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >
    
    <!ENTITY % special
       "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">
    
    <!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
    
    <!-- %inline; covers inline or "text-level" elements -->
    <!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
    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

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    except that it may not contain an a, a &#37;formctrl (form control), a form, or a fieldset.
    That's right, and since it's expressed as an exclusion (after the content model and preceded by a minus sign) this applies for all descendants, not only immediate children. So you can't cheat and do <button><span><a>...</a></span></button>.

    Quote Originally Posted by Stomme poes View Post
    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.
    Those aren't really HTML concepts; they are just something we often use to simplify things. You can look at the parameter entity declarations for %inline; and %block; in the DTD to get a good hint, as Gary said.

    What we call inline elements can usually only contain text and other inline elements (button and object are exceptions to that rule). Block-level elements vary more: some can only contain other block-level elements (form, blockquote); others can only contain text and inline elements (p, address) and others can contain both (div, li). Since it's not semantically appropriate to block-level and inline elements on the same structural level, the latter should be read as 'either', rather than 'both'.

    The important thing is what each element is allowed to contain, and that's what the DTD expresses. There's a slight learning curve, but once you've grasped how to read a DTD it tells you almost all you need to know. (There are some limitations that cannot be expressed in DTD syntax.)
    Birnam wood is come to Dunsinane

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Since it's not semantically appropriate to block-level and inline elements on the same structural level, the latter should be read as 'either', rather than 'both'.
    I read in the specs that if block contains both inline and other blocks, that an anonymous block is generated around any loose (anonymous inlines) or inline (explicitly inline) content.
    Should this be ignored re semantics?

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    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
  •