{"id":12478,"date":"2020-04-21T09:48:20","date_gmt":"2020-04-21T16:48:20","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=12478"},"modified":"2023-12-01T02:42:57","modified_gmt":"2023-12-01T10:42:57","slug":"html-comments","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-comments\/","title":{"rendered":"How to Write HTML Comments"},"content":{"rendered":"\n<p><em>To write HTML comments put <\/em><code><em>&lt;!---<\/em><\/code><em> and <\/em><code><em>---&gt;<\/em><\/code><em> at either end of the comment. HTML comments are notes to keep HTML code organized and are ignored by the browser.<\/em> <\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<p>One of the most important aspects of documenting software is writing comments on your code. Comments are lines that exist in computer programs that are ignored by interpreters and compilers, and are intended to be read by humans.<\/p>\n\n\n\n<p>Writing comments allows you to make your code more readable and explain what specific parts of a program are doing. For example, if you\u2019re writing a long program, you may use comments to keep track of certain functions or lines of code.<\/p>\n\n\n\n<p>In this tutorial, we are going to explore how to write comments in HTML. We\u2019ll start by looking at why comments are used in programming. Then, we\u2019ll look at the two main types of comments: single-line and multi-line comments.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why Do Developers Write Comments?<\/h2>\n\n\n\n<p>In HTML, comments are ignored by the browser and are removed when code is compiled and minified. So, why do we write comments?<\/p>\n\n\n\n<p>Comments are written for humans to read and assist in making code easier to understand. When you\u2019re working on a project alone, it\u2019s easy to skip over comments because you are the only person reading your code. However, if you are working on a big project that includes complex code, then you may easily lose track of the purpose of your code.<\/p>\n\n\n\n<p>In addition, if you\u2019re working on a team, other people may not understand the code you have written. If this becomes the case, people may have to follow up with you to find out the purpose of specific code or may skip over a line of code without understanding what it means and how it works.<\/p>\n\n\n\n<p>Comments afford a number of benefits to developers. Firstly, as we discussed, comments make your code easier to understand. If you write comments on your code, both you and other people who read your code will find it easier to keep track of what is going on at certain points in the code.<\/p>\n\n\n\n<p>Secondly, comments allow developers to explain their reasoning behind making decisions about a program. This can be helpful both if a program stops working and requires a bug fix, or when a developer needs additional clarity on why a certain approach was used to solve a problem. Comments can also help speed up the development process because it is easier for you to understand your code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">HTML Comment<\/h2>\n\n\n\n<p>Comments in HTML documents are enclosed within special arrows and are separate from the rest of the program. Comments are not displayed by the browser. Here is the syntax for a basic HTML comment tag:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!--- This is a comment ---&gt;<\/pre><\/div>\n\n\n\n<p>When our web page is opened, this code will not appear on our web page. Instead, the code will appear in our source code for us to read.<\/p>\n\n\n\n<p>The above example is a single line comment, which means its text will only appear on one line. This type of comment is useful if your comment will be short. However, if you intend on writing a long comment, you need to use a multi-line comment.<\/p>\n\n\n\n<p>The syntax for multi-line comments is the same as single-line comments, with the only difference being that the comment closes on a new line. Here\u2019s the syntax for a multi-line comment tag:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;!---\nThis is a multi-line comment\nthat appears on multiple lines\nbecause it is long.\n---&gt;<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Using HTML Comments<\/h2>\n\n\n\n<p>Now that you know how to write comments in HTML, you may be wondering: when should I add comments to my code? While there are no strict guidelines around when comments should be used\u2014and every developer and team has their own preferences\u2014there are a few points you should keep in mind.<\/p>\n\n\n\n<p>Comments should generally be used:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To describe the intended outcome of code.<\/li>\n\n\n\n<li>To explain why code has been written.<\/li>\n\n\n\n<li>To clarify a complex line or lines of code.<\/li>\n<\/ul>\n\n\n\n<p>Of course, there are other situations when you may want to add comments on your code, but those are the most common.<\/p>\n\n\n\n<p>In addition, you may also want to use HTML comments to comment HTML tag blocks out. This allows you to keep a line of code within your program but instruct the browser to ignore it when the HTML web page is rendered.<\/p>\n\n\n\n<p>Commenting code out of your program is common during debugging. This is because, during debugging, you need to find the cause of a problem and implement a solution, and it can be helpful to tell a program to ignore code without removing the code completely from your program. Here\u2019s an example of using HTML comments to comment out code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;div&gt;\n&lt;p&gt;This is an example paragraph.&lt;\/p&gt;\n&lt;!---\n\t&lt;p&gt;This is another example paragraph.&lt;\/p&gt;\n---&gt;\n&lt;\/div&gt;<\/pre><\/div>\n\n\n\n<p>When our browser renders this code, the second paragraph will be ignored because it is enclosed within comments.<\/p>\n\n\n\n<p>HTML comments, while useful, should only be used when they will add value to the program. It\u2019s not necessary to add comments to explain every function within a program, or to explain topics in significant depth. Here are a few tips you should keep in mind when writing HTML comments:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Don\u2019t restate existing code. Comments are for explaining your intent or the logic of a program. You should not use comments to state in English what is already written in code.<\/li>\n\n\n\n<li>Don\u2019t write verbose comments. Developers are often tempted to write long comments to explain complex procedures. However, while long comments are sometimes useful, you should use them sparingly. Instead, if there is a function you need to explain in-depth, you may want to create a documentation entry.<\/li>\n\n\n\n<li>Don\u2019t explain everything. Comments are used to clarify a program, and having too many can distract from the core code. If something is obvious, a comment is not needed.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Using HTML comments helps make your programs more readable for both yourself and other people who may read your code. Writing comments throughout your code can make it easier for others to understand the intent behind your code.<\/p>\n\n\n\n<p>In this tutorial, we explored the basics of comments and how to create a comment in HTML. We also discussed why comments are useful and analyzed a few best practices for writing effective comments. That said, every developer has their own commenting style, and as you write more comments you\u2019ll find that you adopt your own.<\/p>\n\n\n\n<p>Now you know how to write comments in HTML like an expert!<\/p>\n","protected":false},"excerpt":{"rendered":"To write HTML comments put &lt;!--- and ---&gt; at either end of the comment. HTML comments are notes to keep HTML code organized and are ignored by the browser. One of the most important aspects of documenting software is writing comments on your code. Comments are lines that exist in computer programs that are ignored&hellip;","protected":false},"author":240,"featured_media":12596,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-12478","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"HTML","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Write HTML Comments: A Step-By-Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"Comments allow developers to document their code in-line and explain their programs in depth. Learn how to write effective comments in HTML on Career Karma.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/html-comments\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Write HTML Comments\" \/>\n<meta property=\"og:description\" content=\"Comments allow developers to document their code in-line and explain their programs in depth. Learn how to write effective comments in HTML on Career Karma.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/html-comments\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-21T16:48:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:42:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"How to Write HTML Comments\",\"datePublished\":\"2020-04-21T16:48:20+00:00\",\"dateModified\":\"2023-12-01T10:42:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/\"},\"wordCount\":1061,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-comments\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/html-comments\/\",\"name\":\"How to Write HTML Comments: A Step-By-Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg\",\"datePublished\":\"2020-04-21T16:48:20+00:00\",\"dateModified\":\"2023-12-01T10:42:57+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"Comments allow developers to document their code in-line and explain their programs in depth. Learn how to write effective comments in HTML on Career Karma.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/html-comments\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg\",\"width\":1200,\"height\":675,\"caption\":\"HTML comments\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/html-comments\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/careerkarma.com\/blog\/html\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Write HTML Comments\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Write HTML Comments: A Step-By-Step Guide | Career Karma","description":"Comments allow developers to document their code in-line and explain their programs in depth. Learn how to write effective comments in HTML on Career Karma.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/html-comments\/","og_locale":"en_US","og_type":"article","og_title":"How to Write HTML Comments","og_description":"Comments allow developers to document their code in-line and explain their programs in depth. Learn how to write effective comments in HTML on Career Karma.","og_url":"https:\/\/careerkarma.com\/blog\/html-comments\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-21T16:48:20+00:00","article_modified_time":"2023-12-01T10:42:57+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/html-comments\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/html-comments\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"How to Write HTML Comments","datePublished":"2020-04-21T16:48:20+00:00","dateModified":"2023-12-01T10:42:57+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-comments\/"},"wordCount":1061,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/html-comments\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/html-comments\/","url":"https:\/\/careerkarma.com\/blog\/html-comments\/","name":"How to Write HTML Comments: A Step-By-Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg","datePublished":"2020-04-21T16:48:20+00:00","dateModified":"2023-12-01T10:42:57+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"Comments allow developers to document their code in-line and explain their programs in depth. Learn how to write effective comments in HTML on Career Karma.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/html-comments\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/html-comments\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/html-comments\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/02\/html-comments.jpg","width":1200,"height":675,"caption":"HTML comments"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/html-comments\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/careerkarma.com\/blog\/html\/"},{"@type":"ListItem","position":3,"name":"How to Write HTML Comments"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/12478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=12478"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/12478\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/12596"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=12478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=12478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=12478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}