Sometimes you just feel like you need to make notes when coding. Especially if you’re learning web development for the first time. And once your .html and .css get larger and larger, sometimes you just need to explain what you’re doing within your code.

Thankfully, this is doable in both HTML and CSS with comments.

HTML Comments | CSS Comments | A Warning

HTML Comments

Leaving yourself notes within HTML is really easy with a simple pair of ‘unusual’ tags. They look like this:

<!--   This text appears in the code    But won't be displayed on the   page in the browser.-->

So, in terms of the page displayed in a browser, this text won’t appear to the user. However as most browsers have a View Source function, people could see what you have written. More on that in a bit.

But always type the opening and closing tags before putting the text between them. If you leave a comment open and don’t close it, all the page below it will remain hidden!

Why Else Might You Use Comments?

To Hide Page Elements
Sometimes you can start some code, but not have time to finish it. Or you want to put an image into your HTML but want to show it until later. You can use comments to hide other things on the page. Like so:

<!--  <img src="/images/new-image.png" width="400" height="300" alt="Image I want to Show Later">-->

This applies to anything. You might have a big announcement for tomorrow but want to do the hard work today. Put your announcement between HTML Comments today – and remove them tomorrow. Simple as!

To Help Team Members
If you share your web project with other people, or maybe you start the project and need to pass it to someone else, then comments can be very useful. You can use comments to explain your thoughts and ideas to other people. Very handy and saves you having to remember everything!

CSS Comments

If your CSS file is getting long, it can be helpful to break up your stylesheets into logical groupings: headers, general layout, sidebars, footers. Whatever structure makes sense to you, then run with that.

To help break up your section, you can use CSS Comments. As with HTML Comments, they are contained between two ‘tags’. They aren’t tags in the sense of HTML <tags> but it is important to notice that you need both parts.

/*  Place this between STYLE tags  or inside your .css file.*/

The same warning applies to CSS Comments as their HTML Counterparts – always close them!

A Warning about CSS and HTML Comments

Always be careful what you place in your comments. Because web pages’ HTML source can be viewed and .css files can be downloaded for reference – never place anything in comments that might be sensitive:

• Usernames / Passwords
• Hosting and FTP Details
• Any other personally identifiable information
• Secret or Surprise Developments, Company Secrets etc

Pro Tip: if you don’t want other people to know the information, don’t place it in comments tags.

TL;DR Comments in HTML and CSS

Use them – a lot if you need to. Use them to help you make sense of your code. But please be careful what you put in the comments in case someone reads something you don’t want them to.

And speaking of comments, if you want to leave any feel free to use the panel below!

Spread the Word