CODEWITHSUNDEEP
html
Hero Stradivari
Hero Stradivari

Reputation: 595

Will line breaks/whitespace in HTML affect how the page is displayed?

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.

Upvotes: 4

Views: 803

Answers (5)

Brad
Brad

Reputation: 950

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.

Upvotes: 0

freejosh
freejosh

Reputation: 11383

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.

Upvotes: 0

uptownnickbrown
uptownnickbrown

Reputation: 997

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.

Upvotes: 7

Maxime Lorant
Maxime Lorant

Reputation: 36141

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

Upvotes: 0

Prashan Dharmasena
Prashan Dharmasena

Reputation: 221

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.

Upvotes: 0

Related Questions