Lesson 16: Comments

Overview

In this HTML lesson, we provide guidance on how to comment code and explain the comment element. We begin with a simple example to demonstrate the syntax and show that comments do not appear on the page. Then we are given a small example to show where we might use a comment and compare comments to our other method of hiding content. Next, we give a practical example of how to code a web page with comments and show how to use comments to edit HTML.

Comment Syntax

Comments are elements that are hidden from view when the page is rendered. The syntax of comments is strange. They begin with a less-than symbol, an exclamation point, and two dashes and end with two dashes and a greater-than symbol. In between, we can put any text that we would like.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <!-- "for we walk by faith, not by sight." (2 Corinthians 5:7) -->
  </body>
</html>

Output

Hiding Parts

We can use comments to hide information that we do not want revealed in the HTML. In this example, we put the book, chapter, and verse in the comments for the quote that is displayed in the HTML. This way, the information is available, if we want it, and we view the source page to see it.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <!-- Isaiah 56:3 -->
    <p><q>Let not the foreigner who has joined himself to the Lord say,
	<q>The Lord will surely separate me from his people</q>;
	and let not the eunuch say,
    <q>Behold, I am a dry tree.</q></q></p>
  </body>
</html>

Output

Multiple Methods

In this example, we show two different ways to make content that is not visible. The first one uses a comment, just like the ones we have been using. The second one uses the hidden attribute that we saw before as one of our global attributes. Here, we hide the quote element.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <!-- But we impart a secret and hidden wisdom of God, which God decreed
    before the ages for our glorification. (1 Corinthians 2:7) -->
    <p>But, as it is written,
      <q hidden>What no eye has seen, nor ear heard,
      nor the heart of man conceived, what God has prepared for those who
      love him,</q>
    (1 Corinthians 2:9)</p>
  </body>
</html>

Output

Using Comments for Development

Before we write any code, we should use comments to develop an outline. In this example, we put short comments that briefly describe the code that we are going to write. This serves two purposes: It gives us a method for organizing our development, and it provides a description for maintaining the code once it is written.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <!-- The Full Page -->
    <!-- Logo -->
    <!-- Horizontal Menu -->
    <!-- Content -->
  </body>
</html>

Output

Adding the Code

Once we have our comments, we can add in the code after each comment, as we do here.

Example5.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
    <style>
      #idPage {
        width:500px;
        background-color: lightgray;
      }
      #idHoriz {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: ivory;
        border:1px solid silver;
      }
      #idHoriz > li a {
        float: left;
        padding: 10px;
        background-color: ivory;
        text-decoration: none;
      }
      #idHoriz > li a:hover {
        background-color: lavender;
      }
    </style>
  </head>
  <body>
    <!-- The Full Page -->
    <div id="idPage">
      <!-- Logo -->
      <img src="XoaxLogo.png" />
      <!-- Horizontal Menu -->
      <ul id="idHoriz">
        <li><a href="https://xoax.net/html/">HTML</a></li>
        <li><a href="https://xoax.net/css/">CSS</a></li>
        <li><a href="https://xoax.net/javascript/">JavaScript</a></li>
      </ul>
      <!-- Content -->
      <div style="width:500px;height:500px;background-color:beige;">
      </div>
    </div>
  </body>
</html>

Output

Editting HTML with Comments

Here, we demonstrate how to use comments to edit HTML. When we have a page with content and we want see what it looks like without a particular item in it, we can use comments to make the item not visible in the page without removing the code. That way, if we want to put the item back, we can simply remove the comment. The second example below show the image placed back in the document by uncommenting.

Example6.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
<!--
   <img style="width:400px;" src="EcceAgnusDei.png" />
-->
   <div style=width:400px;>
     <p>in Isaiah 56:6-8, we read,
       <blockquote>And the foreigners who join themselves to the Lord,
       to minister to him, to love the name of the Lord,
       and to be his servants,
       every one who keeps the sabbath, and does not profane it,
       and holds fast my covenant--
       these I will bring to my holy mountain,
       and make them joyful in my house of prayer;
       their burnt offerings and their sacrifices
       will be accepted on my altar;
       for my house shall be called a house of prayer
       for all peoples. Thus says the Lord God,
       who gathers the outcasts of Israel,
       I will gather yet others to him
       besides those already gathered.<blockquote>
    </p>
    </div>
  </body>
</html>

Core HTML

Lesson 16: Comments

Overview

Comment Syntax

Example1.html

Output

Hiding Parts

Example2.html

Output

Multiple Methods

Example3.html

Output

Using Comments for Development

Example4.html

Output

Adding the Code

Example5.html

Output

Editting HTML with Comments

Example6.html

Output

Output with Image