Following up on my previous article about why you should add comments to your code, this article will explain how to add comments to four of the most important languages for web designers.
HTML
HTML is the most basic markup language that every web developer needs to know, but complex pages may contain thousands of lines. Without some clear instruction, it can be easy to get lost in a sea of divs. Adding comments can visually help someone unfamiliar with the markup to know where certain sections begin and end. Comments can also be used to make certain blocks inactive that aren’t quite ready for primetime.
Like most HTML markup, comments have a beginning and an end. Comments open with <!– and end with –>. For example, a comment like <!– Top navigation menu –> would let someone viewing the code know that the next few lines apply to the navigation bar, while something like this would indicate a section that has been commented out:
CSS
Comments in CSS are especially helpful to show what various lines of code are doing.
In this example, the first comment explains that a media query is being used to detect large screens. The second comment explains that the hamburger menu icon has intentionally been hidden when the page is viewed on a large screen.
To add comments to CSS, open the comment with /* and close the comment with */. Comments can be added anywhere in CSS, even in the middle of a line of code if that is somehow helpful.
JavaScript
There are two ways to create JavaScript comments, single-line or multi-line.
A single-line comment starts with two forward slashes: //. A single-line comment does not have to be closed.
Here a comment is added to explain why this function is necessary.
If multiple lines are needed for particularly long comments, or to comment out several lines of code, open the comment with /* and close the comment with */.
PHP
There are three ways to add comments in PHP. Similar to JavaScript, using two forward slashes will start a single-line comment. However, a hashtag can also be used to create a single-line comment.
To create a multi-line comment, open with /** and close the comment with */.
Like in the other examples, using multi-line comments in PHP are good for documentation or to comment out several lines of code.
Hopefully this helps you understand how to add comments to some fundamental languages of web development. For more extensive examples of how to add comments, or to learn how to add comments in other languages like MYSQL or C++, check out W3 schools. Under each language they have a dedicated tutorial page that shows how to apply comments with examples and areas to edit the code.
