<div> tags inside <p> tags?

Discussion in 'HTML & Website Design' started by MaryMach, Jul 7, 2012.

  1. #1
    In XHTML are <div> and </div> tags allowed between <p> and </p>?
     
    MaryMach, Jul 7, 2012 IP
  2. jenev

    jenev Peon

    Messages:
    30
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #2
    jenev, Jul 8, 2012 IP
  3. WebFerret

    WebFerret Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Try to think semantically what a paragraph is meant to be. It is a block of text made from related sentences. It makes no sense to be able to 'div' these up.
    You may include links within paragraph tags with no problem.

    Always remember HTML is simple meant to describe your content, headers, paragraphs, footers etc.
     
    WebFerret, Jul 9, 2012 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Uhm, since when?!? P are block level!, but they can only contain inline-level.

    Though WebFerret has it right, why would you put a DIV inside a P in the first place?!?

    Of course, about half the crud people put in paragraphs these days -- like labels, inputs, images -- are NOT grammatically, and therein not semantically, paragraphs.

    If you had a code snippet or example of what you're working on, we could probably help you dial it in better -- the question in itself just raises more questions.
     
    deathshadow, Jul 10, 2012 IP
  5. Hostwinds_Dan

    Hostwinds_Dan Active Member

    Messages:
    149
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #5
    Agreed with this, we need more information if we're to help you out more.
     
    Hostwinds_Dan, Jul 10, 2012 IP
  6. InfantryVet

    InfantryVet Well-Known Member

    Messages:
    89
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    115
    #6
    If you are trying to style certain elements inside of a <p> tag, your best bet would be to us a SPAN tag.

    For instance... if you want a portion of the content inside of a paragraph element to have a red font, you would create a CSS entry that looks like this:

    
    SPAN.red_text {color: #CD0000;}
    
    Code (markup):
    And the html code would look like this:

    
    <p>This is my text. I want <span class="red_text">this part of the text to be red</span></p>
    
    Code (markup):
     
    InfantryVet, Jul 10, 2012 IP
  7. lordxor

    lordxor Member

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #7
    Not allowed. But you can put <div> into <div>... same behaviour
    <div>this is <div>simple</div> text</div>
     
    lordxor, Jul 10, 2012 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    NOT that you should have a presentational class like "red_text" since at that point you might as well go back to using HTML 3.2 and the FONT tag... Should try to say WHY it's red -- especially since it might not be red on every layout like say PRINT or HANDHELD, or moving forward using media queries.

    I mean, is it red because it's receiving emphasis? (EM), more emphasis (STRONG), just because (SPAN)

    Though if all the OP is asking for is the element to have line breaks, they could either actually *SHOCK* use line breaks (BR) or use a span, and then set it to display:inline-block;

    Though where possible, you should be asking WHY is it getting a line-break or a block container, and is there a semantic tag for doing it? I mean, take how I'd handle a date and a title for something like a blog entry.

    
    <h2>
      <span>10 Jul 2012 <span>-</span>
      This is a new blog entry
    </h2>
    
    Code (markup):
    CSS off - which is what should be written first! it's a single line with a hyphen...

    10 Jul 2012 - This is a new blog entry

    But in the screen CSS

    
    h2 {
      overflow:hidden; /* wrap floats */
      zoom:1; /* trip haslayout, wrap floats legacy IE */
    }
    
    h2 span {
      float:right;
      padding-left:1em;
    }
    
    h2 span span {
      display:none;
    }
    
    Code (markup):
    Puts the date on the right, makes sure the content won't butt up against each-other, gets rid of the hyphen.

    Similar and closer to what I suspect the OP is trying to do, would be a heading that has a tagline. Most of the idiots out there would use a H1 and a H2 -- which is wrong since they're not starting a new subsection of the page with that h2... I'd be using

    
    <h1>
      The name of some site
      <span>-</span>
      <small>and this is the tagline</small>
    </h1>
    
    Code (markup):
    Small is often used for de-emphasis semantically -- much like B and I it applies a hook for when it would be presented smaller for grammatical reasons, NOT for presentational ones since you're only suggesting, not dictating presentation. (as always if you are thinking the default presentation when choosing a tag, you're choosing tags incorrectly!)

    the CSS would then be:
    
    h1 span {
      display:none;
    }
    
    h1 small {
      display:block;
    }
    
    Code (markup):
    The display:block moving the SMALL to it's own line, otherwise similar to the first example.
     
    deathshadow, Jul 10, 2012 IP
  9. netcommlabs

    netcommlabs Peon

    Messages:
    21
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Div tag contain block level elements while P tags contain inline elements.
     
    netcommlabs, Jul 11, 2012 IP