I've been wondering if I can use <p> </p> (just space in paragraph) instead of <br />
Because I love to keep my code semantic and thought if this is right has been bothering me for a while now. I have seen WYSIWSG editors (TinyMCE) use this, but I still rather ask then do it wrong.
That is not "semantic", an empty paragraph is something that more or less cannot exist, semantically. It contains no information, i.e. no semantic content. All it does is change the visual layout, i.e. the presentation.
You're far better off using styling to change the margins, borders or padding to achieve the effect you're after.
What's wrong with using the margins of the paragraphs for vertical-spacing instead?
<p>Hello World</p>
<p>This is much cleaner than using empty tags with non-breaking spaces.</p>
The right way to do it is with CSS: use the margin-top or margin-bottom.
<p> </p> is pretty horrible... I'd rather see <br> than that (even though it may be less "correct").
<p> </p> is not semantic, so I don't know how that helps you.
You should set the space between the paragraphs with css.
I advocate wrapping items in block-level tags, such as divs and ps. This way I don't need either. If you want to space out elements, you should be using margins. You can be more accurate with margins anyway.
In a situation where you're forced to have a line break, use <br />: it, unlike empty paragraph tags, actually does mean 'line break'. There's almost always a better way to do things though.
It's HTML. You can use whatever it wants as long as you're sure it will render the way you wanted on all the browsers you're gonna use. I don't understand what you mean by "keep my code semantic" so I'm not sure what your issue with <br> is. But if you're talking about formatting and such, turn to CSS.
Related
Is it more efficient to add a margin to an HTML element or to insert a <br/> somewhere around it?
I wonder how both ways differ in the type of page rendering and, of course, how they differ in speed.
Adding a margin to an element, makes it much more efficient to work with. Just call the class or element, which will automatically add the margin.
A line-break might be forgotten now and then.
As for the speed: No experience in performance, but as you don't have to wait for the css, a line-break might be some nano seconds faster...
But then again, if you are using multiple elements which need some whitespace below adding a margin to it might be better, as your amount of code-lines will reduce (less kB).
It depends on what you want to do. If you are working with an element that is a part of a layout, then you MUST use margins/paddings. You can use <br /> to make a little correction inside the text for example, but my way is to create a CSS class for <p> or other elements like that and simply use it. You can make a classes even for <span> elements to show it in some proper way. This is how I deal with this kind of issues. I think that using a lot of <br /> isn't smart.
And what others say, margin gives you more control.
I have the following 2 HTML statements. I want the "p" tag to NOT wrap to the next line. But I do want it to wrap in subsequent lines. (so I can't use the nowrap style). I want to create two CSS classes to treat each class differently.
<b class= "mscFlapSumBold" id='flapSum0'>This is the Flap Summary</b>
<p class= "mscFlapText" id='flap0'>This is the Flap text </p>
EDIT:
OK. I'm using James suggestion and it's working except that I can't seem to change the line spacing between my lines. When I use margin or line-height, they get ignored. So, James' suggested code is working mostly....
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
Furthur edit: My issue surrounds the fact that I am using jQuery Mobile. So, depending on the viewport, your solution works only sometimes (with certain viewports). Driving me CRAZY. If you have any ideas, I would sure appreciate them.
Simply wrap both in the same p element and place .mscFlapText within a span instead:
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
JSFiddle demo.
It's worth noting that the specification defines p as Grouping Content and b is Text-level Semantics; they aren't designed to go inline with each other.
You can use:
p.mscFlapText {
display: inline;
}
But actually, you should use <span> instead, better not mess up with default behaviour of HTML element.
Besides that, a good habit and small tip is to use <strong> rather than <b> since it's can improve your SEO ranking.
I've often wondered about the proper use of a <br> line break. Seems that often they are incorrectly used for positioning or clearing content where CSS should instead be used.
W3schoools.org says to use <br> for blank lines, but not for creating or separating paragraphs. Looking over W3C HTML5 spec draft, it's a little clearer that the <br> would be used when content requires a line break such as lines of an address or blank lines in poetry, where intended by the author.
But I'm still interested in any further clarification or input anyone else may have. I often find myself opting not to use <br> tags but instead just styling elements with the desired clears, margins, paddings, etc. to create the space desired.
Not that it's supremely important, but here's the example that got me thinking about this where a popular ("authoritative") site used a <br> that I'm not sure is quite semantic. Here I would've just cleared the <a> from it's siblings via CSS:
<p>Lorem ipsum dolor sit amet, consectetur tempor laborum.</p>
<br>
more >>
To me, linebreaks should only be used inside paragraphs to indicate a new line. Adding line-breaks between paragraphs was used back in the day, when HTML looked like Chop Suey and the semantics of the HTML document looked like someone from preschool used Dreamweaver.
I personally rely on margins and padding for content separation, if I have to use a <br /> it means I've done something wrong. I think lines of an address are a perfect example of proper usage and I would stick to only those scenarios.
When the linebreak has semantic meaning within the unstyled document.
As someone said, poetry is a good example - conventionally, poetry is written with a linebreak between lines. As are addresses. It does not make sense to mark up a line of a poem or an address with a paragraph element, as these are better matches to the whole address or a stanza of the poem.
I agree with the specification, br should be used to create new lines of text within a paragraph. Semantically it makes, sense- a paragraph is a block of text with some top or bottom margin, whereas br specifies no margin, just a newline a the same line-height / line-spacing.
I use line breaks when customers may be able to edit things - it's easier if they just use the return key rather than get confused as to why spaces appear around certain elements on the page. This is almost always within text areas though, there's no reason to position anything else using <br />
The break tag (that when used alone should be <br />)
Must be used to break a line not for positioning, specially since you break only single lines.
It should have the same concept behind as you use the return key.
Hope it helps.
My opinion:
<br> would be used when content requires a
line break such as lines of an address
or blank lines in poetry, where
intended by the author.
(With that said, occasionally I use them for separating paragraphs, too) </ br>
What is considered "better" practice:
<div class="clr"></div> (Where clr is clear:both)
or just simply:
<BR CLEAR:BOTH />
I'm really confused since I was once told never to use BR but then BR is designed to be what the div class is?
Question:
Would it be wrong to just use <BR /> when you want to clear or should I use the div?
Thanks in advance
edit: I've already read http://www.w3.org/TR/html4/appendix/notes.html#notes-line-breaks and http://www.w3.org/TR/html4/struct/text.html#edef-BR
example (note I've removed classes and added the style directly to the html for ease of reading):
<div style="float:left;">
<img style="float:left;" src="/images/videos/video.jpg" width="90" height="75" alt="thumb" title="title" />
<a href="www.example.com" >Title text</a>
<div style="clear:right;"></div>
<span>Length: duration here</span>
<div style="clear:right;"></div>
<span>descriptive text here<span>
<div style="clear:right;"></div>
<span>Date: date of added here</span>
</div>
In your expert opinions am I using spans, divs, etc correctly? Should I use BR's instead of Divs for the breaks.
Thanks everyone
Closing Note:
Thank you for all for pointing out that a linebreak is nothing to do with clearing of floats. I need to learn exactly what a linebreak is... I guess I don't know.
Thanks to freddy for seeing what I actually wanted to do and giving me the solution I clumsily asked for.
None of the above. Best practice is to use the HTML to give structure to the information.
So, you use div to put a section of information in the page. If you need a line break after that information, you use CSS to style that.
<div id="someinformation">
<p>some parragraph of info</p>
<ul>
<li>an item of the list</li>
<li>another item</li>
<li>yet another item</li>
</ul>
</div>
Now in CSS you can style as needed. The document on its own have structured information with some default way of being rendered by the browsers. The structure plays well with screen readers which are not bothered with HTML elements for visual appearance.
Say you have more elements, in CSS you can decide to let them appear beside each other, or with a line break, or with some margins.
You're asking the wrong question for the solutions you gave yourself. Those 'clear' elements aren't there to create line breaks usually, they are there to clear floated elements that occur before them.
BR are used semantically for adding line breaks in such places as in the middle of a phrase or between two words. It does NOT clear floats.
An element with a clear property clears floats on either side specified above the element, here it makes more sense semantically to use a div - since you are not creating a line break but rather clearing a float.
a BR can be specified to have a clear but semantically once again, this would lack sense.
For adding padding/break/margin after a certain text it is best to use the margin/padding properties rather than use BR's consecutively.
So in summary:
This is the first line<br />Second line
For br's.
<div style="float: left">Clear me</div>
<div style="clear:left"></div>
For div's.
<div style="margin-bottom: 19px;">Test here</div>
For a "line-break" or more accurately margin under the text.
As to your presentation, it seems that you may want to research floats a bit more. Semantically it is a bit messy with the fact everything is float left, and then you clear right every line. Graceful coding is all about minimal code - maximum results.
What about adding clear-properties to your span elements, instead of inserting another (pointless) element in there?
HTML should describe structure, not presentation. If you add BR - line breaks - to change the presentation (how the site looks when styled) you're doing something wrong.
Adding DIVs or SPANs has no effect on the structure, since they have no semantic meaning at all.
I'd never use a div for that. I believe that <br/> is the best thing to do when you need a line break inside a <p> for example.
Anyway, I'm not sure why are you using that CLEAR:BOTH or the class=clr.
Should I use <br /> and in HTML to position elements, or should I just use CSS display:inline with padding/margin for positioning and all styling? what are pros and cons with both?
Use <br> to represent a linebreak inside a block element and use to represent a non-breaking space inside an inline element. Nothing more. For the remnant just use CSS the smart way with help of under each the display, float, padding and/or margin properties.
<br /> has its uses, but if you find yourself using   a lot, I would consider finding better ways to align things. is just ugly and clunky.
If it's tabular data, use a table. Your life will be much happier.
If it's not tabular data, use css, as BalusC suggests.
Ideally you should position everything with css, and only use <br /> (line break) and inside <p>s.
But this isn't an ideal world ;)
<br /> Can really go either way. But if you find yourself using it to adjsut paragraph spacing orsomething like this then you really have to ask yourself "is there a reason why im using breaks instead of applying a class to adjust margins?" on the other rarely if ever makes any kind of sense outside of a paragraph (<p />) and half the time theres not much use for it ther any how as using text-indent is preferable for indenting the first paragraph and much to the chigirn of Editors everywhere im completely opposed to the double space prepending of senetences on the web - as far as im concerned that is a print only thing.
In HTML5 you also have the new
http://html5doctor.com/element-index/#w
the answer is not black and white, it depends on your content, sometimes it should be and in some cases the so the content will be on a single line.
if you want it as block you can use
Using CSS margin and padding will give you greater flexibility to make adjustments later on.