instructional systems
Index:
[Session7]Text-decoration, bulleted list, table, and frame
1 Chapter1
2 Chapter2
3 Chapter3
4 Chapter4
Your Location: Home Page  >  [2] HTML and CSS (on condition)  >  [Session7]Text-decoration, bulleted list, table, and frame  >  Chapter4  >  4.1 Grouping Element and Comments, etc.
 Grouping Element and Comments, etc.
[The purpose of this section]
Learn the meaning of and how to use other HTML elements and character references.

Other HTML Elements etc. (Grouping Element and Comments)

Grouping element (div element and span element)

Explanation of the element
So far, we have been studying a variety of HTML elements which describe the structure of a document. However, from Session 9, we will discuss CSS, which describes the appearance of a structured document. Basically CSS sets up the appearance of a block unit which is described by HTML. However, sometimes you want to set up the appearance of a different unit (block) which is different from the block defined for the structure of the document. In that case, you can use grouping elements such as the div element and the span element. Therefore, grouping elements are used in conjunction with CSS. For this reason, examples of how the div element and the span element are actually used will be shown later in Session 10.

Comments (<?-- -->)

Explanation of the element
The “comments” in a document description language mean the description which is not displayed on the Browser. (Similar functions are available in computer languages including programming languages.) “Comments” are very useful when the author wants to write a note in the document or do some testing.
For example, when the HTML document gets long, sometimes it becomes hard to understand what a certain block intends to describe. In that case, it is useful to leave a note saying, for example, “The content from now on relates to XX” because that not only helps the reader to distinguish that part from other parts of the document, but also makes the editing work easy. Since the note is a “comment” and as such it is not displayed on the Web Browser, it does not change what the author wants to disseminate.
In some cases, comments are used to identify the source of the problem when you have difficulty in letting the Browser display the file properly. When you have a problem, you can make the possible problem spot a “comment” for the time being. (“Comment out” is the term usually used for such operation, in that a portion of the document is redefined as a comment.) When you have confirmed that the file is displayed without a problem, you remove a little bit of comments to see if the file can be displayed correctly on the Browser. You repeat this process until you identify the trouble spot; i.e., if you had a display problem immediately after you removed a certain portion of the comment, then it is likely that the particular portion is the source of the problem.

All you have to do to let a text become a comment is to embed the text you want to become a comment with “<!--” and “-->”. Please, however, note that it is not allowed to use “--” (two consecutive hyphens) between “<!--” and “-->”.

Sample HTML
<p> For example, up to here, we have discussed A.  </p>

<!-- Insert such comment as “Watch out!  We will discuss B from now on”.-->
<!-- Texts written here will not be displayed on the Web Browser.-->
<p>  Let us discuss B from now on. </p>
<!-- 
If you embed a large block like this, it is possible to write a comment in 
two or more lines. Of course, these 3 lines will not be displayed on the Web Browser. -->
The results displayed on the Web Browser

コメント

Character Reference and Platform Dependent Characters

There are some characters which are not allowed to be used in an HTML file. Let us study what they are and how to deal with them.

Character reference

As we have been studying, HTML documents, not like other usual documents created by word processing software, use “tags” which show the boundaries of elements in the document to specify the structure. Although the “tag” inserted is surrounded by “<” and “>” to distinguish it from the main body of the text, come to think of it, these “<” and “>” are also included in the normal character set. Then, how can we use these characters (symbols) in an HTML document as a normal character (rather than as a symbol to distinguish a tag)?

For example, suppose you wrote the following statement in an HTML document, “Introduction to HTML Grammar”, as an explanation for the br element.

<p> 
   When you want to break the line inside the p element, <br>you use the tag.
</p> 

Although there seems to be no problem with this statement, when displayed on the Web Browser, it looks as follows:

文字参照無し

The<br> part is not displayed. Instead, the line is broken there. If you have a look at the HTML document closely, as a matter of course, this is the result you would expect, isn’t it? It is only that, since the <br> is an element to break the line, the tag was not displayed, and the line was broken there.

Therefore, for an occasion such as this, it has been arranged that such characters that have a special meaning in an HTML document such as “<” and “>” must be input in a special manner. This is called character reference.

The following list shows some typical symbols. Please use the character reference whenever you want to display these symbols.

Symbols Character reference How to pronounce the symbol
< &lt; Less-than
> &gt; Greater-than
" &quot; Double quotation
& &amp; Ampersand (a symbol meaning “and”)
  &nbsp; No-break space
(Note) The last one, no-break space (&nbsp;), is used to input two or more white spaces in a row, etc.

If you rewrite the example above using the character reference given above, it becomes as follows:

<p> 
  When you want to break the line inside the p element, you use the &lt;br&gt;tag.
</p> 
This time you’ve got what you wanted to display, haven’t you?

文字参照有り

Platform dependant characters

There are some Japanese characters which you are not allowed to use on the Internet.

Please make sure that you do not use the following characters in an HTML file.

機種依存文字

(Note) Katakana on the last line are single-byte katakana. Although they are not included in the platform dependant characters, you are not allowed to use these characters on the Internet.
Copyright (C) Kenichi Sugitani 2005, All Rights Reserved