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 [livejournal.com 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.

From:
Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

If you are unable to use this captcha for any reason, please contact us by email at support@dreamwidth.org


 
Notice: This account is set to log the IP addresses of people who comment anonymously.
Links will be displayed as unclickable URLs to help prevent spam.

Most Popular Tags

Style Credit

Page generated 2019-04-23 02:16 am
Powered by Dreamwidth Studios