How to handle space and tabs (and line breaks) in html source [duplicate]

Question

When writing clean and well-readable code in html, how to handle linebreaks and spaces

for example if i use break for the next line there is an extra space in between

<style type="text/css">
    a {margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
    <a href="#">Test 1</a><a href="#">Test 2</a> <!-- SAME LINE -->
    <a href="#">Test 3</a> <!-- NEW LINE -->
    <a href="#">Test 4</a>
</div>

jsFiddle

so what should i do,

is there an standard way to handle this or i just should write all the html code in 1 line if i don't want the space and breaks between tags to act like this

EDIT:

Thanks guys but i already know extra spaces are shrinked into one and how (enter) acts, the problem is i don't want enter to act like that (put an space between my tags because then i have to hande that space in my style) , so i don't have to write my code in the same line (i want to write it clean and readable)

EDIT 2:

I think i have to clear the question a bit more

I need this code:

<div>
    <a href="#">Test 1</a>
    <a href="#">Test 2</a>
    <a href="#">Test 3</a>
</div>

to be shown (seen by user) and act like this code: (no extra space in between because of the line breaks or spaces)

<div>
    <a href="#">Test 1</a><a href="#">Test 2</a><a href="#">Test 3</a>
</div>

this extra space makes me a lot of trouble,

is there a solution for this? maybe styling the body to don't count space and enters "between tags (not between the text inside tags of course)" as space in the result?

THE SOLUTION

By reading chiefGui's answer on the last part he mentioned float, so just by adding float: left; to my code above my problem solved

Online: jsFiddle

Code:

<style type="text/css">
    a {float:left; margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
    <a href="#">Test 1</a><a href="#">Test 2</a> <!-- SAME LINE -->
    <a href="#">Test 3</a> <!-- NEW LINE -->
    <a href="#">Test 4</a>
</div>

UPDATE (ANOTHER SOLUTION):

i tried another methods and i think display:table-cell; is an answer too and maybe its even better because we don't need to clear after that

the only downside is it will not work on IE 7 and earlier versions, although i think it is manageable with a simple lt IE 8 hack

jsFiddle

Answer 1

The most semantic way to break a line with pure HTML is using <br/> tag.

See:

<style type="text/css">
    a {margin:0px; border:1px solid #666; padding:10px; text-decoration:none;}
</style>
<div>
    <a href="#">Test 1</a><a href="#">Test 2</a><br />
    <a href="#">Test 3</a><br />
    <a href="#">Test 4</a>
</div>

There is a lot of prejudice about <br/>, but in this case you can use without problems.

Updated

When you have a list of items like you showed to us, firstly, the right thing to do is put all the links in a list like this:

<ul>
    <li>
       <a href="#">Link 1</a>
    </li>
    <li>
       <a href="#">Link 2</a>
    </li>
    <li>
       <a href="#">Link 3</a>
    </li>
    <li>
       <a href="#">Link 4</a>
    </li>
</ul>

Secondly, to align them on the same line, use the display: inline; property. See:

ul li {
   display: inline-block;
}

Or, if you wish, depending of your code, you can float the elements. Look:

ul li {
   float: left;
}

Answer 2

Multiple whitespaces (space, enter, tab, etc.) are shrinked to a single space by browser. The only exceptions are:

Tag "pre":

<pre>
    Your    text   with    original   spacing
</pre>

And &... things like:

A  B(this will have two spaces between A & B)

So in your case: link1(no space)link2(enter)link3(enter)link4 is essentially link1link2 link3 link4

And if you want to force newline - use <br> tag.