HTML code spacing and formatting

On web pages:

As you have seen what you enter into HTML code and what is displayed on the web page are different.

  • HTML <tags> are not displayed
  • Text is formatted according to the (hidden) HTML tags

In addition to this there is the matter of spacing.

The follow two codes produce EXACTLY the same result on a web page:

<html>
<body>
<p>
This is some text
and
<b> this is bold text </b>
</p>
</body>
</html>
<html><body><p>This is some text and <b>this is bold text</b></p></body></html>

The result: This is some text and this is bold text

Lines, carriage returns, and more than single spaces DO NOT APPLY in HTML.

  • If you want a new line (carriage return) to show on your web page, use “<p>” or “<br>” or other such HTML tags
  • If you want more than a single space use a special “non-breaking space” code ” ” or other tricks

Due to problems showing HTML code while using HTML code (Inception!) I cannot show an example using ” ” here! Try http://www.htmlbasictutor.ca/non-breaking-space.htm for example or just do a Google search. It is not overly important but it can be frustrating if you don’t know about it.

In HTML coding:

However, of the 2 examples above which was easier for YOU to read? The first one definitely! So while you carriage returns and extra spaces WON’T display on your web page you CAN use them in your code to make it more readable.

Here’s another example:









Indenting (and spaces vs tabs):

It is a good idea to have uniform indenting of your code. This makes seeing nesting of tags MUCH easier as well as general content etc.

There is some argument as to if you should indent with spaces or tabs (especially when you get into more advanced coding than HTML). For HTML I would certainly recommend tabs.

Here are some examples: