SitePoint Sponsor

User Tag List

Results 1 to 20 of 20

Thread: <br> or not

  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <br> or not

    Hi.

    We can make a brake with <br>, but everbody seems to hate it. Should i do something like this instead :

    <h6>I Want to make some brakes around here</h6><h6>So i just make a new "<p>"tag or maybe "<h6>" </h6>

    Or is this better <h6>I Want to make some brakes around here. So i just make a new "<p>"tag or maybe "<h6>" </h6>

    If it the same with p, h1, h2 ect. ?

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    You cannot have a P element within a H6 since it [h6] can only contain 'inline elements' such as BR or SPAN, etc. It also depends upon what you are trying to achieve - if it's just visual or positioning reasons (layout) or controlling white space then use CSS.

    The P element; for paragraphs and are 'block level' so by default cause paragraph breaks but you should NEVER use them for generating white space.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    You cannot have a P element within a H6 since it [h6] can only contain 'inline elements' such as BR or SPAN, etc. It also depends upon what you are trying to achieve - if it's just visual or positioning reasons (layout) or controlling white space then use CSS.

    The P element; for paragraphs and are 'block level' so by default cause paragraph breaks but you should NEVER use them for generating white space.
    I am not sure what you mean should i use another text tag <p> to make a break or should i use <br> ? My p element are not empty.

    Lets say i have 3 colums i want to make some white space between them:
    <p>text text text</p>
    <p>text text text</p>
    <p>text text text</p>

    OR

    <p> text text text <br>
    text text text<br>
    text text text<br>
    </p>

  4. #4
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    If you have three separate paragraphs and want either; the block of text column to be a certain width; or want to change vertical white space then use CSS.

    The BR is mainly used for 'special' cases like; poetry or postal addresses not for making generic white space between the sentences themselves.

    Obviously each paragraph will be in the form: <p>Paragraph 1 text...</p><p>Paragraph 2 text...</p><p>Paragraph 3 text...</p><p>Paragraph 2 text...</p> as that denotes separate paragraphs.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    85
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think when people talk about their dislike for <br> tags, it's when they're used to add space. For example:
    Code:
    <img src="logo.jpg"><br><br><br><p>Company Name</p>.
    There's nothing wrong with using them to break lines within a heading.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zot View Post
    I think when people talk about their dislike for <br> tags, it's when they're used to add space. For example:
    Code:
    <img src="logo.jpg"><br><br><br><p>Company Name</p>.
    There's nothing wrong with using them to break lines within a heading.
    Great, that what also what i was thinking.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this not okay because it is <li> and not <p> ?

    <div class="one-fourth footer-info">
    <h4>Contact</h4>
    <ul>
    <li><strong>Name</strong></li>
    <li>Streetadress</li>
    <li>5004 City</li>
    <br>
    <li>Telephone 273623323</li>
    <li><a href="mailto:mail@hotmail.com" style="color:#FFF">mail@hotmail.com</a></li>
    <br>
    <li><a href="#" class="button small black">Lorum</a></li>
    </ul>
    </div>

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ingenting View Post
    <li>5004 City</li>
    <br>
    No, you shouldn't have the <br> element there, for two reasons:
    - it's not valid HTML, and
    - if you want some visual space there, use CSS (e.g. put some bottom padding on that LI.)

    Remember, visual layout is the job of CSS, not HTML. As a rule, don't use HTML elements to get visual effects (except in rare cases mentioned above, such as in poetry or addreses).

    Given your content, it's also worth asking yourself if an address is really a list. If not, don't use HTML that describes it as a list.

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, i dont know are to do this without giving all li in this section padding. Should i give some of the <li> a class like this (i only need the break on two of those <li>) :

    <div class="one-fourth footer-info">
    <h4>Contact</h4>
    <ul>
    <li><strong>Name</strong></li>
    <li>Streetadress</li>
    <li class="padding">5004 City</li>
    <li>Telephone 273623323</li>
    <li class="padding"><a href="mailto:mail@hotmail.com" style="color:#FFF">mail@hotmail.com</a></li>

    <li><a href="#" class="button small black">Lorum</a></li>
    </ul>
    </div>

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Yes, you could do it that way. If you are going to add classes like that, you might as well lose the inline style, too, and do it with

    Code:
    .padding a {color: #fff;}
    Likewise, rather than using <strong> on the Name (there you go using HTML for visual effect again!) you could style it without even using a class:

    Code:
    ul li:first-child {font-weight: bold}

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, you could do it that way. If you are going to add classes like that, you might as well lose the inline style, too, and do it with

    Code:
    .padding a {color: #fff;}
    Code:
    ul li:first-child {font-weight: bold}


    Okay great tip. Did not know ":nth child stuff". I came up with this instead (looks okay ?) :
    one thing i could not figure out. How can i select child 3 and 5 only ?

    Also it is okay to use "strong" in large columns of text right ? And is "strong" as good as using "b" ?

    .footer-info {
    padding-bottom:25px;
    }
    .footer-info a {
    color:#FFF;
    }
    .footer-info ul li:nth-child(1){
    font-weight: bold;
    }
    .footer-info ul li:nth-child(3){
    padding-bottom:15px;
    }
    .footer-info ul li:nth-child(5){
    padding-bottom:25px;
    color:#FFF;
    }

  12. #12
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The STRONG element indicates 'stronger emphasis' and isn't to do with presentation whereas B renders as bold text style albeit if you just visually wanted a heaver or darker font weight you'd use CSS.

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But if you have this text and want to make 10-15 words bold. How would you do this with css and not <strong> or <b> ?


    Lorem Ipsum er ganske enkelt fyldtekst fra print- og typografiindustrien. Lorem Ipsum har været standard fyldtekst siden 1500-tallet, hvor en ukendt trykker sammensatte en tilfældig spalte for at trykke en bog til sammenligning af forskellige skrifttyper. Lorem Ipsum har ikke alene overlevet fem århundreder, men har også vundet indpas i elektronisk typografi uden væsentlige ændringer. Sætningen blev gjordt kendt i 1960'erne med lanceringen af Letraset-ark, som indeholdt afsnit med Lorem Ipsum, og senere med layoutprogrammer som Aldus PageMaker, som også indeholdt en udgave af Lorem Ipsum.

    That is the right place for it right ?

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ingenting View Post
    But if you have this text and want to make 10-15 words bold. How would you do this with css and not <strong> or <b> ?
    You can wrap the words in some inline element like a <span>, give it a class and style it accordingly.

  15. #15
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You can wrap the words in some inline element like a <span>, give it a class and style it accordingly.
    So using b and strong in this above situation is wrong ?

  16. #16
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You could use <b> there. I just prefer to use CSS, as it's a bit more elegant.

  17. #17
    SitePoint Enthusiast
    Join Date
    Feb 2013
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could use <b> there. I just prefer to use CSS, as it's a bit more elegant.
    Thanks i will use b or css now.

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You can use <b> instead of <span>, give the <b> a class and refine the styling a bit, too, if the default <b> styles are a bit bland.

  19. #19
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,883
    Mentioned
    74 Post(s)
    Tagged
    6 Thread(s)
    Off Topic:



    Maybe someone can confirm that as far as SEO is concerned then the <span> tag is ignored because only styling is expected?

    Whereas text enclosed with <strong> and <b> add SEO emphasis to the words similar to heading tags?

    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  20. #20
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    John: I doubt <b> means anything for SEO, but <strong> might, maybe. Depends on how often it's used for importance in the wild versus just making stuff bold. <span> should indeed be entirely ignored by an SE. Span and div have no real semantic meaning, so I'd prefer the span.

    I'd use the <b> if it was an HTML email though. Easier.


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
  •