E2 HTML tags

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   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  before each paragraph, and  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  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 , where x is left, center, right, or justify.

This paragraph starts with . As you can tell, it is easier to just make the opening tag a plain , since this is assumed by default.

This has  as the paragraph tag.

This right-justified line[s] begins with .

This paragraph opens with . 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  tag at the start of the bold text, and  at the end of the bold text.
To make something italics, put  at the start of the italics text, and  at the end of the italics text.
If you guess you should use  before and  after what you want to be underlined, you would be correct.
For example,
This is bold, this is italics, this is both. This sentence is underlined.
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:
Never do this!
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  tag before the strong text, and  after it. Most browsers show this as bold.
To mark something as having emphasis, put the  tag before the emphasized text, and  after it. Most browsers show this as italics.
For example,
This is strong and this 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:

most people do not override the default formatting
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 and em for general emphasis, and the others in special circumstances:

i for:
- introducing foreign words or phrases (pedo)
- titles of things such as aeroplanes, boats, (USS New Jersey) and horseless carriages
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  and  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  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 and <big>big</big>.
show as:
Small and big.
Multiple nestings, like:
Very 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>VERYTHING<big><big> 2 HTML T</big></big>AGS

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  should be "super"; it messes up even experienced HTML-writers (like me, waaaahhh).
I like subscript and superscript.
With these tags, I like to also use the  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 ² and ³ 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 = b² - 4ac
you could write:
<var>d</var> = <var>b</var>2 - 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 ² 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 < 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, idiot~~Honored 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, idiot~~Honored 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:

& to show & (ampersand)
< to show < (less than)
> to show > (greater than)

You may find   useful when spacing is important. For example, I started this paragraph with "     " 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 squar

E2 HTML tags

See also: Editor Log: January 2005 , HTML symbol reference

Everything 2 HTML Tags

(A Guide to using HTML in E2.)