HTML Comments: Adding Comments within your Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="html comments, how to write comments in HTML, multiline, commenting, coment, coments, comment, code, codes, tutorial, free"> <meta name="Description" content="Explains how to write comments in HTML. HTML comments help explain the code and are not visible to your website visitors."> <link rel="canonical" href="https://www.quackit.com/html/tutorial/html_comments.cfm"> <title>HTML Comments: Adding Comments within your Code</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">HTML Comments: Adding Comments within your Code</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/html/tutorial/html_meta_tags.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Meta Tags</a></li> <li><a href="/html/tutorial/html_forms.cfm">HTML Forms <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">HTML comments help explain the code and are not visible to your website visitors.</p> <p>Any HTML document can contain comments. Although comments are optional, they can be very useful.</p> <p>Now, I'm not talking about the comments section at the bottom of an article, where readers can post their comments. I'm referring to comments within the code.</p> <h2>What is an HTML Comment?</h2> <p>An HTML comment is a part of the HTML code and it is used to explain the code. This can be helpful for other HTML coders when trying to interpret someone elses code. It can also be useful for yourself if you have to revisit your code in many months, or even years time. Comments aren't displayed in the browser — they are simply there for the programmer's benefit.</p> <p>Comments can be used to introduce major sections of the code, or they can be used to explain what a small section of code does. They are also often used at the top of a document to explain things like, author, date first created, purpose of the file, provide info about related files, and more. </p> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h2>How to write Comments</h2> <p>You write comments like this:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <script src="/common/js/codemirror/mode/xml/xml.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"></textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Comments always start with <code></code>. This tells the browser when a comment begins and ends.</p> <p>Example HTML Code:</p> <script src="/common/js/codemirror/mode/htmlmixed/htmlmixed.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">

<img src="/pix/smile.gif" style="max-width:100%" alt="Smile">

</textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/html/tutorial/html_comments_basic_example" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "htmlmixed", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>As you can see, the comments are invisible to the user viewing the page in the browser. It is there, simply for the HTML coder's benefit.</p> <p>Multiline comments (i.e. comments that span across multiple lines), use the same syntax as single line comments. You begin the comment with <code></code>. Whether the comment spans one line or ten, you still use the same opening and closing tags.</p> <p>Well, we have now finished the first part of this tutorial. We have covered a lot, and by now, you have learned enough to build a website.</p> <p>Now we'll move on to more specific content items such as tables, iframes, image maps, and <a href="/html/tutorial/html_forms.cfm">forms</a>.</p> <ul class="pager"> <li><a href="/html/tutorial/html_meta_tags.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> Meta Tags</a></li> <li><a href="/html/tutorial/html_forms.cfm">HTML Forms <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/html/tutorial/">HTML Tutorial</a></h3> <ul> <li><a href="/html/tutorial/introduction.cfm">Introduction to HTML</a></li> <li><a href="/html/tutorial/getting_started.cfm">Getting Started</a></li> <li><a href="/html/tutorial/html_elements.cfm">HTML Elements</a></li> <li><a href="/html/tutorial/html_formatting.cfm">HTML Formatting & Semantics</a></li> <li><a href="/html/tutorial/html_attributes.cfm">HTML Attributes</a></li> <li><a href="/html/tutorial/html_styles.cfm">HTML Styles</a></li> <li><a href="/html/tutorial/html_colors.cfm">HTML Colors</a></li> <li><a href="/html/tutorial/html_links.cfm">HTML Links</a></li> <li><a href="/html/tutorial/html_images.cfm">HTML Images</a></li> <li><a href="/html/tutorial/html_meta_tags.cfm">HTML Meta Tags</a></li> <li><a href="/html/tutorial/html_comments.cfm">HTML Comments</a></li> <li><a href="/html/tutorial/html_forms.cfm">HTML Forms</a></li> <li><a href="/html/tutorial/html_tables.cfm">HTML Tables</a></li> <li><a href="/html/tutorial/html_image_maps.cfm">HTML Image Maps</a></li> <li><a href="/html/tutorial/html_iframes.cfm">HTML iFrames</a></li> <li><a href="/html/tutorial/html_entities.cfm">HTML Entities</a></li> <li><a href="/html/tutorial/html_layouts.cfm">HTML Layouts</a></li> <li><a href="/html/tutorial/html_scripts.cfm">HTML Scripts</a></li> <li><a href="/html/tutorial/html_website_templates.cfm">HTML Website Templates</a></li> <li><a href="/html/tutorial/website_hosting.cfm">Website Hosting</a></li> <li><a href="/html/tutorial/summary.cfm">Summary</a></li> </ul> </li> <li> <h3><a href="/html/">HTML Reference</a></h3> <ul> <li><a href="/html/tags/" title="Alphabetical list of all HTML tags">HTML Tags</a></li> <li><a href="/html/codes/" title="">HTML Codes</a></li> <li><a href="/html/templates/" title="">HTML Templates</a></li> <li><a href="/html/html_editors/">HTML Editors</a></li> <li><a href="/html/tutorial/" title="">HTML Tutorial</a></li> <li><a href="/create-a-website/" title="">Create a Website</a></li> <li><a href="/character_sets/">Character Set Reference</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

HTML Comments: Adding Comments within your Code