Arms A Short Primer on HTML Tagging in LiveJournal

LJ-Specific Tags
Tag Explanation
<lj user="username"> Displays username as a link to their LJ
<lj-cut> Places any following text after a cut, which will display as "Read more..." until clicked upon
</lj-cut> Ends the cut, so that any following text is displayed
<lj-cut text="text you want"> Customizes the text displayed in the cut link, so it's not just the boring "Read more..."

Simple HMTL Tags That Work in LJ
Tag Explanation Example
<b>text</b> Bolds the text Bold Text
<i>text</i> Italicizes the text Italic Text
<u>text</u> Underlines the text Underlined Text
<small>text</small> Displays the text in a smaller font Small Text
<a href="URL">text</a> Turns the text into a link to the URL Link
<img src="URL"> Inserts the image hosted at URL 
You can also combine the href and img tags:
<a href="URL"><img src="URL"></a> 

Horizontal Rule and Blockquote

What if you don't just want to underline text, but want a line drawn across the entire page? In that case, you could use a horizontal rule. Insert the code <hr> where you want your line, and you get one of these:

And if you want a large chunk of text to be indented from both the left and right margins you could use <blockquote>text</blockquote> to create an effect like this.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc cursus convallis laoreet. Sed sollicitudin erat quis tellus fermentum imperdiet. Etiam luctus augue vitae leo semper sed posuere lacus imperdiet. Fusce scelerisque lacinia hendrerit. Duis vitae dapibus lacus.

You do know about lorem ipsum, right?

You can also combine and nest blockquotes and horizontal rules to create a variety of effects.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec dolor non metus pretium vulputate vitae et sapien. Suspendisse ac odio sed nisl bibendum viverra. Praesent malesuada varius orci vel pulvinar. Duis egestas ultrices mattis. Nunc fringilla, sem nec dapibus ultricies, quam ante faucibus justo, non molestie odio felis sit amet libero.

Ut tristique venenatis iaculis. Fusce volutpat enim sit amet ligula gravida venenatis. Duis urna felis, sodales vitae cursus a, tristique eu felis. Praesent egestas aliquam neque quis congue. Donec ante sapien, rhoncus sed dapibus eget, hendrerit eu nisi.
Quisque vehicula ultrices mauris a sagittis. Fusce a tellus dolor. Phasellus sollicitudin nisi a ligula pharetra volutpat. In hac habitasse platea dictumst. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc elementum ultricies sollicitudin. Suspendisse molestie cursus risus laoreet pellentesque.

Mauris in nisl libero. Etiam eu sem tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed egestas, augue quis eleifend aliquam, magna lacus pellentesque nisi, sit amet rutrum turpis elit et dolor. Maecenas velit nisl, iaculis non suscipit vel, hendrerit a sem.

Aliquam vel quam urna, sed lacinia augue. Nullam volutpat mauris quis urna aliquet placerat. Nam quis fermentum purus. Vestibulum ut lacus sem, at mattis augue. Cras tristique vulputate tincidunt. Fusce a orci eu quam euismod lobortis a ut metus. Vestibulum rutrum sapien ac elit euismod adipiscing.

Nulla volutpat dictum blandit. Nam porttitor dui et sem molestie dictum. Mauris quis lectus purus, ac suscipit erat. Cras fringilla pulvinar odio auctor fringilla. Integer in nulla vitae velit suscipit egestas. Sed dapibus, tellus a imperdiet sollicitudin, ante augue pulvinar lacus, eu interdum neque nunc at sem. Cras consectetur nibh non dui dignissim cursus. Praesent vestibulum diam a neque congue viverra.
Etiam condimentum malesuada massa id congue. Duis vel magna sit amet massa facilisis dapibus. Nam vel scelerisque enim. Sed ipsum sem, rhoncus non ornare eget, venenatis ut enim. Duis eleifend sapien at lacus malesuada eget gravida est pellentesque.
Pellentesque vel nunc ac purus imperdiet faucibus. Aenean lectus lectus, iaculis eu posuere et, adipiscing ac turpis. Donec fermentum porttitor diam sit amet vestibulum. Vivamus eget diam in neque cursus auctor a eu leo. Nunc condimentum diam id lectus rutrum luctus. Vivamus et venenatis massa.


What if you want to control the spacing of images or other elements? Well, you might want to use a table. Tables can seem tricky if you're new to them. But after a while you'll realize how easy they are.

So here's a sample table (with simplified URL's)
  <td><a href="URL1"><img src="IMG1"></a></td>
  <td><a href="URL2"><img src="IMG2"></a></td>
  <td><a href="URL3"><img src="IMG3"></a></td>
  <td><a href="URL4"><img src="IMG4"></a></td>
  <td><a href="URL5"><img src="IMG5"></a></td>

Keep in mind that "tr" stands for "table row", and "td" for "table data". Also, you don't actually need to use the fancy indenting. But I find it helps to keep track of the coding so I don't forget to close any tags.

And here's what the above table could actually look like.

So you might ask yourself, why not just code the above like so...
 <a href="URL1"><img src="IMG1"></a> <a href="URL2"><img src="IMG2"></a> <a href="URL3"><img src="IMG3"></a> <a href="URL4"><img src="IMG4"></a> <a href="URL5"><img src="IMG5"></a>
... all in one line of code?

Well, you could, and it would look like so.

But if you do it that way, there's nothing to stop the display from inserting line breaks into the middle of your code, wherever there's a space. To see what I'm talking about, resize this window to only a couple of inches wide. You'll see that the first example all stays on the same line, even if the window isn't wide enough. While the second example wraps to a new line when the window becomes too narrrow.

So why would you care about such a thing? Well, you might not. But if you do, using a table gives you much greater control over exactly how things display.

Plus, there are all sorts of modifiers you can use within the <table> and <td> tags to make your table cells behave in different ways.

Example 1:

Example 2:

Example 3:

If you want to see how I've gotten those results, view the code for this page and search for "Example 1", "Example 2", etc. to find the correct section of the code.

If you'd like to see some even more complicated tables, look for other places in this page where I've used tables to force the text/indentation formatting I wanted.

© 2007-2009 Jessica I. Clark
Permission to print a copy for your own use freely given. Please contact me for permission to reprint or distribute.
Welcome Prticles Portfolio