How HTML Works

HTML is a set of tags that tell a Web browser how to display text. Tags mostly come in pairs of opening and closing tags, like <em> and </em>. Any text surrounded by a pair of tags is displayed the way the tags tell your browser to display it. E2's built-in HTML toolbar is designed to insert common tags for you at the press of a button. The basic tags and examples of their effects are shown below.



Words and Phrases

Put emphasis on stuff with <em>stuff</em> (the button is marked i on E2's built-in HTML toolbar because most browsers will display emphasised text in italics)

Make stuff strong with <strong>stuff</strong> (the button is marked b on E2's built-in HTML toolbar because most browsers will display strong text in bold)

Make stuff small with <small>stuff</small>

Make stuff big with <big>stuff</big>



Biggest heading

<h1>Biggest heading</h1>

Second-biggest heading

<h2>Second-biggest heading</h2>

Smaller heading

<h3>Smaller heading</h3>



Lists

  • makes
  • order
  • difference
  • no

<ul>
<li>makes</li>
<li>order</li>
<li>difference</li>
<li>no</li>
</ul>

  1. Order
  2. makes
  3. a
  4. difference.

<ol>
<li>Order</li>
<li>makes</li>
<li>a</li>
<li>difference.</li>
</ol>



Block Quote

"The distracting effect of overdependence on adjectives and alliteration is well-illustrated by the following excerpt.

She stood in another part of the club, surrounded by an ellipse of fawning and vying men two or three deep, an island of attraction in a chaotic sea of seekers. Each man, with drink in hand, was posing and displaying his imagined or proven point of attractiveness to women in competition for her attention and favor.

Blah, blah, blah."

<blockquote> She stood in another part of the club, surrounded by an ellipse of fawning and vying men two or three deep, an island of attraction in a chaotic sea of seekers. Each man, with drink in hand, was posing and displaying his imagined or proven point of attractiveness to women in competition for her attention and favor. </blockquote>

Note: Due to a change in HTML code, if you are putting multiple paragraphs in a block quote, you will need the blockquote tag around each paragraph.



Horizontal lines

<hr>



Paragraphs

Everything2 will automatically insert paragraph tags and line breaks as long as it doesn't find any in a writeup, but it may be useful to be aware of these tags all the same.

This is one paragraph

And this is another.

<p> This is one paragraph</p> <p> And this is another. </p>

One paragraph...
broken into three lines...
is still not a poem.

<p> One paragraph... <br> broken into three lines... <br> is still not a poem. </p>


Keep in mind that the actual appearance of your text depends on style settings and other factors, so the way others see it may differ from the way you see it. For more advanced HTML features, see N-Wing's extensive guide.

0: Overview/Contents/Index

Everything 2 HTML Tags

(A Guide to using HTML in E2.)

While it is possible to node in plain text, it would be like talking in a monotone... your audience would fall asleep (and probably downvote your writeup (!)). This guide shows how to use all the HTML tags allowed in E2.

If you already know HTML, a list of tags allowed in E2 is at E2 FAQ: HTML.
If you just want a quick reference, you might want to use the quick start instead.

Note: until recently, tags were not case sensitive. However, the new XHTML standard states that tags are now case sensitive, and should always be in lowercase. For this reason, I recommend not using uppercase tags any more. (In this guide, I only have the tags in uppercase in the section titles so they are easier to see.)


Table of Contents (links lead to individual chapters)
0 : Overview/Contents/Index
1 : Tags and Starting New Lines
      1.1 : Tags/HTML Overview
      1.2 : Starting New Lines
      1.3 : Paragraphs
            1.3.1 : Paragraph Alignment
2 : Character Formatting
      2.1 : Bold and Italics and Underline vs. STRONG and EMphasis
            2.1.1 : Bold / Italic / Underline
            2.1.2 : STRONG / EMphasis
            2.1.3 : B/I vs. STRONG/EM
      2.2 : Do you like 'em big or small?
      2.3 : SUPer VARiable SUBmarine
            2.3.1 : SUPerscript and SUBscript
            2.3.2 : VARiables
      2.4 : Monospaced Text a.k.a. Computers and HTML
            2.4.1 : Inline Monospaced Tags
            2.4.2 : PRE-formatted text
      2.5 : 'Editing'
            2.5.1 : INSert and DELete
            2.5.2 : STRIKE That
3 : Special Characters
      3.1 : Special Normal Characters
      3.2 : Using square brackets in Everything
      3.3 : Math symbols
4 : Lists
      4.1 : Numbered and Bulleted Lists
            4.1.1 : Numbers/Numerals/Outline
      4.2 : Definition Lists
5 : Giving Credit Where Credit is Due
      5.1 : Block Quotations
      5.2 : Quotes
6 : Miscellaneous Tags
      6.1 : Outlines using heading levels
      6.2 : Horizontal Rules
      6.3 : Saying Less
7 : EOF: Index and Information
      7.1 : Index
      7.2 : Thanks
      7.3 : Guide Information

This guide has an index in the last chapter.



1: Tags and Starting New Lines


1.1: Tags/HTML Overview

HTML stands for HyperText Markup Language. A markup language in general means that is consists of plain text but also have certain character sequences that denote something special. In this case, HTML, almost all "fancy" things (like formatting) are done by using "tags". Plain HTML tags are generally in the form:

          <tag_name> normal text to format </tag_name>

This is how "markup" comes into play: the text "normal text to format" is typed just as it appears; the tags that surround that text (the <tag_name> and </tag_name>, in this case, tell the web browser how it should appear.

While this guide will help you with your HTML, E2's writeup hints will also warn you about some errors in your HTML. Visit your user settings and make sure the "Show critical writeup hints" and "Show HTML hints" options are checked (they are by default), and check "Show strict HTML hints" (which is not checked by default). Then press the submit button.

Most of this guide is dedicated to showing how to use tags that format text. However, the thing most people want to be able to do at first is be able to separate their text into paragraphs. Lucky for them, that is explained next...


1.2: Starting New Lines

The first thing you probably want to do is separate your lines a bit. Because of the way HTML works, just hitting Enter won't start a new line. Instead, you have to use some tags that don't really format text, but say how the text should flow. To just start on a new line,
like this, just insert <br /> where you want the line to break. (In other words, put one at the end of each line.) That tag is useful for things like poems, where you want each line to be short.


1.3: Paragraphs

For longer sections of text, though, like paragraphs, using the paragraph tag is better. Simply put <p> before each paragraph, and </p> after each paragraph. For example, if this is typed:

	<p>
	The quick brown fox jumps over the lazy dog.
	It jumped very quickly and swiftly in order
	to reach the proper velocity it needed to
	clear the dog.
	</p>
	<p>
	"Why did it jump?", she asked.
	"It would have been easier on the fox to
	just construct a ramp, put on roller skates,
	and skate over the dog."
	</p>
	<p>
	A perplexed boy answered, "Didn't you know?
	The fox lost its roller skates."
	</p>
Then this is how it would show:

The quick brown fox jumps over the lazy dog. It jumped very quickly and swiftly in order to reach the proper velocity it needed to clear the dog.

"Why did it jump?", she asked. "It would have been easier on the fox to just construct a ramp, put on roller skates, and skate over the dog."

A perplexed boy answered, "Didn't you know? The fox lost its roller skates."

1.3.1: Paragraph Alignment

You may have seen some nodes that play with the text alignment, like this:

This sentence is on the right.

This sentence is centered.

This sentence is back on the left.

You may find this useful when noding poetry, ...

... or if you just want to give the reader ...

... a headache (in that case, shame on you).

To do the alignment, we use the same <p> tags previously mentioned, but we give more information in the tag. Most HTML tags can have several items of addition information, called attributes, but E2 filters most of them out. One of the attributes allowed is the align attribute of the paragraph tag. We may align the paragraphs using <p align="x">, where x is left, center, right, or justify.

This paragraph starts with <p align="left">. As you can tell, it is easier to just make the opening tag a plain <p>, since this is assumed by default.

This has <p align="center"> as the paragraph tag.

This right-justified line[s] begins with <p align="right">.

This paragraph opens with <p align="justify">. Some browsers are able to display justified paragraph alignment, which means that the left and right sides of the text are lined up. Fancy stuff. Browsers that do not understand "justify" in the align attribute simply default to normal alignment, which is straight on the left, and jagged on the right. Of course, having justified paragraphs usually looks cooler if each paragraph is of a decent length, unlike this one, which is a tad on the short side.

Ok,         no         more         messing

around         with         the

paragraph         alignment.

Using the align attribute is another feature popular with the poets. Ok, no more mention of poetry. This is a computer lesson, not a human language lesson.


2: Character Formatting


2.1: Bold and Italics and Underline vs. STRONG and EMphasis

2.1.1: Bold / Italic / Underline

Creating new lines was easy enough, right? Now to make some text stand out from the rest. The tags used to create bold and italics text is pretty easy to remember.
To make something bold, put a <b> tag at the start of the bold text, and </b> at the end of the bold text.
To make something italics, put <i> at the start of the italics text, and </i> at the end of the italics text.
If you guess you should use <u> before and </u> after what you want to be underlined, you would be correct.
For example,
          <b>This</b> is bold, <i>this</i> is italics, <b><i>this</i></b> is <i><b>both</b></i>. <u>This sentence is underlined.</u>
produces
          This is bold, this is italics, this is both. This sentence is underlined.
Note that you can nest tags, and order doesn't matter. Just be sure to not close them in an improper order, like this:
          <b><i>Never do this!</b></i>
The result is undefined, but it usually just looks messed up. If you are really unlucky, it will make all the rest of the page have wrong formatting, too.
I highly recommend not underlining text in HTML: people expect underlined text to be a link.

2.1.2: STRONG / EMphasis

The strong and emphasis tags generally display as bold and italics. However, it is recommended to use strong and emphasis instead of bold and italics (an explanation follows, in the next section).
To mark something as strong use the <strong> tag before the strong text, and </strong> after it. Most browsers show this as bold.
To mark something as having emphasis, put the <em> tag before the emphasized text, and </em> after it. Most browsers show this as italics.
For example,
          <strong>This</strong> is strong and <em>this</em> is emphasized.
renders as
          This is strong and this is emphasized.
Again, you can nest tags, order doesn't matter, and be sure they are closed in the correct order.

Note that while it common to denote the source of a quotation (citation), there are special tags for these cases; this is covered in the later section Giving Credit Where Credit is Due.

2.1.3: B/I vs. STRONG/EM

Now, you may be wondering why there are 2 tags to do bold, and 2 tags to do italics. The short answer is: there isn't.

Oh, you want to know the longer answer, even though I may bore you to death? Yay! First, some background...
A physical style tells the browser, "I want the text to look exactly like this".
A logical style tells the browser, "this text has a certain significance, but I'll let you decide how it should look".

The user is more likely to override the display logical styles. For example, somebody may not like to read a lot of italics text because it can be hard to read a lot of. But if a page uses the italics a lot, that person would be unhappy. However, if the emphasis tag is used, they could set that tag to display as something else for them. They may choose to show it as green on a blue background, and not the italics they dread.

For the most part, though, it doesn't matter to much, as:

  1. most people do not override the default formatting
  2. the "better" way of formatting many "special" items is via Cascading Style Sheets (CSS), which you have no control over in a writeup

I personally generally use <strong>strong</strong> and <em>em</em> for general emphasis, and the others in special circumstances:

  • <i>i</i> for:
  • <b>b</b> for things such as UI widget text (choose File > Save As...) where another visual style could look odd

(I kind of think of it as like programming analogy:

physical styles : magical numbers :: logical styles : constants

.) However, most people (i.e., normal people) just use <b> and <i> because they are easier to remember, and require less typing.


2.2: Do you like 'em big or small?

Another way to draw attention to things is by changing the font size.
Of course, a change in font size can be used for other purposes, too...         Help me! I went to a shrink, and I was really shrunk!
The <small> and <big> tags are easy to remember. Multiple nestings of the same tag will cause text to get really big, or really small.
Here is how to use them by themselves:
          <small>Small</small> and <big>big</big>.
show as:
          Small and big.
Multiple nestings, like:
          <small><small><small>Very small</small></small></small> and <big><big><big>very big</big></big></big>.
will show as:
          Very small and very big.

One neat thing to do with the smaller and bigger tags is to make "small caps". So to make this official-looking title:
         EVERYTHING 2 HTML TAGS
you would type:
         <big><big>E</big></big><small>VERYTHING</small><big><big> 2 HTML T</big></big><small>AGS</small>

One last (but rather sad) note: character-cell-based (console-only) browsers, like Lynx or Links, are unable to show different font sizes. This is because they use a monospaced, or monowidth font, so each character takes up the same amount of room. Although the old fossils people who use these browsers are decreasing, just remember a general rule in HTML (that I just made up) - formatting should add to existing text, and should not subtract from the text if absent.


2.3: SUPer VARiable SUBmarine

2.3.1: SUPerscript and SUBscript

Imagine a excellent underwater submersible that changes.
That is a super variable submarine.
* groan *
Ok, ok, no more lame puns to introduce some tags... You're really cramping my style.. my cascading style! <rimshot>

If you are going to type in mathematical and/or chemical and/or math-related expressions, you should know about the subscript and superscript tags. You could guess what tags you use to show this:
          I like subscript and superscript.
But don't feel bad if you think <sup> should be "super"; it messes up even experienced HTML-writers (like me, waaaahhh).
          I like <sub>sub</sub>script and <sup>sup</sup>erscript.
With these tags, I like to also use the <small> tag, so it looks nicer. (Alternatively, if you are only raising something to the second and third power, you can also use the widely supported &sup2; and &sup3; for a superscript of 2 and 3, which is shown like this² and this³.) If the use of superscripts and/or subscripts is important to correctly read your writeup, you may want to see Everything number presentation.

2.3.2: VARiables

The <var> tag is also useful for mathematical fields, as it indicates a variable, usually by rendering the text italics. For example, to show the discriminant of the quadratic formula,
          d = b2 - 4ac
you could write:
          <var>d</var> = <var>b</var><sup><small>2</small></sup> - 4<var>ac</var>
Also note how I used the small tag in the superscript tag to make the 2 look nicer. I also could have used the character entity &sup2; for the 2, but that is for a later section.


2.4: Monospaced Text a.k.a. Computers and HTML

There are several tags for displaying monospaced, or fixed-width text. (Could it be because HTML was developed for computers, so displaying code, text to key in, display text, etc. would be popular? Nah.) All these tags pretty much all display the same on each browser, so you'll probably end up just picking one or two that you like, and using it/them a lot.

2.4.1: Inline Monospaced Tags

Quick diversion: an "inline" tag is an HTML tag that can be used on text that is in part of a line; that is, the text that is formatted via an inline tag can be in with other text that is formatted differently. The 4 tags explained here are all inline, so they can be used almost anywhere you want.

The first inline fixed-width tag allowed on here, on E2, was the teletype text tag. This tag is used to indicate teletype text.
I would use this tag to show people how to type basic *nix and/or DOS commands:
          type cd and press the "Enter" key
which I would enter as:
          type <tt>cd</tt> and press the "Enter" key
Of course, on Lynx it would look the same, since every character is already the same width, but it would stand out for the majority of people who use graphical browsers. If it is important that it stands out, you might also want to surround the text with strong tags.

A slightly more relevant tag to use, though, would be the keyboard tag, which indicates text to key in via a keyboard (or punch card if you're on a primitive machine). So the example changes to:
          type cd and press the "Enter" key
which I would now enter as:
          type <kbd>cd</kbd> and press the "Enter" key

"But what if I was to show the output of the command?" you ask. (Ask it, ... ask it, ... Ask it now! Thank you.)
That is what the <samp> tag is for - sample output.
After I type in cd and press the "Enter" key (under Unix), I might see:
          42 ~ #
as my tcsh prompt*, which is simple to write HTML for:
          <samp>42 ~ # </samp>
(* Yes, a root prompt. I'm 1337.)

The last inline fixed-space tag (but not least, of course) is <code>. This is used for code examples. In this official E2 HTML guide™©etc., I use this tag in almost every example of what HTML code should be used to create something. However, I'm currently a little sick of HTML, so here is an example from Java:

          the line macroText.put(MACRO_SOURCE_LINES, Integer.toString(lineCount)); stores the number of lines in the E2 HTML tags source file for later use

which I entered as:

          the line
          <code>macroText.put(MACRO_SOURCE_LINES, Integer.toString(lineCount));</code>
          stores the number of lines in the E2 HTML tags source file for later use

Note how an end-of-line character is normally converted into a space by your web browser ...

2.4.2: PRE-formatted text

... although the next tag I'm going to show you will tell the browser to start a new line.

If you have large code examples, or what to make some nice (or ugly) ASCII art, it is usually easier to just enter in a straight block of text, instead of using many HTML tags. The pre-formatted tag allows you to do this by surrounding (usually multiple) line[s]s of text with <pre> and </pre>.
For example, a short C++ program might be:

    #include <iostream>

    #define EDB_GONE true

    void main() {
        if(EDB_GONE)
            cout << "Hello, Everythingites!" << endl;
        else
            cout << "EDB, please don't eat me!" << endl;
    }
I made all the characters the same width and made the indents by using multiple spaces. The HTML code is:
    <pre>
    #include &lt;iostream&gt;

    #define EDB_GONE true

    void main() {
        if(EDB_GONE)
            cout &lt;&lt; "Hello, Everythingites!" &lt;&lt; endl;
        else
            cout &lt;&lt; "EDB, please don't eat me!" &lt;&lt; endl;
    }
    </pre>
Ummm, don't worry about the &lt; stuff yet; that is another example of a character entity reference, which is how you display a less-than sign, <, in HTML. This is explained in the next chapter. If you want to have the pre effect without doing hard work, use Wharfinger's Linebreaker and/or E2 Source Code Formatter and/or text formatter.


2.5: 'Editing'

2.5.1: INSert and DELete

Now, for some rarely, almost never-seen tags. (You can skip right to "STRIKE That", if you want.)
You still here? Wow, you're insane. I've never used the insert and delete tags, but I guess you'll find out the hard way how useless they are...
<ins> indicates where text has been inserted (usually since a previous draft). <del> indicates where text has been deleted.
Here is a sample of an edited document:
          Yo, idiotHonored sir, I would greatly appreciate it if you do business with me, or you're toast.
Netscape 4 does not support these tags, so this is what it looks like in a non-stupid browser (and some stupid ones, too, like IE):
          Yo, idiotHonored sir, I would greatly appreciate it if you do business with me, or you're toast.
Here is the code to generate the first example:
          <del>Yo, idiot</del><ins>Honored sir</ins>, <ins>I would greatly appreciate
          it if you</ins> do business with me<del>, or you're toast</del>.

2.5.2: STRIKE That

There is another way to indicate crossed-out text, which is by using one of the strikethrough tags. Both <s> ... </s> and <strike> ... </strike> do the exact same thing. One way to use these tags is to "officially" say one thing, but let the reader know what you are really thinking:
          You are such a pushover easy-going person. I don't know if I could stand being so spineless flexible.
This was typed as:
          You are such a <s>pushover</s> easy-going person.
          I don't know if I could stand being so <strike>spineless</strike> flexible.
Yes, you could use ^H instead of strikethrough, but morons^H^H^H^H^H less well-educated people could get confused. :)


3: Special Characters


3.1: Special Normal Characters

If you've been experimenting with drugs, I mean, HTML, you may have been having trouble displaying things like a less-than sign, < . There is a simple reason for, and solution to, that problem.
The reason: < and > are reserved for denoting a tag (that should be obvious enough by now) and & starts a character entity reference. What is that, you ask? Well, just read on for an answer...

These character entities allow numerous symbols to be inserted into normally ASCII-only HTML files. Always use these entities instead of just typing them:

  • &amp;   to show   &   (ampersand)
  • &lt;    to show   <   (less than)
  • &gt;    to show   >   (greater than)

     You may find &nbsp; useful when spacing is important. For example, I started this paragraph with "&nbsp; &nbsp; &nbsp;" to give the first line a slight indentation. I also stuck in several non-breaking spaces in the above unordered list to align the elements better.


3.2: Using square brackets in Everything

A specific "problem" with Everything is the inability to insert the square brackets, [ and ], without forming a link. The best way that I've found to deal with this by using

  • &#91;   to show   [   (left/opening square bracket)
  • &#93;   to show   ]   (right/closing square bracket) (this generally isn't needed, but makes runaway links easier to spot, and provides balance with the required way to escape in open square bracket)


3.3: Math symbols

There are many other cool symbols you can include using character entities, like ² ³ (superscript 2 (&sup2;) and 3 (&sup3;)), α × β ÷ γ ∫ δ ‾ ◊ ‰ € ∇ , but not all browsers support all these characters, so you may want to just stick with & < > [ ] .
Of course, if you're feeling adventurous, a full list of character entities allowed in HTML 4 is available from the W3C at
http://www.w3.org/TR/html4/sgml/entities.html
and in the writeup HTML symbol reference.


4: Lists

Following are some words that can be used in an interrogative sentence:

  • What
  • if
  • you
  • want
  • to
  • list
  • things?

Sure, you could use lots of <br />, but there is are some HTML tags that are dedicated to creating lists that look nicer than brute forcing it. To create a list, one pair of tags are used once, which specify which type of list to create, and another pair or two are used repeatedly for each item in the list.


4.1: Numbered and Bulleted Lists

Creating a list that has bullets (which are basically dots) or numbers in front of each item requires several steps.

  1. First, decide if bullets or numbers are more appropriate for the given list. (Generally, use bullets when the order is not important, and numbering when it is. I am unable to come up with any examples right now, but maybe you can think of some.)
  2. Second, place the appropriate tag.
    • If you want bullets, like what is in front of this line, put in a <ul>. This stands for unordered list.
    • If you want numbers, like the steps in these instructions have, use the <ol> tag. This means ordered list.
  3. Third, put a <li> before each list item, and a closing </li> after each item.
  4. Finally, close this list with either </ul> or </ol> (the closing tag should match whatever opening tag you used).

To illustrate:
          <ul>
          <li>This is [first]</li>
          <li>This is [second]</li>
          </ul>
produces:

and:
          <ol>
          <li>This is [first]</li>
          <li>This is [second]</li>
          </ol>
produces:

  1. This is first
  2. This is second

Notice that the only difference between an unordered (bulleted) and ordered (numbered) list is only the main opening and closing list tags. (You may also notice that if you nest bulleted items, the bullet may change.)

4.1.1: Numbers/Numerals/Outline

You can also use the <ol> tag to create outlines by adding the type attribute. To do this, instead of a plain <ol> to start an ordered list, use <ol type="n"> instead. The n can be one of several things, as shown below:

  1. <ol type="I">
  2. Please
    1. <ol type="A">
    2. don't
      1. <ol type="1"> (default, if no "type" is given)
      2. sneeze
        1. <ol type="a">
        2. on
          1. <ol type="i">
          2. me.

The types do not have to be in that order; they can be nested multiple times, with any "type" repeated any number of times.

It is also possible to fake resuming a previously-started list by using the start attribute:
          <ol type="I" start="3">
          <li>resume the outline</li>
          </ol>
which displays as:

  1. resume the outline

Note that the start value is not what is should look like (in this case, "III" in Roman numerals), but in Hindu-Arabic numerals ("normal" numbers).


4.2: Definition Lists

Definition lists are rarely used on the web, let alone Everything (except by me, who overuses them), so I'll let you skip to the next chapter, if you so desire.
Since you may not have seen this tag set in use before, I'll first show you an example.

A-wing
Fast but weak.
B-wing
Slow but strong.
N-Wing
That would be me.
Not a "real" Star Wars fighter.
This code produced the above:
          <dl>
          <dt>[A-wing]</dt> <dd>[Fast] but [weak].</dd>
          <dt>[B-wing]</dt> <dd>[Slow] but [strong].</dd>
          <dt>[N-Wing]</dt>
          <dd>That would be me.</dd>
          <dd><em>Not</em> a "real" [Star Wars] fighter.</dd>
          </dl>

To make a definition list, first put in the open and close tags: <dl> and </dl> . For each definition, surround the definition term with <dt> and </dt>, and the definition definition (sic) with <dd> and </dd>. The <dt> and <dd> tags may be repeated multiple times without having the other, but normally (that means, check any dictionary), the term is first, and the definition[s] follow.
I sometimes use these tags to list references I used - I put the reference name and author in the term tags, and longer, more detailed explanation of the source, and my thoughts on it, in the definition tags. This can be used with tags explained in the next chapter.


5: Giving Credit Where Credit is Due

You've been hard at work on a great writeup that has lots of information summarized from many different sources. Now, how do you give credit to those whose hard work you stole from used? If you've half a brain (or more), you should've figured I'll explain how.


5.1: Block Quotations

One common situation is having a long quotation (one that takes up several lines). Simply enclosing it in quotation marks isn't adequate; you want to indent it, as is proper. The way to do just that is use the <blockquote> tag. The following paragraph is just plain text, with <blockquote> before it, and </blockquote> after it.

Testing, testing, one, two, three. Hey - are you reading this? How did you do that? This paragraph was encrypted with a very secure encryption algorithm! Hmmm... on second thought, maybe you just got lucky and guessed every single word. Yeah, that makes a lot more sense. Ok, now for the very important secret message: qpcjc pizza dodcp sleep dweez grrrr souxt pvnrt hnmqo fumcm bzyfs ioctl wtbal xyzzy jvgiz sdram plsqw souix szbyl
To be really picky, the block quot[e]ation tag doesn't have to indent, but most browsers indent it from the left and right margins, and put a little space above and below it.


5.2: Quotes

What if you have a short quotation? You can surround the text with the <q> tag (just a plain letter "Q"). (If your browser incorrectly does not indicate anything special, trash it and use a good one.) The nice people who defined HTML say browsers must add their own quotation marks, and you (the author) should not add your own. (This way, the proper locale-specific characters and multi-level quotations are correctly done.)

To specify the source, surround the source with <cite> tag to indicate that it is a citation. Graphical browsers usually render this in italics, which is usually what you would want, anyway.

This example of using <cite> and <q> tags:
          In 2002, Nathan exclaimed, Everything 1 is now gone. Long live Everything 2! - N-Wing
was created by this HTML:
          <q>In 2002, Nathan exclaimed, <q>Everything 1 is now gone. Long live Everything 2!</q></q> - <cite>N-Wing</cite>


6: Miscellaneous Tags

I'm not imaginative enough to figure out a better category name for the rest of the tags allowed on E2. (But if you can think of a better name, I would enjoy hearing it.)


6.1: Outlines using heading levels

In the chapter about lists, I showed how to create an (indented) outline by using multiple <ol> tags. That method works well if each level only has a sentence or two of text, but when the bodies become paragraphs, it becomes a little unwieldy. The heading tags are good for this, as their purpose was to serve as headers for larger bodies of text.

There are 6 levels of header tags, <h1> ... </h6> to <h6> ... </h6>, with <h1> being the highest level header. Unlike most other tags explained in this guide, the header tags should not go inside <p> and </p> tags (nor should paragraph tags be inside header tags) - paragraphs and headings are considered to be different things. Further, heading tags should not be "skipped" - for example, there should be no <h2> pair without a <h1> pair.

Here is an example of all 6 heading levels in use:

This has <h1> at the start, and </h1> at the end.

This is level 2. Before this text is <h2>, and after it is </h2>

You should be detecting a pattern by now. This line uses <h3> and </h3>.

As you guessed, <h4> and </h4> are in use here.

Yup, </h5> ends this, and <h5> starts this. (Hee-hee, I'm being tricky now.)
<h6> and </h6> is the lowest heading level.

You may want to use these tags to change font size. This is bad for several reasons, probably the most important for display reasons is that the heading tags end up on their own line. The tags created for changing font size, <small> and <big>, are created for just that task. So if you insist on using <h1>..<h6> to change the size, I'll have to smack you with a clue by four. (Just a friendly warning.)


6.2: Horizontal Rules

I will not make a joke about how being horizontal rules. Oops, too late.
The horizontal rule tag doesn't do any formatting, but rather puts a line across the page. The tag is simply a single <hr /> (with no closing tag).
The (usually gray) line below:


was created with simply:
          <hr />

Everything 2 also allows this tag to have the width attribute, which sets the width of the line. The width can be specified in pixels (little fairy-like critters) or a relative width given as a percentage. Using the percentage form is better, since it will look consistent, regardless of the browser window's width.
For this line


of width 75 pixels, my HTML was as follows:
          <hr width="75" />
But that probably looks a bit lame. This line
is a width of 75 percent, which means it should have a width of 3/4 of the thing it is in.
However, E2 currently strips out the % , leaving you back to the line of 75 pixels wide. (This is a known bug that will very likely not be fixed any time soon, although it has been a known problem for many moons (*ahem* I'm talking about revolutions of the Earth's biggest natural satellite, I don't know what you're thinking of, sheash.).)


6.3: Saying Less

If you want to use a shorter form of a word or phrase, you would use an abbreviation or acronym. However, if your reader does not know what the full version is, they may end up confused. One way to solve the problem on Everything 2 is create a link from the abbreviation or acronym. Of course, if there are multiple expansions, or there are no writeups on that topic yet, your reader may still be confused. The HTML solution is the <abbr> and <acronym> tags. Simply surround your shortened form with the appropriate tag, and set the title attribute to the full version.

Of course, an example helps:
          What is the predominant fs used on the LAN?
was created by:
          What is the predominant [fs|<abbr title="file system">fs</abbr>]
          used on the [LAN|<acronym title="Local Area Network">LAN</acronym>]?
Not all browsers display these tags any differently. Some do use a dotted underline, and many provide a "tool tip" that displays when you hover the mouse pointer over an abbreviation or acronym.

Now we get into E2-specific notes (booooo). Everything strips out everything after the first space, which means only the first word will display. (Which pretty much eliminates the point of using <abbr> and <acronym> in the first place.) You also will not see anything when you form a link — Everything 2 adds the target node as the link title, which will usually override your abbreviation/acronym. So what should you do? I just form a link from the shortened version (as demonstrated above), and use the tags as normal, for two reasons: in case auto link titling is disabled and it allows the user to easily find out more detailed information.



7: EOF: Index and Information


7.1: Index

(Due to writeup size, the index is only available in the stand-alone final section.)


7.2: Thanks

Following are some people that pointed out some errors in this and/or contributed in some other way. If I forgot to list you here, it is probably because I don't like you. (Actually, you just slipped my mind. Sorry. (/msg me))

resiak
for pointing out that Firefox put its own quotes around <q> (which led me to seeing that another browser also put quotes, which made me check the specs for that point)
in10se, baffo(???), and others
for giving more detailed information for individual writeups on tags: abbr acronym b big blockquote br cite code dd del dl dt em h1 h2 h3 h4 h5 h6 hr i ins kbd li ol p pre q s samp small strike strong sub sup tt u ul var
General Wesc
for reminding me of "justify" in <p align="justify"> (go me, for having a response time of "only" about 3.5 months)
mcc
for reminding me to look up what the "tt" in the <tt> tag really meant
Shro0m
pointed out I strong-ed the wrong letters in the expansion of kbd
jrn
suggested I mention a special use of italics (citation) that I don't cover until later (I added a note about this and link to the appropriate section.)
quamaretto
reminded me to clarify when the "escape sequence" (character entity) for closing square bracket, ] was needed (3.2: Using square brackets in Everything)
Gorgonzola
For essentially told me my opening was bad! (I stated you could node in plain text, but it was pointed out that it currently would lead to nukage if unchanged.)
Freaek
pointed out on of my typos
others
other people who pointed out problems, but I forgot to write down who they were (sorry)


7.3: Guide Information

guide creation
1999.12.17.n5
guide updated
2007-04-08(0) (Easter)
updates/changes since last time (2004-11-25 (4))
added start attribute to <ol> description
now b/i vs. strong/em argument essentially says it doesn't matter
updated 3.2: Using square brackets in Everything note about the closing square bracket, ]
changed opening, as unformatted writeups are now generally frowned upon
updated email address due to excessive spam volume on older one
cleaned source document somewhat (not user-visible), but HTML looks nicer in the syntax-highlighting code editor I use
guide author
N-Wing
feedback
Did you like this? Hate this (actually, if you hated this, why did you read this far?)? Have a question? Have a suggestion? If so, you can send me a message by typing
/msg N-Wing Your_Message
in the chatterbox, and hitting the "Talk" button, or using the talk area in my homenode.
Or, if you aren't a registered user here (why not? it doesn't cost anything), you can try email: hg7oce402 AT sneakemail DOT com
generator information
updated 2004.11.28.n0
generated
on April 8, 2007 at 11:42:59 PM EDT
source file size
57946 bytes
955 lines

Look at this stuff! My fingers hurts!
Note: most browsers don't understand all of these, and some browsers don't understand any of these.
(See HTML symbol reference for a more complete list --mcc)

&lt; --» <
&gt; --» >
&amp; --» &
&quot; --» "
&Aacute; --» Á
&Acirc; --» Â
&Agrave; --» À
&Aring; --» Å
&Atilde; --» Ã
&Auml; --» Ä
&Ccedil; --» Ç
&ETH; --» Ð
&Eacute; --» É
&Ecirc; --» Ê
&Egrave; --» È
&Euml; --» Ë
&Iacute; --» Í
&Icirc; --» Î
&Igrave; --» Ì
&Iuml; --» Ï
&Ntilde; --» Ñ
&Oacute; --» Ó
&Ocirc; --» Ô
&Ograve; --» Ò
&Oslash; --» Ø
&Otilde; --» Õ
&Ouml; --» Ö
&THORN; --» Þ
&Uacute; --» Ú
&Ucirc; --» Û
&Ugrave; --» Ù
&Uuml; --» Ü
&Yacute; --» Ý
&aacute; --» á
&acirc; --» â
&aelig; --» æ
&oelig; --» œ
&agrave; --» à
&aring; --» å
&atilde; --» ã
&auml; --» ä
&ccedil; --» ç
&eacute; --» é
&ecirc; --» ê
&egrave; --» è
&eth; --» ð
&euml; --» ë
&iacute; --» í
&icirc; --» î
&igrave; --» ì
&iuml; --» ï
&ntilde; --» ñ
&oacute; --» ó
&ocirc; --» ô
&ograve; --» ò
&oslash; --» ø
&otilde; --» õ
&ouml; --» ö
&szlig; --» ß
&thorn; --» þ
&uacute; --» ú
&ucirc; --» û
&ugrave; --» ù
&uuml; --» ü
&yacute; --» ý
&yuml; --» ÿ
&AElig; --» Æ
&OElig; --» Œ
&reg; --» ®
&copy; --» ©
&trade; --»
&pound; --» £
&laquo; --» «
&raquo; --» »
&plusmn; --» ±
&deg; --» °
&cent; --» ¢
&curren; --» ¤
&yen; --» ¥
&ordm; --» º
&sup1; --» ¹
&sup2; --» ²
&sup3; --» ³
&ordf; --» ª
&sect; --» §
&frac14; --» ¼
&frac12; --» ½
&frac34; --» ¾
&micro; --» µ
&para; --»
&brvbar; --» ¦
&iexcl; --» ¡
&iquest; --» ¿
&middot; --» ·
&uml; --» ¨
&acute; --» ´
&cedil; --» ¸
&mdash; --»
&ndash; --»
&macr; --» ¯
&not; --» ¬
&bull; --»
&hellip; --»

Log in or registerto write something here or to contact authors.