mdlbear: the positively imaginary half of a cubic mandelbrot set (Default)
[personal profile] mdlbear

Since I've noticed that a couple of new folks have either joined LJ, or posted after a long absence (waves at [ profile] super_star_girl), 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 &amp; for "ampersand" (&), &lt; for "less than" (<), and &gt; for "greater than" (>). Another handy one is &nbsp; 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.

Date: 2006-08-20 02:01 pm (UTC)
madfilkentist: Photo of Carl (Tux)
From: [personal profile] madfilkentist
My own opinionated opinions on this, specifically as it applies to LiveJournal:

Using <html>, <head>, <title>, and <body> is simply wrong in a LiveJournal post, since you're embedding HTML in an existing page. I imagine LJ strips them out if you add them, though.

If you do detailed HTML formatting, including <p> and <br>, turn off auto-formatting. It will mess you up by adding extra line breaks.

The idea that <i> and <b> are considered "cheating" is a relic of the 20th century. Originally these were supposed to be typographic tags, and <em> and <strong> were considered stylistic tags. In principle this distinction could be upheld using CSS. But in fact people use <em> and <strong> as a puristic way of getting italics and boldface, and it's hard to remember which is which.

In HTML, it's absolutely correct to leave certain tags, such as <li> and <hr>, unclosed. However, this will lead to incompatibility with XHTML. On the other hand, the construct <tag/>, signifying a self-closing tag, is illegal in strict SGML-compatible HTML -- but I think every current browser will accept it. It's also necessary if you want XHTML-compatible HTML.

Date: 2006-09-01 10:02 pm (UTC)
From: [identity profile]
Wow just what I needed I knew finding my way back to fandom was a good thing.

Most Popular Tags

Style Credit

Page generated 2019-02-20 03:23 am
Powered by Dreamwidth Studios