08. Formatting and Comments

Introduction

This lesson covers how to write HTML in an easy-to-read way. That way, when you come back to your code in the future, it’s a lot easier to remember where all of the different elements are.

Learning Outcomes

By the end of this lesson, you should be able to:

  • Properly format an HTML document
  • Create and use HTML comments

Formatting

By now, you’ve probably noticed that HTML is written a certain way. I’m mainly referring to how the tags are indented. Let’s return to the example from the previous lesson about nesting lists.

Here is an example of that same code, formatted poorly:

<ol> <li>Item one</li><ul><li>Subitem one</li><li>Subitem two</li></ul> <li>Item two</li><ul><li>Subitem one</li><li>Subitem two</li> </ul><li>Item three</li> <ul><li>Subitem one</li><li>Subitem two</li></ul></ol>
Code language: HTML, XML (xml)

We can tell by the tags that it’s a list, and this code will work – but it is a headache to look at and could result in us accidentally missing a closing tag, or something similar.

Here is the same code formatted correctly:

<ol> <li>Item one</li> <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> <li>Item two</li> <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> <li>Item three</li> <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> </ol>
Code language: HTML, XML (xml)

This looks way easier to read. Since the sublists are indented in the code, we can clearly see where those items will be.

Every time you write a new tag before the previous tag closes, you should insert a line break (by pressing Enter) and either pressing tab or using a couple of spaces to indent the next opening tag.

Comments

You can and should use comments in your HTML to help you keep track of things. An HTML comment is just some text included in your code that is only available when viewing the source code. This means whatever text you write won’t be public on your website. It’s not totally private though – anyone viewing your website can inspect your code, so be sure not to go too wild with it.

An HTML comments looks like:

<!-- This is a comment -->
Code language: HTML, XML (xml)

The next in between the <!– and the –> lines is the comment!

A comment can be placed anywhere in your code.

Here is an example utilizing comments with our sublist code:

<ol> <!-- Opening list tag --> <li>Item one</li> <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> <li>Item two</li> <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> <li>Item three</li> <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> </ol> <!-- Closing list tag -->
Code language: HTML, XML (xml)

Comments aren’t necessary but they help us to continue to maintain our code.



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.