Skip to main content
Practice

Comments

HTML comments are used to write notes or explanations that are not displayed on the web page.

Like taking notes in the margins of a book or putting sticky notes on important parts, it is helpful for developers or web designers to add explanations to specific parts of the code.


Basic Structure​

HTML comments start with <!-- and end with -->. Anything between these tags will not be displayed on the web page.

Basic Structure of HTML Comments
<!-- This line is a comment. It will not be displayed on the web page -->
<p>This sentence will be displayed on the web page.</p>

Examples of Using Comments​

  1. Code Explanation: You can add explanations to complex code or sections that might be modified later.

  2. Code Deactivation: If you want to temporarily disable a part of the code, you can wrap it with comments. This way, that part of the code will not be displayed on the web page.

Deactivating Code with Comments
<!-- The image below is temporarily disabled.
<img src="example.jpg" alt="Example Image">
-->
  1. Separation: You can also use comments to separate different sections of a web page.

For example, using comments to divide the website into sections like:

  • Header: Displays the logo, main menu (navigation), search box, etc., at the top of the webpage.

  • Main Content: Displays the key content of the website.

  • Footer: Displays site information (social media links, copyright notice, etc.) at the bottom of the webpage.

Separating Sections with Comments
<!-- Header Start -->
<header>...</header>
<!-- Header End -->

<!-- Main Content Start -->
<main>...</main>
<!-- Main Content End -->

<!-- Footer Start -->
<footer>...</footer>
<!-- Footer End -->

In this way, HTML comments improve code readability and facilitate collaboration with other developers.

Additionally, they allow you to easily convey why a particular part of the code was written that way or what changes might be necessary.


Practice​

Follow the highlighted parts of the code to practice entering comments.