SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29

Thread: <br> - nasty?

  1. #1
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    <br> - nasty?

    For some reason, I try to avoid using the <br> tag as much as possible. Sometimes I find myself looking to other methods that might be illogically more complex solutions, mostly when trying to place some inline-level element below another. There is something "dirty" about it, I don't like using it for some reason.

    What's your feeling on it? Is there anything wrong with using it, despite it being a perfectly acceptable element that is in the spec?

  2. #2
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a line break as you know and not a paragraph.

    For me it is a question of semantics - if you follow that you will use it when it is apropos.

    An address might be wrapped in <address> tags but require line breaks (not paragraphs), as might a poem.

    Point is, if you use <br> when it is the right tag, there is nothing to feel bad or dirty about, in fact it is quite the reverse - it would be silly to use the wrong tag in replace of a break (and have to use CSS to alter the tags default properties significantly) in the examples outlined above.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Most of the time it's when I want to put a span below an image instead of next to it, so I use <br> instead of wrapping the image in a paragraph. Is this semantically "bad"? The image isn't text, I know, but it's still considered inline-level... which is why I ask. But what you say makes sense, it seems logical that <br> would be used only for placing line breaks between text and text.

  4. #4
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    Most of the time it's when I want to put a span below an image instead of next to it, so I use <br> instead of wrapping the image in a paragraph. Is this semantically "bad"? The image isn't text, I know, but it's still considered inline-level... which is why I ask. But what you say makes sense, it seems logical that <br> would be used only for placing line breaks between text and text.
    Well, we have agreed when a break is called for - so that is one down .

    Can you past the complete code (with some basic illustrative CSS if needed) for an example (or link to one) that uses a <br> as you describe? When the code is seen in its complete context I bet we can figure out what is (or are) the soundest, most semantic tag(s) for the task.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wrapping the image inside a paragraph is the bad idea. If you want the image to appear below something, wrap it in a DIV instead.

    Also, don't just think in terms of how it will look when the stylesheet is rendered. Think about how it will look when viewed in something with no CSS support as well.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    http://raffles.awardspace.com/G/

    Hover over the images and the caption appears. The code for that is basically this:
    HTML Code:
    <a href="image"><img src="image" /><span>caption</span></a>
    The span is given block display to make it appear below the set of images rather than next to each image. And I've just noticed how ugly it looks when CSS is turned off. So it seems I will have to find a better solution... but I can't put the image in a <p> because that's not allowed in an anchor. Any suggestions?

    Edit: Ah, hello Dan. Yep, just thought about it when CSS is off. Not sure what the best thing to do is, then.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this particular case, I'd replace the image with another span, and put the image inside one of the spans as a background. That way, when CSS is not displayed, you get just the text.

  8. #8
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    http://raffles.awardspace.com/G/

    Hover over the images and the caption appears. The code for that is basically this:
    HTML Code:
    <a href="image"><img src="image" /><span>caption</span></a>
    The span is given block display to make it appear below the set of images rather than next to each image. And I've just noticed how ugly it looks when CSS is turned off. So it seems I will have to find a better solution... but I can't put the image in a <p> because that's not allowed in an anchor. Any suggestions?
    In this case the simplest thing to do would be to use a <div> as your caption doesn't really constitute a paragraph. This will also look a little better in the absence of CSS.

    Depending on what you are doing you might be able to get away with something like this, but it does not look so great without CSS.

    Either would be assuming you don't want/didn't intend to use background images.

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I typically just give the <img> display:block;.

    To me, how it looks when CSS is off doesn't matter nearly as much as the semantics. In this case whether it's permissible to use <br> or not is debatable. I tend to lean towards a minimalistic approach in terms of markup and only add elements beyond the semantically necessary ones when I need a style hook for my CSS.

    John, don't you mean a <span>, since you may not nest <div>s within inline elements like, <a>s?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    Brevity is greatly overrated brandaggio's Avatar
    Join Date
    Dec 2005
    Posts
    1,424
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    I typically just give the <img> display:block;.

    To me, how it looks when CSS is off doesn't matter nearly as much as the semantics. In this case whether it's permissible to use <br> or not is debatable. I tend to lean towards a minimalistic approach in terms of markup and only add elements beyond the semantically necessary ones when I need a style hook for my CSS.

    John, don't you mean a <span>, since you may not nest <div>s within inline elements like, <a>s?
    I was actually thinking the <div> would wrap the caption and the image would be above it - maybe another div containing them - if you need it nested you should use the span of course - something neutral (and not a paragraph) to wrap the caption.

    I think if you have a series of thumbnails there is an argument for using a list (as in my linked example above) but I am sure people have varied opinions on this.

    Bear with me guys - I need some sleep - will check on this manana.

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    John, as Kravvitz rightly says, the <div> can't be used because both the image and the caption have to be wrapped in the same anchor and since an anchor is an inline element, it can't contain a div.

    Dan, I wouldn't want to use those thumbnails as background images because they're generated by PHP and putting that in my external CSS file would be a pain in the ****. I want to keep embedded CSS to a minimum and inline styles are out of the question. Anyway, when CSS is off, it would be nice to still have the image there.

    Kravvitz, I thought of giving the <img> block display, but that still means the caption will appear right next to it instead of under it with CSS off.

  12. #12
    SitePoint Zealot NinjaNoodles's Avatar
    Join Date
    Oct 2006
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just be sure to assign a CSS class to the area with the line breaks, so things can't move around when the font is resized.

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    John, as Kravvitz rightly says, the <div> can't be used because both the image and the caption have to be wrapped in the same anchor and since an anchor is an inline element, it can't contain a div.
    They don't have to be and in fact you'd be better off adding an anchor to both image and text and then you could wrap both in block level tags.

  14. #14
    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)
    I use it loads because I have a 220+ page website with Lyrics on and that is an appropriate use. However, usally it is best to avoid it as much as possible.

  15. #15
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  16. #16
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles
    Kravvitz, I thought of giving the <img> block display, but that still means the caption will appear right next to it instead of under it with CSS off.
    To me, it doesn't matter whether the text is to the right or below the image when CSS is disabled. If it did matter, I would use a technique other than giving the <img> display:block;.

    Quote Originally Posted by Tyssen
    They don't have to be and in fact you'd be better off adding an anchor to both image and text and then you could wrap both in block level tags.
    Many people want a hover effect to to be visible on the text when you rollover the image. If they aren't in the same link, then you would need a JavaScript solution to make that work in IE5-6/Win.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  17. #17
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Many people want a hover effect to to be visible on the text when you rollover the image. If they aren't in the same link, then you would need a JavaScript solution to make that work in IE5-6/Win.
    If you're making markup choices based on a presentational effect, then js would be the better option (not saying that is the case here but if you're thinking about your HTML in terms of how you want it to appear on screen instead of how to describe your content, then you're going about it the wrong way).

  18. #18
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've got a good point there. The markup should come first. However, I'm not sure if having two separate links to the same page/image is a good thing.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  19. #19
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    About the only problem I can think of with having two links going to the same place is from an accessibility point of view and that wouldn't be an issue here because the contents of the link would be different.

  20. #20
    SitePoint Enthusiast ComputerGuru247's Avatar
    Join Date
    Jul 2006
    Location
    Wisconsin
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use them as long as it is not too much. I too also think of better ways of achieving it. However I am not going to make a bunch of other code to do the same thing as a br. It validates and as long as it is not overused it looks fine.
    Bryan

    Breakpoint Designs - Web Design, Logos, and more!

  21. #21
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder
    I use it loads because I have a 220+ page website with Lyrics on and that is an appropriate use. However, usally it is best to avoid it as much as possible.
    What's wrong with <pre></pre> for formatting content with preset linebreaks?

  22. #22
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It limits you to a fixed-width font though, doesn't it? Also, it's probably bad practice to put an img in it, I think it's supposed to be used only for text.

    Quote Originally Posted by Tyssen
    About the only problem I can think of with having two links going to the same place is from an accessibility point of view and that wouldn't be an issue here because the contents of the link would be different.
    The thing is, then I can't use a:hover span to get the caption to appear and I'd have to use javascript. Markup-wise, I see not much of a problem with putting both the span and the img in the same anchor and I'd like to avoid using javascript as much as possible (I've been "trained" to think now about all those alleged people who browse with JS turned off). But just as I see using JS for something like that as a bit "dirty", I feel the same way about <br>.

  23. #23
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have to excuse me - but to quote Farooq...

    DAMN.

    Use the BR and be done with it - sheesh, what was I saying about overthinking solutions to problem, generally in ways that take more code? This (specifically the whole bit with the image label) definately goes in the Dee Dee Dee pile.

  24. #24
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It's just a discussion on alternative possibilities, I'm not actually going to change anything. I just wanted to see what people thought about the usage of <br>.

  25. #25
    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)
    Quote Originally Posted by Buddy Bradley
    What's wrong with <pre></pre> for formatting content with preset linebreaks?
    I don't need <pre> as I also use paragraphs, and it's not essential they are preserved past verse level amongst other things. Though in some causes it would make sense.


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
  •