Spacing and breaks

The amount of space you use for your HTML code can really affect how quickly and easily you understand your code. When your HTML document is long because it contains many tags, it becomes necessary to use space and breaks to identify where a tag begins and ends. Without the use of right amount of space in your code, it becomes difficult to manage HTML code because it is difficult to follow. You may, for example, close some tags when they are already closed and you may not be aware of this because the tags are hidden somewhere in your text.

Conversely, if you use space more than needed, then, you may have to scroll more to follow your code. Although there are no hard rules about how much space you can and cannot use, the following identifies areas of HTML code for proper amount of spacing:

  1. breaks between tags
  2. spacing between tags
  3. spacing inside the brackets

Breaks between tags

The first place where you can add breaks is to the following basic tags: <html>, <head>, <title> </title>, </head> <body>, </body> and </html>. The following shows an example of breaks between these basic and other tags:

Breaks between tags
Breaks between tags

Note above each tag is on its own line. (This does not mean that each tag should be placed on its own line. If, for instance, your tag affects only a few words (i.e., link or bold text) within a paragraph, you may not need to break the line at each individual tags.) Simply use the RETURN or ENTER key to add breaks between tags.

Spacing between tags

In addition to adding breaks, you can also add space (or tabs) to enhance the understanding of your code. Because the <html> tag is the root tag of an HTML document, you may not need to use any extra spacing for this tag. All other tags, however, inside of this root tag should be indented:

Spacing between tags
Spacing between tags

As indicated above, the <head>, and <body> tags and their corresponding closing tags are indented once. The inner tags (<title>, <h6>, and <p>) inside these main tags are indented twice.

Spacing inside the brackets

Lastly, you can add space inside the angle brackets of a tag to enhance the understanding of your code. You can add space inside the angle brackets when you use attributes:

Spacing inside the brackets
Spacing inside the brackets

As the image above shows, the first attribute is separated from the tag by one space. Similarly, subsequent attributes are separated by one space.