SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: <p> or <br>?

  1. #1
    SitePoint Wizard jax502's Avatar
    Join Date
    Jul 2003
    Location
    Jacksonville, FL
    Posts
    1,031
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question <p> or <br>?

    Just curious...let's say we have an article that consists of multiple paragraphs,
    but the style is consistent throughout. Is it advisable to just enclose the whole article in one <p></p>? and use <br>'s for every paragraph?such as:

    <p class="content"> blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah<br>
    <br>
    blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah</p>

    or use <p></p> for each paragraph:
    <p class="content">blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah</p>
    <p class="content">blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah
    blahblahblahblahblahblahblahblah</p>

    Both will achieve the same result but I'm just curious which one is the most correct way of doing it. Is it just a matter of one's preference?
    jax502

  2. #2
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Neither is technically wrong but the second example is probably the best way to do it. If most or all of your paragraphs are going to be content though, I would assign the CSS to the <P> tag itself. This can be overriden later with specialty classes for other paragraph types.
    Wayne Luke
    ------------


  3. #3
    SitePoint Wizard jax502's Avatar
    Join Date
    Jul 2003
    Location
    Jacksonville, FL
    Posts
    1,031
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by W. Luke
    Neither is technically wrong but the second example is probably the best way to do it. If most or all of your paragraphs are going to be content though, I would assign the CSS to the <P> tag itself. This can be overriden later with specialty classes for other paragraph types.
    Thanks Mr. Luke!
    jax502

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by W. Luke
    Neither is technically wrong but the second example is probably the best way to do it. If most or all of your paragraphs are going to be content though, I would assign the CSS to the <P> tag itself. This can be overriden later with specialty classes for other paragraph types.
    Not only that, you can also use :first-line and :first-letter CSS pseudo-classes with <p>, which you can't do with <br />.

  5. #5
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,022
    Mentioned
    53 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by vgarcia
    Not only that, you can also use :first-line and :first-letter CSS pseudo-classes with <p>, which you can't do with <br />.
    Actually, this will work just fine in any version 5+ browser:
    Code:
    p {
      text-indent: 1em;
    }
    You don't need the :first-line selector for that.

    r937.com | rudy.ca | Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If you are using 2 <br> tags together just to make space between your text then I would consider that incorrect. If its a paragraph then use the <p> tag on each paragraph.

    If you use the <p> tag then the space between can be controlled exactly and easily by using CSS to control the margins on the <p> element (as already mentioned above).

    Not only that - it looks so much neater as well

    Paul

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937
    Actually, this will work just fine in any version 5+ browser:
    Code:
    p {
      text-indent: 1em;
    }
    You don't need the :first-line selector for that.

    Yeah, but can you do this without adding a bunch of HTML to get the same effect?
    Code:
    p {
      font-size: 80%;
      color: #666;
    }
    p:first-line {
      font-weight: bold;
      color: #000;
    }
    p:first-letter {
      font-size: 200%;
    }
    These should work in IE 5.5+ by the way, in addition to the usual cadre of "good" browsers like Mozilla or Opera.


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
  •