Comments in HTML

Using comments in the HTML document will not be visible in the user’s browser. It can be useful for revision histories, notes, or commenting out other tags.

Basic Example

<!-- This is an HTML comment-->

Purpose of Using Comments

It is good practice to use comments in your code as you can pick up on things in a few months to do updates and forget why you originally done it that way. It is also useful if you are working in a team, it will make it much easier to understand.

When using comments although it is not visible in the browser window it can be viewed by anyone in the source code.

Commenting out code

<!--
  <p>This is a commented out paragraph. Etiam porto sem mal-usada magna mollis euismod. Maecenas sed diam eget risus    varius blandit sit amet non magna. Curabitur blanket tempus porttutor.</p>
-->

Comments can also be used to “comment out” code that is inside the comment. This is ideal if you are experimenting but do not want to delete the code. Again for best practice remove commented out code before going live.

Further Example

<!--Start of the article-->
<article>
<!--Introduction-->
<h1>Article title</h1>
<h2>Sub title of the article</h2>
<!--End of Introduction-->
<!--Start of the main content-->
<p>Curabitur blanket tempus porttutor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. Integer poser erat a ante venenatis dapibus postere veilt aliquet.</p>

<!--<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Sed posuere connecteur est at lobortis.</p>-->

<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo rises, porta ac consectetur ac, vestibule at eros.</p>
<!--End of the main content-->

Written by Michael Gearon

Michael Gearon is a UX Designer at BrandContent. Specialising in voice assistants and CRO, I have a wealth of experience in UX, UI and website design. Based in Cardiff, South Wales Mike can help local businesses with their online presence.