HTML comments
HTML comments is helpful because you can document your HTML code.
Contents
Why should you comment your HTML code
How to write HTML comments properly
How to write comments in HTML
How to write comments in HTML
Writing comments in HTML is extremely simple. Here is an example of a comment in HTML:
<!-- This is an HTML comment -->
One way to indicate in your code editor that you're looking at a comment is to look at what color the text is. Comments are always this greyish color.
The other thing to note here is how to actually start an HTML comment.
HTML comments always start with a less than, follow by an exclamation mark, follow by a dash dash (<!--).
In HTML, you also have to close your HTML comments. To close an HTML comment block you must write dash, dash, and a greater than sign (-->).
Everything between <!-- and --> is going to be considered an HTML comment, and will not be displayed in the browser.
How to write HTML comments properly
HTML comments should not be complicated pieces of code. They follow a very easy guideline, which makes it for anyone and future you to read and understand.
Single line comments
99% of the time, your HTML comments are 1 liners. So keep it simple:
<!-- START header nav -->
<header id="nav">
</header>
Also, always add a space after the second dash for readability.
Multiple line comments
In my 7+ years of web development, I've never had to write a multiple line comment. But if you have than try this pattern.
<!--
This is a really really
long HTML comment :(
-->
<header id="nav">
</header>
Notice how I start the text of the comment on a new line. This allows for readability for any developer.
Please avoid doing this with multiple line HTML comments:
<!-- This is a really really
long and poort written HTML comment :(
-->
<!-- OR -->
<!--
Why would anyone do
this type of HTML comment :( -->
Reading those types of HTML comments will hurt anyones head.
Consistent pattern is key
An HTML document is nothing more but the skeletal structure of a web page. That means that it's going to have a lot of HTML code.
And following a HTML comment pattern will make you look like a hero when someone is trying to decipher a 300+ line HTML file.
Here's how I like to write my HTML comments.
<!-- START header nav -->
<header>
<a href="/">Logo</a>
<span class="mobile-hamburger">mobile menu</span>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</header>
<!-- END header nav -->
HTML code can get bloated really quickly. What I like to do is write a comment from where a HTML component starts and ends.
This lets any developer and future you, digest where the header starts and ends without struggling.
The text START and END are always in the comment.
You don't have to do this for every component in the HTML file. Just the high level areas or if a component has too much nested HTML.
Here's another example to show you how proper HTML comment pattern may help you read HTML much easier.
<html>
<body>
<!-- START header nav -->
<header>
<a href="/">Logo</a>
<span class="mobile-hamburger">mobile menu</span>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</header>
<!-- END header nav -->
<!-- START Hero -->
<div id="hero">
... hero html stuff
</div>
<!-- START Hero -->
<!-- START footer -->
<footer id="footer">
... footer html stuff
</footer>
<!-- START footer -->
</body>
</html>
Why should you comment your HTML code
HTML can get ugly really quickly and very difficult to read. By writing proper, and digestable HTML comments you can save yourself and other developers a lot of time.