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
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>
1 comments
Thank you so much for such a detailed answer! It makes a lot of sense now.
Answer 5495c0de9113cb428d00377f
You really don’t need to, but it doesn’t really matter
Answer 54f470a051b88741d3006f56
you don’t need it, because it’s just result same thing. consider every space will take spaces
Popular free courses
- In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.
- Beginner Friendly.4 Lessons
- Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.
- Beginner Friendly.11 Lessons
- Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.
- Beginner Friendly.6 Lessons