Help with HTML Tags & Special Characters


HTML Tags

You may include HTML tags in your entries to certain fields. Not all tags are permitted, however. To help keep the Web pages created with Critical Tools readable, navigable, and visually consistent, your use of HTML is limited to six basic tags:

<A HREF="URL">Anchor a link to another Web page</A>

<B>Bold Text</B>
<I>Italicized Text </I>
<U> Underlined Text </U>

<BR> Line Break
<P> Paragraph Break

The commands above are linked to more detailed information below. Just click on the command tag to learn more about what the tag does and how to use it.


Special Characters

Certain characters--such as the brackets (<, >) and the ampersand (&)--have a special meaning within the HTML scripting used to create Web pages. Other characters--such as diacritical marks, many of which are common in foreign words and names--are not available on standard keyboards. Curly quotation marks (as opposed to " and '), which you may inadvertently copy from another document as an entry for a field, are notorious for showing up on the resulting Web page erroneously, or not at all. To include "special characters" in those Web pages created by Critical Tools, you'll need to enter them long-hand, as it were, with what are called entity references.

An entity reference is a string of characters beginning with an ampersand (&), followed by the special character's name in abbreviated form, and ending with a semicolon (;). Entity references are case-sensitive, which makes sense if you think about it; you want to be able to distinguish between an Ä (specified by &Auml;) and an ä (&auml;).

Below is a table of those special characters that may be most useful. To use a special character on a Web page create by Critical Tools, follow these steps:

  1. find the special character in the table;
  2. highlight the corresponding entity reference by locating the cursor just before the ampersand (&), holding down the mouse button, dragging to the right across the entire string including the semicolon (;), then releasing the mouse button;
  3. pull down your browser's Edit menu and select Copy (or use your computer's shortcut equivalent);
  4. by clicking your browser's Back button, return to the former Web page and locate the appropriate input field where you wish to include the special character;
  5. pull down your browser's Edit menu and select Paste (or use your computer's shortcut equivalent).
Of course, you may also simply look up the special character's entity reference below, memorize it, then type it in wherever you'd like the special character to appear.

If the character in any of the first cells (under "Char") does not match the corresponding description, or does not appear at all, your browser does not support that entity reference. (The one exception is the nonbreaking space, which shows up as an invisible character.) You may want to consider updating your browser to a more recent version.

Char Description Entity Ref
<Less than&lt;
>Greater than&gt;
&Ampersand&amp;
 Nonbreaking space&nbsp;
¡Inverted exclamation&iexcl;
¿Inverted question mark&iquest;
·Middle dot&middot;
«Left angle quote&laquo;
»Right angle quote&raquo;
Paragraph sign&para;
§Section sign&sect;
©Copyright&copy;
®Registered trademark&reg;
¨Umlaut&uml;
¯Macron accent&macr;
´Acute accent&acute;
¸Cedilla&cedil;
­Soft hyphen&shy;
ÀCapital A, grave accent&Agrave;
àSmall a, grave accent&agrave;
ÁCapital A, acute accent&Aacute;
áSmall a, acute accent&aacute;
ÂCapital A, circumflex accent&Acirc;
âSmall a, circumflex accent&acirc;
ÃCapital A, tilde&Atilde;
ãSmall a, tilde&atilde;
ÄCapital A, dieresis or umlaut mark&Auml;
äSmall a, dieresis or umlaut mark&auml;
ÅCapital A, ring&Aring;
åSmall a, ring&aring;
ÆCapital AE dipthong (ligature)&AElig;
æSmall ae dipthong (ligature)&aelig;
ÇCapital C, cedilla&Ccedil;
çSmall c, cedilla&ccedil;
ÈCapital E, grave accent&Egrave;
èSmall e, grave accent&egrave;
ÉCapital E, acute accent&Eacute;
éSmall e, acute accent&eacute;
ÊCapital E, circumflex accent&Ecirc;
êSmall e, circumflex accent&ecirc;
ËCapital E, dieresis or umlaut mark&Euml;
ëSmall e, dieresis or umlaut mark&euml;
ÌCapital I, grave accent&Igrave;
ìSmall i, grave accent&igrave;
ÍCapital I, acute accent&Iacute;
íSmall i, acute accent&iacute;
ÎCapital I, circumflex accent&Icirc;
îSmall i, circumflex accent&icirc;
ÏCapital I, dieresis or umlaut mark&Iuml;
ïSmall i, dieresis or umlaut mark&iuml;
µMicro sign&micro;
ÑCapital N, tilde&Ntilde;
ñSmall n, tilde&ntilde;
ÒCapital O, grave accent&Ograve;
òSmall o, grave accent&ograve;
ÓCapital O, acute accent&Oacute;
óSmall o, acute accent&oacute;
ÔCapital O, circumflex accent&Ocirc;
ôSmall o, circumflex accent&ocirc;
ÕCapital O, tilde&Otilde;
õSmall o, tilde&otilde;
ÖCapital O, dieresis or umlaut mark&Ouml;
öSmall o, dieresis or umlaut mark&ouml;
ØCapital O, slash&Oslash;
øSmall o, slash&oslash;
ßSmall sharp s, German (sz ligature)&szlig;
ÙCapital U, grave accent&Ugrave;
ùSmall u, grave accent&ugrave;
ÚCapital U, acute accent&Uacute;
úSmall u, acute accent&uacute;
ÛCapital U, circumflex accent&Ucirc;
ûSmall u, circumflex accent&ucirc;
ÜCapital U, dieresis or umlaut mark&Uuml;
üSmall u, dieresis or umlaut mark&uuml;
ÿSmall y, dieresis or umlaut mark&yuml;
÷Division sign&divide;
°Degree sign&deg;
±Plus or minus&plusmn;
¤General currency sign&curren;
¢Cent sign&cent;
£Pound sterling&pound;
¥Yen sign&yen;

