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.
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 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.
Will inserting line breaks in HTML like this affect the output?
<header>
<div id="someid">
something here
</div>
</header>
I've been trying to study web development, and different tutorials use different formats. Will the extra lines between tags affect the output? I personally would prefer it that way since as a newbie, it looks more readable to me.
No - whitespace is collapsed in the output.
Primarily that means two things:
1 - Leading/trailing whitespace in an HTML element is not displayed, so these two divs will display the same:
<div>Some stuff</div>
<div> Some stuff
</div>
2 - Multiple whitespace characters in a row will be collapsed into one space. That means these two divs will display the same:
<div>Some stuff</div>
<div>Some stuff</div>
Here's a nice article for further reading.
No, it does not. I think what you are looking for is something like this:
<header>
<div id="someid">
<br>
something here
<br>
</div>
</header>
The <br> tag produces a newline in text.
Whitespaces are ignore from the output, at one or two exceptions (fortunately, you can see this at an advanced level only)
You can put 1 blank line or 1000, the result will be the same
Linebreaks won't affect the rendering, but multiple whitespaces are collapsed into a single space, which might make a difference.
For example, when you're indenting tags for readability the output will have a space between the tags. When your intention is for those elements to sit directly next to each other you'll find they don't.
See this link for examples and techniques to combat the unwanted space.
No,.. but sometimes yes.
At an old job they had to remove newlines and indents from divs because of some bad bootstrap grid CSS (an early unofficial copy that mutated over time) that they used across all their sites.
This was a really weird issue that baffles me and we basically had to always make sure our closing tags for 'cols' were on the same line as the next opening tag with no whitespace at all.
Eventually, I stopped this by convincing them to use an official bootstrap grid.
I am creating a webpage for small primary school, where teachers can make a new posts for children parents. Webpage is very simple and I want to keep it simple, but there is a problem with text_area. In the view all written text is in one block, but I want to write some sentences in new line, how I can do this to keep it simple. I don't want to use a rich text editors for that problem.
in your view, use simple_format() That will display all text as it was typed, with spaces and line breaks.
an example from one of my apps:
<div id="report-body">
<%= simple_format(#report.body) %>
</div>
Use line feed and carriage return to put new line in text area (i.e)
For example:
<textarea>This is first line.
</textarea>
To add
in text area you need to implement some javascript to create keyboard shortcut.
I am not sure if I get your question correctly; I think it is a question about css. I think you just need to give this property:
white-space: pre;
in the css for textarea. Then, all white spaces, including carriage return, will appear as they are in the textarea.
wrap your text inside html tags for simplicity, you can also add a simple CSS and style your page as desired.
<p> This is your paragraph </p>
<h1> This is your heading </h1>
use a <br> tag to break line
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>