TLDR: watch the YouTube video instead
HTML, the backbone of the web, offers a plethora of features to enhance the development process. One such powerful yet often underutilized feature is HTML comments. Let’s explore the reasons why you should leverage HTML comments, the creative possibilities they offer, and how to use them effectively in your code.
Why Use HTML Comments?
-
Experimentation: HTML comments serve as an excellent tool for experimentation. By commenting out blocks of code, you can easily try different ideas or alternative solutions without deleting the original code. This allows for a seamless and efficient trial-and-error process.
-
Grouping Items: Comments in HTML can be used to organize your code and create logical groupings. By adding comments to your markup, you can easily navigate through complex structures and identify specific sections, making your code more readable and maintainable.
-
Fun and Creativity: Beyond their practical applications, HTML comments provide a canvas for artistic expression, humor, or Easter eggs within your code. Developers often include jokes, poems, or hidden surprises, adding a touch of amusement and personalization to their work. Let’s dive into some examples of funny comments that have amused programmers around the world:
<!-- I have no idea why this works, but it does. -->
<!-- Abandon all hope, ye who enter here. -->
<!-- When I wrote this, only God and I understood what I was doing. Now, only God knows. -->
<!-- Do not touch this code unless you're brave or completely insane. -->
How to Write Comments in HTML
Basic Syntax - Single Line
HTML comments follow a simple syntax, using <!-- to begin a comment and --> to end it. Here’s an example of a single-line comment:
<!-- This is a comment in HTML. -->
Content within HTML Comments
HTML comments can contain any text, characters, or even special characters like emojis. However, it’s important to note that comments should be used for annotations and not for critical information intended for users or browsers.
Multi-line Syntax
To create multi-line comments, you can simply continue the comment across multiple lines. Here’s an example:
<!-- This is a multi-line
comment in HTML.
It can span across
multiple lines. -->
You can learn more about HTML in the book “HTML and CSS: Design and Build Websites” by Jon Duckett.
Where You Can Put HTML Comments
HTML comments can be placed anywhere within your markup. They can be inserted between HTML tags, before or after lines of code, or even within the <head> section of your document. Comments won’t be rendered or affect the visual output of your webpage.
<!-- On the line before code -->
<div class="example">
<!-- Before code, same line --><p>Some content on the website.</p>
<p>Some content <!-- Comment inside content --> on the website.</p>
<p>Some content on the website.</p><!-- After code, same line -->
</div>
<!-- On the line after code -->
Where Not to Put Comments
While HTML comments are flexible, it’s important to avoid placing comments within self-closing tags like <img>, <input>, or <br>, as these tags do not support content and would break your HTML structure. You also cannot put them inside other tags or inside attributes.
<div <!-- Invalid comments inside a tag --> class="example">
<p>Some content on the website.</p>
<p>Some content on the website.</p>
<p class="example <!-- Invalid comments inside an attribute -->">Some content on the website.</p>
</div>
Conclusion
HTML comments are a valuable asset in web development, allowing for experimentation, organization, and even a touch of creativity. By using comments effectively, you can streamline your coding process, make your code more readable, and inject a bit of personality into your projects. So go ahead, unleash your imagination, and start leveraging the power of HTML comments in your web development endeavors.
