The Mandelbear's Rough Guide to HTML
Since I've noticed that a couple of new folks have either joined LJ, or posted after a long absence, and since I just spouted off a comment describing the basic HTML tags, here's another take on it, with the rough edges smoothed off.
Here are the essential tags for LJ. You can get away with nothing but these, and let LJ's automatic formatting take care of everything else.
Inside of paragraphs, <em> (emphasis), <strong> (bold), and occasionally <cite> (italics, used for citations) <code> (fixed-width), and <del> (strike-out). You can also use <i>, <b>, <tt>, and <s>, but it's considered cheating. <u> (underline) can also be used, but it's confusing given the almost universal convention that links are underlined. See what I mean?
<hr> (horizontal rule) and <img> (image) have their uses; they
are two of the three tags that do not need to be "closed" (see inside the cut).
<img> tags need two "attributes" between the "img" and the ">":
src="url-of-image"
to point to the image, and
alt="text"
to specify the text that a blind person
or search engine will see in place of the image. If an image is
just there as a spacer or decoration, you can use
alt=" "
.
The final essential tag is
<a href="url">anchor-text</a>, which makes a
link. The "a" comes from "anchor", for reasons that are now mainly
historical. On Livejournal, there are two more handy tags that turn into
special kinds of link: <lj user="username"> (which
doesn't need to be closed) links to a user's profile and journal, and
<lj-cut>...</lj-cut> cuts out a long block of text and
replaces it with a link. Add a text="link-text"
attribute to
replace the default "details".
First of all, don't worry too much about the <html>, <head>, <title>, and <body> tags. If you're on LJ or some other blogging system, they'll be supplied automagically. Most editors will put them in as well. If not, you can always copy them from some other page.
Secondly, almost all tags have to be "closed" -- if something starts with, for example, <foo>, you have to close it with </foo>, otherwise the browser won't know where to stop fooing. If you see a page that's all italics or bold, that's probably why. In practice you can get away with not closing paragraphs and list items, but it's not advisable. Browsers handle it OK, but some templating systems -- including LJ's -- have trouble. Tags like <br> that are "self-closing" can be marked with a slash before the final ">" (i.e., <br />) to make them XML-compatible -- this hybrid is called XHTML and you mostly don't need to worry about it.
The most essential tag is <p>, which sets off a paragraph. You mostly don't need it in LJ, which automatically turns the end of a line into a <br> tag, which "breaks" a line. <br> is one of the three tags that don't have to be closed. If you want to use <p>, or any of the fancy stuff mentioned here, on LJ, turn off auto-formatting or you'll get lots of extra white space.
The headings, <h1> thru <h6>. In practice I use <h1> only for page titles, and rarely if ever go down as far as <h4>.
The lists: <ul> and <ol> for bulletted (unordered) and numbered (ordered) lists, using <li> for list items; <dl> for "definition" lists, with <dt> for "defined terms" and <dd> for "definition data".
You can get an indented block of text, commonly used for long quotations, by enclosing it in <blockquote>...</blockquote>.
Tables add a whole level of complication, and are rarely worth the trouble unless (a) you really need a table, or (b) you want to make a pretty layout without using css styles. Just for reference, enclose the whole table in a <table>...</table>, and each row in <tr>...</tr>. Table headings are enclosed in <th>...</th>, and ordinary table data in <td>...</td>. You can spend lots of time tweaking tables to get them to look right. It's rarely worthwhile.
One more attribute is often handy: align="..."
. The value
can be "left"
, "right"
, or
"center"
, and you can use them on images, paragraphs, or
table data. To center a whole range of paragraphs, use
<div align="center">
And just for completeness, there are these things called "entities" that are used
to get special characters (like "<") into ordinary text. They all start with
an ampersand (&) and end with a semicolon (;). The most useful ones -- absolutely
essential, in fact -- are &
for "ampersand" (&),
<
for "less than" (<), and
>
for "greater than" (>). Another handy one is
for "non-breaking space" -- it looks like a space, but
the browser treats it as a letter and so won't allow it to turn into a line break. Good if
you want to keep an entire phrase, computer command, or tag example on one line.
So there you have it. For more details, all the rest of the tags and attributes I've left out, and an excellent reference, see The Bare Bones Guide to HTML.