Overview
Developers often leave comments in their code. Comments are used to provide information to other developers and/or your future self regarding a web page or a particular section of code. Developers also use comment tags to remove elements from the screen without actually deleting the code. This can be very useful for testing and debugging purposes. In this lesson you will learn how to add comments to your HTML code using the <!-- comment tags -->.
Comment Tags
The opening comment tag <!-- has a less than symbol, followed by an exclamation mark, followed by two dashes. The closing tag --> has two dashes followed by a greater than symbol. Anything between the opening and closing tags is part of the comment and will not be displayed on the screen. Check out the comment in the code below.
<!DOCTYPE html>
<html>
<head></head>
<body>
<!-- This is a comment -->
<h1>Hello World!</h1>
</body>
</html>
The HTML code above will result in a page that displays “Hello World!” on the screen. If you inspect the source code in the browser, you will see that the comment is present. It is not completely ignored by the browser, but it is never displayed on the screen.
Note: Never put any sensitive data in a comment. It will be viewable by anyone who has access to the web page and knows how to inspect the source code.
Click here to learn more about how to inspect the source code in the browser.
Multi-line Comments
The example above shows a single line comment, but the tags can be used to wrap multiple lines of code. Anything between the tags will be treated as a comment and will not appear on the screen. In the following example three lines of code are commented out and replaced with two new lines.
Summary
Comment tags offer a way for developers to make notes within the code. They also provide a way to temporarily remove elements from the screen without deleting lines of code.