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.
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 code within my HTML, which seems simple enough:
<div>
<a" class="test">Test</span>
</div>
But when I go to render it, the a element gets replicated all over the page. Any idea on why this is happening?
Modern browsers use HTML5 parsing algorithm which has special rules for misnested tags: http://www.w3.org/TR/html5/syntax.html#an-introduction-to-error-handling-and-strange-cases-in-the-parser. Different behavior with inline display, I guess, is due to different white space processing models for inline and block formatting contexts, resulting in different text content that appears in the implicit elements created by this algorithm.
You're not using your HTML tags correctly.
<div>
<a class="test">Test</a>
</div>
The code above should render correctly. You must close your anchor tags with < /a> and not a < /span> tag.
(Pardon the space, it wouldn't render the HTML without it.)
I ran into this issue earlier and found a number of things after diving deeper into it and I thought it was worth sharing my findings. I was able to replicate the issue with this simple code:
<div id="one">
<div id="two">
<a class="test">Test</span>
</div>
</div>
<div id="three>
<div id="four">
</div>
</div>
The above code will render with not one, not two, but three instances of the a element, without the content, but with css classes intact.(in one after two, and wrapping three and four).
But wait, it gets weirder:
If you replace the ending span tag with </div> the link is still
replicated, but now only twice, with the link wrapping three and four no longer present.
If you add style="display:inline;" to the version with an ending </div> the behaviour will be the same as with an ending span. Even stranger once you realize that a is already an inline element.
The results are consistent across browsers, meaning it is most likely not just a quirk of one engine, but something inherent to HTML. (Tried on webkit and Gecko browsers, but haven't tried Trident yet).
Hope you find this interesting/useful. Certainly threw me for a loop the first time I saw it.
I have an unordered list styled into tabular navigation that needs to look like this: . To give the tabs rounded corners each tab has left, middle, and right div with respective css backgrounds*.
When I format the list items like so (jsFiddle):
<li class="tab">
<div class="item-wrap"><span class="item-before"></span><span class="item">Inventory</span><span class="item-after"></span></div>
</li>
I get the desired result:
But when I format the HTML to make it more readable, like so (jsFiddle):
<li class="tab">
<div class="item-wrap">
<span class="item-before"></span>
<span class="item">
Inventory
</span>
<span class="item-after"></span>
</div>
</li>
The rendering changes:
What is going on?
* Note: I know that this approach is outdated. The class I built this for restricts us to HTML 4 and CSS 2.
I can't fully explain it, but it is to do with the whitespace around the a elements...
This renders correctly...
<span class="item">Inventory</span>
This does not...
<span class="item"> Inventory </span>
So reformatting the HTML, introduces whitespace around the a elements.
Browsers treat line feeds as whitespace (like literal space character).
It's no secret that HTML condenses multiple whitespace characters into a single space.
However, what's less known is what element that space belongs to.
Consider this HTML: <b> <i> spaces!</i></b>
The two spaces arond the i element will be condensed, but will the resulting space be inside it, or out?
This difference is what is causing your HTML to render differently when you have different indenting.
Personally, I like to use PHP to echo out HTML like this, so I can have it on multiple lines in the source but only output one line of HTML:
<?php
echo "<span>"
."Hello, world!"
."</span>";
?>
Results in:
<span>Helld, world!</span>
W3 teach us:
By default, block-level elements are formatted differently than inline
elements. Generally, block-level elements begin on new lines, inline
elements do not. For information about white space, line breaks, and
block formatting, please consult the section on text.
And in the cited link
For all HTML elements except PRE, sequences of white space separate
"words" (we use the term "word" here to mean "sequences of non-white
space characters"). When formatting text, user agents should identify
these words and lay them out according to the conventions of the
particular written language (script) and target medium.
So basically, since your elements are defaulted by inline elements, your tags are handled as a "word", and so the spaces between your tags does counts when rendering the text.
Basically, at this point, there are two things you might not want:
Write all your code at one line
Use extra CSS to be able to put the tags in separated lines
Well, at least I would not want this. That is why I use haml to generate HTML. Like many HTML template engines, it Allows you to handle white spaces between tags without re-indenting your code
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>