HTML Comments are used to make code programs more readable, appealing, and understandable. These comments are non-executable parts of a program which is used as an explaining element. It is important to be familiar with using comments in HTML to become a good web developer.
You can add an explainer and notes using HTML comment in the program. In this article, we will learn more about HTML Comments, debugging HTML, and its uses in web development.
HTML Comments Overview
HTML comment is used to add comments in web development programs. HTML comment types can be in various forms such as single-line comments, multi-line comments, conditional comments, and more. HTML comment Syntax is much simpler to understand and use in the HTML documents.
Anything enclosed within the HTML tag will be taken as a comment and will not be parsed or executed by the browser. Let us check the syntax of the HTML comments below.
| <!– This is a comment line and will not be parsed during the execution of the webpage or loading. – – ><p> Start your Learning journey at PW Skills. </p> |
In the above example, you can see that anything enclosed within this <!— ….. – – > won’t appear on the screen of the web page during loading. These commands generally include something important like notes, warnings, updates, reminders, or code explanations inside.
Why are we using HTML Comments?
HTML comments are helpful in maintaining our code readability and make it understandable for whoever comes to read past us. Like most often HTML comments are used to take notes and explain a particular tag, syntax, or something that is a little bit more complex or different than usual.
It also acts as a guide to the program flow and adds explainers to help developers understand the code better. We can use HTML comment as a reminder, tracker, or for documentation purpose in our HTML document.
Types of HTML Comments In Web Development
Let us understand the types of HTML comment we can use in documents.
1. Single Line HTML Comment
The Single line comments in HTML can easily be integrated with the help of basic comment syntax. In this type of comment, only one liner statements are enclosed inside.
It can be enclosed with the help of <!- -HTML comment- – > tag easily. Let us take a simple example of HTML comments for single line statements.
| <!– This is a single-line comment – – >
<p>This paragraph is visible.</p> |
After rendering, the web page only displays the content enclosed within the <p> tag i,e. “This paragraph is visible,” and skips the sentence enclosed within the comment tag.
2. Multiline HTML Comment
The multiline HTML comments are used to enclose multiple lines within the comment tag element.
| <!–
This is a multi-line comment. It can span multiple lines. It is useful for explaining complex sections of code. –> <p>This paragraph is also visible.</p> |
After the page loads, the elements enclosed within the HTML multiline tags will not be executed.
3. Commenting Code
We can also comment a code out using the HTML comments especially when we do not want to load a specific part of the code on the webpage but might keep it for later use.
| <!– <p>This paragraph is hidden because it is inside a comment.</p> –>
<p>This paragraph is visible.</p> |
How to Comment in HTML Shortcut?
HTML comments can directly be added with a shortcut keyboard easily without manually typing the syntax every time for using the comment in the program.
| “Ctrl + / ” in Windows
“Command + / ” for Mac Users |
Complete Examples for HTML Comment
Let us see the examples for adding Comments in the HTML document below.
| <!DOCTYPE html>
<html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>HTML Comments Example</title> </head> <body> <!– This is a single-line comment –> <h1>Welcome to My Website</h1> <!– This is a multi-line comment. It can be used to describe a section of the webpage. Comments do not appear in the browser. –> <p>This is a paragraph explaining something.</p> <!– Hiding an element using a comment –> <!– <p>This paragraph is hidden and will not be displayed.</p> –> <p>Another visible paragraph.</p> </body> </html> |
Benefits of Using HTML Comments In Web Development
Check some of the benefits of using HTML comments in web development.
- The code readability is improved with the use of HTML comments. It adds a good explanation for a complex code and makes it easier for readers to understand.
- With proper HTML comments, debugging and testing a code becomes easier.
- It is useful for developers to keep reminders or notes in the code for future updates.
- It can also be used to hide a specific part of the code from rendering on the web page.
- It helps multiple web developers to work on the same codebase with clear explanations for each section.
Learn Complete Web Development With PW Skills
Learn HTML, CSS, and other popular frameworks in the PW Skills Full Stack Web Development Course. Get in-depth tutorials for every framework in web development and strengthen in real world projects. Become skilled in web programming, front end, and backend.
Get tutored through dedicated mentors, 24×7 doubt support, and more. Practice through exercises, assignments, and projects.
HTML Comments FAQs
Q1. What are HTML Comments?
Ans: HTML comments are used to add comments in web development programs. HTML comment types can be in various forms such as single line comments, multi-line comments, conditional comments, and more.
Q2. What are the different types of HTML Comments?
Ans: There are two different types of HTML comments such as single-line comments and multiline comments.
Q3. Why are HTML Comments not displayed in the browser?
Ans: HTML comments are not displayed in the web browser because it is only used to add notes, documentation, and explanations of a particular code in the HTML document.
Q4. Do HTML Comments show up in a browser?
Ans: HTML codes are not used while loading web pages and are not displayed in the output of the webpage. However, you can view the HTML Comment part in the source code of the project.
