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 strings and spaces

for example, if I use break for the next line, there is extra space 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 a standard way to handle this, or I just have to write all the html code in 1 line if I don't want the space and the gaps between the tags to be executed as

EDIT:

Thank you guys, but I already know that extra spaces are compressed into one and how (enter) acts, the problem is that I do not want to enter this way (we put a space between my tags, because then I need to transfer this space to my style), so I don’t need to write code on the same line (I want to write it clean and readable)

EDIT 2:

I think I need to solve the issue a little

I need this code:

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

which will be displayed (seen by the user), and act like this code: (there is no additional gap between them due to line breaks or spaces)

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

this extra space is causing me a lot of problems,

is there any solution for this? perhaps stylize the body so as not to count the space and enter between the tags (not between the text inside the tags, of course) "as a space as a result?

DECISION

Reading the answer of the main answer to the last part, he mentioned float, so just adding float: left; to my code above my problem is 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 (OTHER DECISION):

I tried other methods, and I think display: table-cell; - the answer is also, and maybe even better, because after that we do not need to clean

The only drawback is that it will not work on IE 7 and earlier, although I believe that it is controlled using a simple lt IE 8 hack

jsFiddle

Answer 1

The most semantic way to break a string into pure HTML is to use the <br/> tag.

Cm:

 <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 are many prejudices regarding <br/> , but in this case you can use without problems.

Update

When you have a list of things like you showed us, firstly, the right thing is to put all the links in a list, for example:

 <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 display: inline; . Cm:

 ul li { display: inline-block; } 

Or if you want, depending on your code, you can float elements. Take a look:

 ul li { float: left; } 

Answer 2

Several spaces (space, input, tab, etc.) are compressed to one place by the 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 essentially link1link2 link3 link4

And if you want to force the use of a new line, use the <br> tag.

Answer 3

No problem writing code on multiple lines. Just take care if you set the block element to something like:

 div { display:inline-block; } 

because then the spaces between the elements are displayed in the browser.

Answer 4

Multiple whitespace characters are compressed together to one (unless otherwise indicated).

Thus, your only option is to write all the links in one line.

Answer 5

Using ul li is a 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 spatial brand management is best

Answer 6

You can also use html comments:

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

It is readable for people, and all spaces are commented out for html parsers.