0

I'm starting to think I'm making less with adsense now because of insufficient margins. I tried with CSS margins with using the margin and padding properties of applicable elements, but then I noticed something. When I disabled CSS, my page looks mostly like trash with words crammed together, almost no new lines, etc.

Some sources claim never to use consecutive HTML breaks. For example:

<br><br>

The funny thing is when I do add the breaks, the page appears more nicely to users who don't have javascript or CSS enabled.

So my question is, why is using multiple consecutive line breaks in HTML considered a bad practice when it improves accessibility (helps greatly with top and bottom margins for users with limited functionality browsers)?

As a side note, using consecutive line breaks takes fewer bytes than using any other tag that can produce a line break.

|improve this question|||||
  • Is there a reason not to use the paragraph tag?? I use the p tag even when presenting data. – closetnoc Apr 15 '15 at 0:16
  • I do for presenting actual text data, but to add just blank lines as margins, I'm better off with <br>. – Mike Apr 15 '15 at 0:18
  • Can you use a div with an id or class and a null back space nbsp? – closetnoc Apr 15 '15 at 0:20
  • I tend to be conservative on my use of the break tag- not while hacking of course, but for the final product. No reason for it, just what I do. I think I found using breaks were less predictable than anything else. I do not remember. ;-) Getting old. – closetnoc Apr 15 '15 at 0:22
  • I know you're presenting good ideas, but <br> is only 4 bytes where as <div ID="X">&nbsp;</div> is almost 25 bytes. I like to make my code small because 1. I want a good code/text ratio and 2. I want the download time to be small and I just find it ridiculous myself to use an opening and closing tag just for a simple line break when <br> works fine. – Mike Apr 15 '15 at 0:23
4

why is using multiple consecutive line breaks in HTML considered a bad practice

Because it breaks the fundamental principle of separation of concerns: by mixing the "content" and "presentation" layers. By using multiple <br>s to create "margins" you are embedding the presentation in the content. To change the "margins" you need to change the content. This ultimately makes the site harder (messy) to update. If sites are harder to update there's more chance of error, etc.

the page appears more nicely to users who don't have javascript or CSS enabled

An extreme (to the point of being non-existent) edge case. Any user that has actively disabled CSS will be used to pages appearing mashed. (How do you disable CSS in the modern browser anyway?) I struggle to imagine that you have real users that are using browsers that are so "limited [in] functionality" that they are incapable of this basic CSS. Any browsers that are purposefully designed to be very limited probably have alternative forms of navigation or are designed to be non-graphical anyway?

It's great to have pages that are at least readable with CSS disabled - it's a sign they are logically structured and are accessible. However, the width of a margin should not matter in this respect. And real users don't surf with CSS disabled.

but <br> is only 4 bytes where as <div ID="X">&nbsp;</div> is almost 25 bytes

You shouldn't be using a DIV either. For "margins" you should be using CSS. If these margins are so critical to the layout then include them as part of an embedded stylesheet in the HEAD section - that way they are loaded with the page and the user cannot see a delay. (Whilst developing you still keep the embedded stylesheet external - separation of concerns - and embed it using a server-side technology when the page is served.)

|improve this answer|||||
  • I tried external stylesheets before and google tells me to optimize CSS for delivery and prioritize the styles. I have all my styles in <head> already. I'm creating for accessibility because I want the whole wide world to be able to access the site even with CSS disabled. – Mike Apr 15 '15 at 16:49
  • Google doesn't say put all your styles in the head section; just the bare essential to get a working page in the users viewport. External stylesheets can be cached client-side, which is going to benefit site visitors in both speed and bandwidth. If you have a "single page website" (perhaps powered with AJAX) then yes, embed your entire stylesheet, but otherwise it's a no-no, certainly if your stylesheet is of any size. – MrWhite Apr 15 '15 at 17:41
1

Because a line break is used to break a line and not add margin. The effect may appear the same but the semantics are not. If you want a margin on a div, use "margin".

You have people who turn CSS off? I doubt that. You have visitors with javascript turned off? Those who know how to do that are the same who know what to expect as a result.

|improve this answer|||||
  • Here's the funny thing... when I added breaks on my adsense ads via <br><br> my income went up by a cent within two hours. Before the change, I made only one cent for the entire day. go figure. I do appreciate your answer but I just don't understand why it must be incorrect semantically as a whole. – Mike Apr 15 '15 at 0:33
  • @Mike It's incorrect semantically because your usage is not semantically correct. You are attributing design success with adding incorrect elements. If margin is what you need, use margin. Breaks won't make the difference. – Rob Apr 15 '15 at 0:36
  • I'm just thinking now If I define all margins in CSS for all applicable tags, and I use a browser where the styles are applied later even tho they are executed in the head of the document (likely because of slow computer etc), then I have a feeling the document will shift as the margin is then applied. – Mike Apr 15 '15 at 0:42
  • @Mike Styles are applied after CSS is downloaded, not before. – Rob Apr 15 '15 at 0:43
  • 2
    @Mike If your daily AdSense income is measured in cents, you are engaged in what we call premature optimization. And even if it were dollars, I'd probably still think the same thing. Anyway, remember that your site's content should be semantically appropriate, because not everyone uses what you normally think of as a web browser. What you should be focusing on at this early stage of your site is high quality content. – Michael Hampton Apr 15 '15 at 1:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.