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>
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 want to make a website with lots and lots of paragraphs, but I'm wondering if there is a more efficient way of achieving the spacing in the code without having to go back and place <p> tags for every paragraph. I have a feeling that it is not just simply HTML and CSS to achieve this. I have tried the <pre>element but it is spacing out each line, not the paragraph itself.
Could anyone help steer me in the right direction of how to do this?
<p> is the correct way to make a paragraph. The HTML5 specification allows you to exclude the ending </p> tag but many browsers and blogging engines require it so I'd advise you to include it. A <br> tag can be used to make a generic line break but doesn't allow you to apply CSS styles to your paragraph, so don't use it for paragraphs.
If you just don't want to type out <p> every time, then what you want is an IDE or a rich-text editor that can output the html for you.
You could write your paragraphs in Markdown and then convert them to HTML. In Markdown, paragraphs are delimited by two line breaks, not with tags. (Stack Overflow uses Markdown for posts.)
Example:
This is one paragraph in Markdown.
This is a second paragraph. As you can see, no `<p></p>` tags are necessary.
You want use snippets? For fast codding you can use emmet. For example:
You can write p.class_name*4 and after that you will get
<p class="class_name"></p>
<p class="class_name"></p>
<p class="class_name"></p>
<p class="class_name"></p>
I hope i understand you correctly.
A solution could be writing a full properly p element and then just copy and paste it as much as you want and need.
To add space between each p element, use the br element which gives you space as it "breaks" up the rows.
Hope this helped you, happy programming!
If I understand you correctly, you have a long text that is divided to paragraphs, and you want to display it "correctly" in the browser.
Paragraph division in texts is usually achieved by a blank line between them.
So - you should parse the existing paragraphs from the text:
var paragraphs = text.match(/[^\r\n]+/g);
Add HTML paragraph formatting:
var paragraphsInHtml = paragraphs.map(function(paragraph) {
return "<p>" + paragraph + "</p>";
});
And reform the text:
var formattedText = paragraphsInHtml.join();
[code snippets are in javascript]
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'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.