Miscellaneous Tags

E04a - (3:42)
- <hr>
  - Horizontal rule, set to 75% width:

E04b - (2:49)

<pre> tag
- pre = "preformatted" text.
- The <pre> tag will honor the integrity of the character spacing and line breaks as they appear in the code. It preserves the white space in the code.
- Preformatted text is displayed by browsers with what is called a monospace font.
  - The Courier group of fonts is the most common monospaced font.
  - Others include Lucida Console and Monaco.
- Monospaced characters (glyphs) are all the same width.
  - For example, an upper case W is usually much wider than a lower case letter i.
  - However, with monospaced fonts this is not the case; they both take up equal amounts of space on a line.
Examples:

With normally spaced fonts, a"W" is about as wide as five "i"s:

WWWWW
iiiii

With monospaced fonts, all characters have the same width:
```
WWWWW
iiiii
```
Two problems with monospaced fonts are that they are not visually attractive and are harder to read.
One big benefit is that, because these fonts use the same amount of width per character regardless of what the letter is, they are very useful for lining up text in rows and columns.
This characteristic of monospace fonts can be exploited by using them for tables of information. This is not to be confused with html tables.
Here's an example of using the PRE tag. Look in the code and see that the line breaks and spaces are maintained from the code when seen in the browser.

          Fire Department  ---  Salary Comparisons
                      Captain  Lieutenant  Fireman
          Los Angeles $89,432    $74,938   $42,015     
          Chicago     $84,515    $67,329   $40,509
          New York    $92,402    $57,894   $49,519

E04c - (2:50)
- <code>
  - The <code> tag is used to make text appear in monospaced fonts.
  - Unlike the <pre> tag, white space in the code is not replicated in the browser, except for one space, just like regular text.
  - Also, it is not a block-level tag such as the <p> and heading tags, all of which have automatic line breaks before and after them so that adjecent text will not appear to their sides.
  - This means that you can use the <code> tag in the middle of a sentence and get a monospace font that is identified as text representing some code without forcing it on to its own line.
  - The code tag is often used in technical writing to indicate what written code looks like.
    - Example of use in a technical document about unix shell commands:
      - Enter the following command in your UNIX shell to search for documents that include the word Dan in upper or lower case (the i flag = case insensitive): unix> ls | grep dan -i
  - There are other tags that do similar formatting. The following tags are also generally formatted by browsers in monospace font, however they have different meanings, and can be formatted differently using cascading style sheets:
    - <samp> - intended to indicate a sample of code - not much different than <code>.
    - <kbd> - intended to represent keystrokes on a keyboard, sometimes displayed in bold.
E04d - (3:05)


They are used to hide information in the code from the browser window.
Note that even though the content within a comment element is not seen in the browser window, comments are easily viewable in the source code by simple looking at the source code where they are not hidden.
- Therefore, do not put any sensitive information in comments.
Comments are used to:
- Delineate the start and end of sections of code.
- Explain what was done in the code and why.
- Hide code for items that periodically may not be needed.
Using comments is considered to be a good practice generally.
- It assists both you and others who are trying to understand what is in the code.
- It assists others who may be working on the site about the same time your are and it may assist you in the future to understand what you did in the code.
This is what a comment tag looks like: 
- Do not use any other dashes.

Sometimes equal signs are used to stretch the comment, using double dashes on each end:

Assignment:
- Look at the code for this page for your instructions!