0 points
Submitted by ab062000
about 7 years

Is it better to use spaces or not after a tag?

Is it better to use spaces or not after a tag?

For example: 
<p>A paragraph.</p>
or
<p> A paragraph. </p>

And this would also go for the CSS sections. For example:

color:red
or
color: red

It probably doesn’t matter at all, but I’m curious if it does, and what people tend to do. Thanks.

Answer 53d6c4387c82ca0a3a0000ca

8 votes

Permalink

As tags go, spaces are superfluous. Leading spaces are ignored and trailing spaces mean nothing. The best practice is to not use spaces that have no meaning. Both examples above will render the same way:

A paragraph.

Furthermore, hard returns in HTML are treated as a single space.

<p>On this line
there is this text
and on this line
there is this text.<p>

How do we think this will render?

On this line there is this text and on this line there is this text.

Try this:

<p>The     words     are     five     spaces     apart.</p>

What did you get?

The words are five spaces apart.

Tags are meant to mark up content. That means we should not alter the content when we mark it up. Adding spaces is altering content. Stick with the first example and forget the second.

As CSS goes, spaces have meaning in some cases, none in most others. What does have meaning, though, is the semi-colon that separates properties:

color: red;

The space is inconsequential, but helps readability (for the programmer, not the computer).

In a descendant selector the space is critical:

div li a { /*...*/ }

In shorthand rules, the space is critical:

div {
    border: 1px solid #fed;
}

The space after : is not important but good to have. The ones between the values are very important.

Here we do not need spaces, but they aid readability:

p {
    font-family: Garamond, Tahoma, "Times New Roman", serif;
}

“Times New Roman” is a name, including the spaces. These are needed.

In time you will be able to distinguish when spaces are important and when they are not. Write neat, readable code that is not overly embellished with white space and you will be on the right road to writing code your collaborators (and you) can read and understand.

This is valid CSS:

body{color:black;background:white;font-size:100%;margin:0;padding:0;position:relative}

but how readable is it?

body{
    color: black;
    background: white;
    font-size: 100%;
    margin: 0;
    padding: 0;
    position: relative
}

Above, we see that the last property declaration does not have a semi-colon. It is not required when followed by }. However, best practice would be to always follow every value with a ; just so you don’t start any bad habits.

Similarly,

<ul><li>one</li><li>two</li><li>three</li></ul>

is perfectly valid HTML, but would we want to read an entire listing composed this way? Not likely. The computer sees it this way, but that doesn’t mean we have to, as well.

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
points
Submitted by Roy
about 7 years

1 comments

ab062000 about 7 years

Thank you so much for such a detailed answer! It makes a lot of sense now.

Answer 5495c0de9113cb428d00377f

0 votes

Permalink

You really don’t need to, but it doesn’t really matter

points
Submitted by Teh Flippens
almost 7 years

Answer 54f470a051b88741d3006f56

0 votes

Permalink

you don’t need it, because it’s just result same thing. consider every space will take spaces

matematika microsoft excel

points
Submitted by Klan Mattorang
over 6 years