I was led to believe the most appropriate way to create extra spacing between elements without using CSS is to use the line break tag (<br />) but many WYSIWYG editors I use tend to use a paragraph with the html code for a space inside it. Some will even replace my manually added <br />s with them?
Any idea why they do this?
That’s really weird, as that doesn’t produce the same
effect. The above is the effect of a <br/>.
This is the effect of <p> </p>. These two are not the same thing. The only explanation I can come up with is not being able to handle self-closing tags.
I suspect this practice arose around about the Web 2.0 frenzy, when everyone was pontificating about how important they considered whitespace to be (whitespace is important, but for a time, people talked about it too much, in a self-aggrandizing sort of way).
And I think the intent of it is to insert an artifical paragraph break, that is something that looks like:
instead of
Trouble is that browsers can’t all be guaranteed to treat paragraph tags exactly the same way (in terms of vertical spacing, at least).
I think it’s because they’re not trying to code a line break so much as a new paragraph that you haven’t typed anything into yet.
So when you go back later and type some actual content the <p></p> tags stay and the non-breaking space character is replaced with your words, instead of replacing the <br> tag with a new <p></p>.
I’m not saying it would be programatically or computationally hard to do the opposite, I just think that by convention WYSIWYG editors are more desktop publishing oriented where a “Enter” equals a new paragraph rather than a line break. Incidentally in Dreamweaver shift+enter gives you a <br>
Try <shift> <enter> rather than a simple <enter> .
In many programs, <shift> <enter> produces a simple line break,
while <enter> produces a new paragraph.
Semantically, I think the two are different. Paragraphs are used to group text into (hopefully) meaningful chunks. Line breaks are used to add aesthetic whitespace.
Their visual similarity leads to casual blending, but I guess there are conceivably instances when you might want to keep their functions distinct.
For example, you might have CSS styles that affect one or the other (for example, certain rules that only apply to new paragraphs) and you want an additional line between your text without that fancy styling.
Or you might be using a script that excepts and highlight the first paragraph of a passage, but sometimes those passages (say, in a quote) have artificial whitespace in them that you might want to include.
The FAQ for TinyMCE (one of the most popular editors) has a FAQ entry that lists several reasons.
The WordPress support forums regularly get questions about line breaks and spacing. In general, most people seem to expect the enter/return key to produce paragraph breaks and not line breaks. The nbsp is to make sure an empty paragraph isn’t collapsed into nothing, because usern expect multiple blank lines to create a bigger blank space.