1. The Comment Tag
Important terms are in white with dotted underline: Important!
Purpose:
-
The Comment Tag is used to add, as you might expect, various types of comments to HTML documents. These comments are ignored by browsers and only visible when viewing the document's source code. In our example, we will primarily use Comment Tags to identify a closing tag as belonging with it's opening tag.
-
Format:
-
Basic format of the Comment Tag:
<!-- comment text --> -
An in context example of the format would be:
<div id="example">
...several lines of code...
</div><!-- End: "example" -->
-
Illustrations:
Figure: 1.1: Example of using the Comment Tag in HTML Kit.
Summary:
-
While it's unlikely you will need to add Comment Tags to HTML documents, knowing how they work can help in navigating through long documents using the FIND button. This will be covered more in-depth in the following sections.
2. Indentation Rules.
Purpose:
-
The purpose of indentation is a fairly simple concept: To provide visual clues to where an HTML tag opens:
<tag>and where it closes:</tag>Especially in cases where multiple lines of code lie between the opening tag and the closing tag. -
HTML tags are divided into two main categories that help define when to use line breaks and indents and when not to. So lets look at each and see some examples.
-
Inline Elements:
Inline elements are defined as any HTML tags that do not interrupt he normal flow of the page structure, but simply flow along naturally with the text or whatever else is being presented. For example:
I am giving an <span class="em">example</span> of an inline element called a SPAN tag.Normally, inline tags do not need line breaks or indents applied to them. There are a handful of these, but most are used only in very special circumstances; for example, citations, or for acronyms.
The only two we really need to know are:
The SPAN tag:
<span></span>And the BREAK tag:
<br />
The BREAK tag is rather special in a couple ways, first it's opening and closing are contained within the same tag: Open<brand Close:/>Second, it's an inline tag, but it's purpose is to insert a hard line break... so it kind of does interrupt page flow. I sometimes use line breaks and indents on this tag, if it's seems logical to me. -
Block Elements:
Block elements are elements that form a section or "block" of a page, and can span multiple lines of code, and quite frequently several more Block elements. Without indentation and Comment tags, keeping track of the tag pairs can be a nightmare. Here's a list of the Block Elements we're likely to encounter:
The Div tag:
<div></div>The Heading tags:
<h1></h1> <h2></h2> <h3></h3>... ...<h6></h6>The Paragraph tag:
<p></p>The Un-ordered List tag:
<ul></ul>
Un-ordered lists, more typically called "Bullet" lists, are lists whose listed items have no particular order to them.The Ordered List tag:
<ol></ol>
Ordered Lists are lists with items that must be listed in a set order for the list to make the most sense.The List Item tag:
<li></li>
List Item tags define the beginning and end of each item in both Un-ordered and Ordered Lists.
-
-
Format:
-
Where possible, an HTML tag should begin and end on the same code line.
<p>Some text. Some more text. Yet more text.</p> -
However, when a Block Element Tag contains within it another Block Element, then we use line breaks and indents to show this.
<div id="content">
<p>Some Text. Some more Text. Yet more Text.</p> </div> -
There are also Logical Indents. This is where a Block Element follows another one in a way that logically suggests an indent; for example, a Paragraph following a Heading.
<h3>Title</h3>
<p>Some Text. Some more Text. Yet more Text.</p>
<p>Some Text. Some more Text. Yet more Text.</p>
-
Illustrations:
Figure: 1.2: Complicated example of the use of Indentation from this page.
in the top tool bar.
