Should paragraphs breaking point be set with the width of the container, or using br's?
Example:
<div style="width: 30px;">
<p>
Foo bar test
</p>
</div>
Or
<p>
Foo<br>
bar<br>
test
</p>
http://jsfiddle.net/APcU3/
I've always assumed that it should be by setting a width on the container. But I'm not frontend and quite a lot of the HTML templates I've been given to complete have used the BR method.
It depends on specifically what you're trying to accomplish. If you're trying to get words to wrap to fit a specific width on the page then the first example is how you should approach it (as a general rule you should try to adjust layout issues using css, not markup).
However, if there is a logical reason why the lines need to break at those specific places, then the <br /> method is appropriate (for instance, if you want to make sure that each word is on its own line regardless of the word-length, then using markup (<br>) is fine. However, even in these circumstances you may want to rely on more meaningful semantic markup unless there is a real logic to specifically using a break character. I.e:
<p class='thin_column'>
<span>Foo</span>
<span>Bar</span>
<span>test</span>
</p>
and include css rules:
.column {width:50px;}
.column span {display:block;}
This way you can still use CSS to radically adjust the layout but you'll force line-breaks after each word.
Don't ever mix style and structure (or in this example content)! The width-method (used in an css-class and not inline) is the one and only way to achieve this.
the <br> element is only used to force a line break on a specific position. but that is content-dependend not a styling issue.
Related
I have a HTML document with some distinct rows of text, is there some decided correct way to display them?
Example:
Here are
some lines
of text
Should I use the <p> tag for each row, or is there some other/better way to do it?
Examples:
<p>Here are</p>
<p>some lines</p>
<p>of text</p>
or
<p>
Here are <br>
some lines <br>
of text <br>
</p>
Or something completely different?
The CSS & other things isn't really relevant at the moment, I'm just wondering which is the "most correct" way to use.
if you have a string with new lines that you want to display for example in a div, you can use white-space: pre-wrap css style:
.multiline {
white-space: pre-wrap;
}
<div class="multiline">
A multiline text
for demo purpose
</div>
Or you can try this without tag wrapping each line:
<div style="white-space:pre">
Here are
some lines
of text
</div>
The correct way to do things is using things made for the things you need.
If you want a line break (enter), use <br>;
If you want to define a paragraph, use <p>.
According to this, the <br> element is used to insert a line break without starting a new paragraph. Hence you should prefer the second solution over the first.
w3schools comes with a marvelous article about style guides and coding conventions.
The spec makes it very clear that <br> should never be used unless the line breaks are actually part of the content forming a single unit of text.
As these are distinct rows of text, not a single unit that happens to contain line breaks, they need to be split into separate <p> elements.
There is no such thing in most correct way, at least according to the current specification of your needs. Yes, you can put them all in separate paragraphs, using the <p></p> tag or you can separate them via a <br> tag at every line. You can also use spans combined with the white-space CSS attribute, so you have a lot of options. To choose the best option for you, you will need to try them out and see what fits your requirements the best.
If you want to create a multiline paragraph that maintains the line seperation in your code without throwing s everywhere. Simply use the html tag.
I've read and visited a lot of websites, but none of them have provided me with a simple solution. What i want to know is what's the best way to add/skip a line in html? What I mostly use is two <br /> tags, but I know that there is a simpler solution to the problem. Is there a way to skip a line, using css, instead of doing this:
<p>Hello. <br /><br />This is a test</p>
You could simply use 2 separate paragraph (<p>) tags. For example:
<p>Hello.</p>
<p>This is a test</p>
Here's a demo.
Semantically, it depends on your purpose. Do whatever's best in the situation. Some examples.
If you literally need to skip a line, that is, have a empty line with nothing on it in your text, then by all means use two <br> elements.
This is one line of text<br>
This is also one line of text<br>
The next line happens to be empty<br>
<br>
And here is another line, not empty<br>
And so on.
However, if you want to create some blank space between two blocks of prose, then the two blocks should be paragraphs, as mentioned in the other answers.
And if the first part is a bunch of individual lines, but the second part is a piece of prose, only the second part needs to be a paragraph. No need to enclose the first part in <p> tags as well. Example:
Add the water to the recipe<br>
Add the salt<br>
<p>Note: stir thoroughly!</p>
If your intention is to actually separate two lines of text, to signify they don't belong together, you can use a <hr>. Make it invisible if you want.
This is some text
<hr style="opacity:0">
This is some unrelated text
If the next line happens to be an introduction to the later half of the text, change it into a <h4> (that is, a header at whatever level you require here).
The last line of the previous section
<h4>Introduction</h4>
The fist line of the next section
This works because headers also have margins built in.
Lastly, if you have an existing piece of html with your two blocks of text already in two HTML elements, you don't necessarily have to change the markup; all you need to do is set top and bottom margins for those elements in the CSS.
Suppose they are in <section>s:
<style>
section {margin:1em 0}
</style>
...
... The last line of the previous section</section>
<section>The fist line of the next section ...
You can surround the 'Hello' with div and add css of maring-bottom for example:
<p>
<div style='margin-bottom: 40px;'>Hello.</div>
This is a test
</p>
I think that using br tag is always a bad idea. Try using paragraphs, css padding, css margin, hr. Try avoiding br because it's not semantic and using the proper tag in your site "helps the search" engines to "understand your site"
<p>Hello. <br /> <br> This is a test</p>
Using block level elements would help. for example, p is a block level element which would give the line break.
so you can have the text in two paragraphs. and have the margin/padding set to the paragraph
using <br> is a bad approach.
Try using this where you want the blank space:
If you want multiple blank spaces, then repeat the code successively like this:
etc.
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 want to use <p> instead of <br><br> since it takes less space and I can change how big of a gap it will create (changing the top margin of p).
However when using a floating image using <p> will make the row appear below the image instead of beside it.
I was think about setting the display property to inline but that makes the <p> not changing row at all.
So, how can i make p behave like br?
You don't 'make <p> behave like <br>', you use the right element for the job. If you're wrapping paragraphs of text, you use a <p> tag.
Outside of HTML emails, I don't ever see a use for a <br><br>.
p { height:(designated height of space); }
note that this only works if the line is very short and not breaking; or you will end up with a mess.
Its not really good practice to change the br tag...I mean that's why standards exist. like #hunter said before.
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.