An HTML comment is a note that the browser skips. Start it with <!-- and end it with -->. Visitors do not see it on the page.
Why use comments
When you build a custom website, you may want notes that visitors do not see. An HTML comment does that. The browser skips it, but anyone who views your HTML code can read it.
Use comments to mark where you placed a javascript or PHP application. Use them to describe one area of the page, or to add a date stamp to a section.
Comments keep your code easy to read when you come back to it months later.
The comment syntax
To make a comment, type the following code.
<!-- Your comment or information -->Start with the opening marker and end with the closing marker. Everything between the two stays hidden on the page.
Comments that run over several lines
A comment can cover more than one line. Use this to describe a larger section.
<!--
Header area
Updated by the web team
Holds the logo and menu
-->
<header>...</header>The browser ignores every line between the markers. This keeps long notes tidy.
Switch off a block of code
You can also use comments to switch off code while you test. Wrap the block in the markers.
<!--
<div class="banner">
Spring sale details
</div>
-->The browser ignores the block. Remove the markers to turn it back on. Do not put a comment inside another comment, because the first closing marker ends both.
Comments in other languages
HTML comments only work in HTML. CSS uses a different marker. In a style sheet, write /* your note */. PHP uses // for one line, and /* */ for several.
A common mistake is to use the HTML marker inside a style sheet or script. It will not work there. Use the marker that matches the language of the file.
Good habits for comments
Mark the start and end of each major section. This helps you find the right place fast. For example, note where the header ends and the main content begins.
In WordPress, you can add comments to your theme files the same way. Remember that visitors can read them in the page source, so keep them professional.
If your page looks broken, a missing closing marker is the usual cause. The browser then hides everything after the comment starts. Check that every opening marker has a closing one.
A short example from a real page
Say your page has a contact form from a PHP script. Put a note above it that says where the form starts and which file handles it. A month later, you will know right away what that block does.
The same habit helps when a teammate opens your files. They can follow your work without asking you questions.
Keep private details out of comments
Do not put passwords or private notes in a comment. Anyone can open the page source and read it. Treat every comment as public.
Also keep your comments short and clear. A note like "menu starts here" is enough. Old comments that no longer match the code can confuse the next person.
Need a custom website? We build a new website with up to 5 pages plus a contact page for $300, in 3 to 5 days. Our Omaha web design team answers at 402-813-4034 any day from 7 am to 10 pm.
AboutRod and Tami Atwood
Rod and Tami Atwood and other Websnoogie contributors write the Websnoogie blog. Rod has built websites since 2004 and founded Websnoogie, LLC in Omaha in 2012. Tami is co-owner, content editor and billing expert. Call us at 402-813-4034 or write to staff@websnoogie.com.
