• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / HTML / HTML Comments

HTML Comments

15 June 2009 / Leave a Comment

Like many programming languages, HTML lets you embed comments within your Web pages. A comment is a piece of text intended just for people to read; Web browsers ignore any HTML comments embedded in a page.

How to write HTML comments

You insert an HTML comment like this:


<!-- This is an HTML comment -->

You can also spread comments over many lines, like this:


<!--
  Here's a really, really
  long HTML comment over
  several lines.
-->

Generally you can put any text you like in an HTML comment. However, for compatibility reasons, never place -- (2 hyphens together) anywhere within the comment text itself.

You cannot nest HTML comments — that is, you can’t place one HTML comment inside another.

When to use HTML comments

HTML comments are a great way to make your markup more readable — both for yourself and for other coders. However, don’t put too many HTML comments in a page, since each comment adds to the page size (and therefore its download time).

You can use a comment to clarify the purpose a complex piece of code. For example:


<!-- Navigation area: Highlight a menu item with the "hi" class -->

<div id="nav">
  <ul>
    <li><a href="/">Home</a></li>
    <li class="hi"><a href="/about/">About</a></li>
  </ul>
</div>

Comments are also useful for those times when you need to add an unusual piece of markup:


<!-- 99.9% width works around an IE6 rounding bug -->
<div style="width: 99.9%">

You can also use HTML comments to “comment out” a section of markup temporarily. This causes the browser to skip that section of HTML — handy for testing and debugging your page in different browsers:


<!--
<img src="images/pic.jpg" alt="Pic" />
-->

However, if you want to disable a section of markup on a more permanent basis it’s better to remove it from the page entirely. Also, remember that you can’t nest HTML comments, so you can’t comment out a section of HTML that itself contains comments.

HTML comments and JavaScript

In the “olden days” (i.e. the late 1990s), some browsers couldn’t recognize JavaScript code in Web pages. It was therefore necessary to “hide” JavaScript from these browsers by using HTML comments:


<script>
<!--
... (JavaScript code here) ...
// -->
</script>

These days there’s no need to comment JavaScript like this — in fact it can cause more problems than it solves. Instead, simply write:


<script type="text/javascript">
... (JavaScript code here) ...
</script>

You now know how to create HTML comments, and you’ve looked at when (and when not) to place comments in your HTML pages. Happy coding!

Filed Under: HTML Tagged With: comment out, comment tags, commenting out, hiding, html comment, html comments, javascript, nesting html comments

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits