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

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

@Oriol You know some one is spending too much time here when they are Gravedigging a 2 years old question to mark it as duplicate... Thanks anyway :) — Vladimir, Jun 09 '15 at 18:33

Guilherme Oderdenge · Accepted Answer · 2013-07-04T14:04:16.863

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;
}

thanks, i know about lists, that was a simple example code, but your float:left; was the solution, i guess i should use clearafter for each ul too — Vladimir, Jul 04 '13 at 14:30

score 1 · Answer 2 · answered Jul 04 '13 at 13:56

1

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&nbsp;&nbsp;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.

answered Jul 04 '13 at 13:56

mishik

9,973
9
45
67

2

`` is an exception too. – Guilherme Oderdenge Jul 04 '13 at 14:07

score 1 · Answer 3 · answered Jul 04 '13 at 13:58

1

There's no problem in writing the code on more than one line. Just take care if you set a block-element to something like:

div {
    display:inline-block;
}

because then the whitespaces between the elements are shown in the browser.

answered Jul 04 '13 at 13:58

uruk

1,094
2
14
26

score 0 · Answer 4 · answered Jul 04 '13 at 13:58

0

Multiple whitespace characters are squashed together to one (if not specified otherwise).

So your only option is to write all links on a single line.

answered Jul 04 '13 at 13:58

fehnomenal

509
3
10

i was thinking that too, but look at my updates – Vladimir Jul 04 '13 at 14:55

score 0 · Answer 5 · answered Jul 04 '13 at 14:00

use ul li is good way to create tabs like

HTML

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

css

a {
    margin: 0px; 
    border: 1px solid #666; 
    padding: 10px; 
    text-decoration: none;
    background: #efefef;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #000;
}
ul li{
 display:inline;
}

for manage space margin is better way

score 0 · Answer 6 · answered Jul 10 '13 at 14:28

0

You can also use html comments:

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

It's readable for humans and all whitespaces are commented out for html parsers.

answered Jul 10 '13 at 14:28

Marcin Krawiec

703
3
8