How to add comments in HTML
problem
In HTML we can comment out our code by using the comments tags. In this post we will see an example of how to add comments.
SOLUTION
Similar to other tags in HTML that have opening and closing tags; the comments are enclosed between the following symbols:
<!-- this is a singe line comment -->
The comments are used by the coder for the coder. Usually to document the code. The coder might be another person that wants to read and understand our code. Any code enclosed by the <!– and –> is being ignored by the web browser, i.e. it skips it, doesn’t render it.
For example, sometimes we might want to comment out a piece of HTML code for testing purposes. In this case, it will be skipped and nothing will be shown to the user interface.
E.g. if we have a user input element but put it in comments as follows:
<!DOCTYPE html>
<!-- this is a comment -->
<body>
<h1>Comments example</h1>
<!--
<input type="text"/>
-->
</body>
</html>
output
We can see the header (h1) but not the text box as it is commented out.
If we un-comment the code of the text field:
<!DOCTYPE html>
<!-- this is a comment -->
<body>
<h1>Comments example</h1>
<input type="text"/>
</body>
</html>
output
As expected, the input tag code is rendered and shown.
Multiline - subheading
For example:
<!DOCTYPE html>
<body>
<!-- this is a multiline comment
<h1>Comments example</h1>
<input type="text"/>
-->
</body>
</html>
output
Nothing is shown
view page source
conclusion
In this post we saw how to make use of commenting in HTML. A useful technique for coders and not limited to HTML.
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