Thanks to the creators of http://www.natura l-innovations.com/boo/doc-charset.html, from which this table was culled.



Permitted HTML Tags in Detail

The <A HREF> Anchor Tag

To create a link to another Web page, use the <A HREF> anchor tag. Here's the standard format:

<A HREF="URL">Word or Phrase You Want Underlined as a Link</A>

where URL is the full (external, not relative) site address of the page you wish to link to, starting with "http://" (e.g., the URL for the Critical Tools Home Page is http://www.cwrl.utexas.edu/~criticaltools/index.html). So you could create a link to the Critical Tools Home Page by typing:

<A HREF="http://www.cwrl.utexas.edu/~criticaltools/index.html">Critical Tools Home Page</A>

in which case, the link would look like this:

Critical Tools Home Page

Or if, instead, you used the <A HREF> anchor tag in a descriptive sentence like this:

Click <A HREF="http://www.cwrl.utexas.edu/~criticaltools/index.html">here</A>to link to the Critical Tools Home Page.

it would show up on the browser like this

Click here to link to the Critical Tools Home Page.

Note that the word "here" becomes the underlined link because it is the only text between the <A HREF> and </A> tags.

You will find that Critical Tools pages often use a URL itself as a link. The HTML for such a link would look something like this:

Link to the Critical Tools Home Page at <A HREF="http://www.cwrl.utexas.edu/~criticaltools/index.html">http://www.cwrl.u texas.edu/~criticaltools/index.html</A>.

This format allows whoever reads your page or entry to get a sense of where the link will go, to write down the URL for future reference, or to copy-and-paste the URL elsewhere.


The <B>, <I>, and <U> Style Tags

The use of <B>, <I>, and <U> tags to style text is very straightforward. Simply insert a <B> before and a </B> after any text you wish to embolden, an <I> before and a </I> after any text you wish to italicize, or a <U> before and a </U> after any text you wish to underline.

So if you wanted to post a description which would look like this:

This page includes dozens of great links regarding Mary Shelley's novel Frankenstein!

you would type it out, including HTML Style Tags, like this:

This page includes <B>dozens of great links</B> regarding Mary Shelley's novel <I>Frankenstein</I>!

Note that the closing </I> tag goes before the exclamation point, so that only the novel's title is italicized. If you preferred to underline your book title, you would substitute <U> and </U> tags for the <I> and </I> tags like this:

This page includes <B>dozens of great links</B> regarding Mary Shelley's novel <U>Frankenstein</U>!

and the resulting post would look like this:

This page includes dozens of great links regarding Mary Shelley's novel Frankenstein!

Because most browsers identify links by underlining them, you may wish to avoid confusion by limiting your use of the underline tag.


The <BR> and <P> Break Tags

The HTML line break and paragraph break tags are <BR> and <P>, respectively. Unlike <A HREF>, <B>, <I>, and <U>, each of which requires a corresponding closing tag, the <BR> and <P> break tags may be used alone, without closing tags.

The <BR> tag executes a line break in the same way your computer's RETURN key does. The <P> tags has a similar effect, but inserts a blank line as well. Every <BR> tag executes a carriage return, but multiple consecutive <P> tags do not have a cumulative effect. A sequence of five <P> tags will insert only a single blank line, just as a single <P> tag would. So if you typed, say, a message forum response like this:

Don't mind<P>me. I'm just <BR><BR>playing around<BR>with some HTML<P><P><P>tags.

it would show up, after you'd posted your response and reloaded the page, like this:

Don't mind

me. I'm just

playing around
with some HTML

tags.

Using break tags, you could even enter a poem--a Sapphic fragment, say--on a single line. The <BR> tags signal line breaks, while <P> tags divide what will show up as stanzas:

Dream, on your one dark wing,<BR>come circling<P>whenever sleep<BR>descends on me<P>and by your power covert keep<BR>the memory

becomes

Dream, on your one dark wing,
come circling

whenever sleep
descends on me

and by your power covert keep
the memory.