All parts of this HTML guide for Everything 2 include:
(all chapters)   |   Overview/Contents/Index   |   Tags and Starting New Lines   |   Character Formatting   |   Special Characters   |   Lists   |   Giving Credit Where Credit is Due   |   Miscellaneous Tags   |   EOF: Index and Information   |   Tables   |   (Quick Start)


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. :)


previous: Chapter 1: Tags and Starting New Lines     |     next: Chapter 3: Special Characters

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