This forum is now read-only. Please use our new forums at discuss.codecademy.com.

HTML Basics Forum

View Course

530 points
E6864c09a702debca1982fc7d4a5cd1a?s=140&d=retro
Submitted by
ab062000
about 3 years ago

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.


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>

8090 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago

1 Comment

E6864c09a702debca1982fc7d4a5cd1a?s=140&d=retro ab062000 about 3 years ago

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


0 votes

permalink

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

91 points
5495c4b051b887f35b003951_278462713
Submitted by
Teh Flippens
almost 3 years ago


0 votes

permalink

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

matematika microsoft excel

132 points
Picture
Submitted by
Klan Mattorang
over 2 years ago