How To... Format a Story with HTML

This short 'How to...' follows on from my essay about dialogue punctuation. In this I made a schoolgirl error with HTML formatting, which motivated me to write this piece.

Many Literotica authors write in a word processor - like Microsoft Word, or Libre Office - and then submit the resulting file (maybe a. docx or. rft) to the site. Literotica then converts the incoming document to HTML for publishing. If you don't know what HTML is there is probably a good way to find out, it begins with a 'G' and ends with an 'oogle.'

This generally works fine except not every type of formatting in your document will be supported in the eventual Literotica web-page. For example, if you make some text red in Word, or change the font to Helvetica, neither will make it through to the published story.

Given this, I - and some others - prefer to do our own formatting manually using HTML and pasting plain text into the submission text box. Literotica doesn't support all HTML tags. And it doesn't support CSS, which is typically used to format modern web-pages. But you can still do quite a lot with only a little knowledge.

To be crystal clear, this is an area that has already been covered, notably by Using Special Formatting in Stories written by Lucky back in 2022. But this otherwise admirable article is a little out of date, and there are a few other things to consider now in 2025. I'm going to try to cover these here.

Underline

I love being self-referential! The above title is what you achieve if you type in:

Underline

Let's cover some basics first. The odd-looking things with the angled brackets are called HTML tags. Many of these have a matched opening and closing tag like above. And the closing tag is normally the same as the opening one, save for a forward slash (/) after the first angled bracket. The opening tag says 'start using this formatting,' the closing one says 'stop using this formatting.'

So:

Plain, underlined, plain

gives you:

Plain, underlined, plain

But maybe I should step back, where exactly am I putting this text?

The Story text box

Here it would be useful to be able to include images, then I guess the layout changes according to whether you're on a PC, Mac or phone. Anyway, when you create a new story, or edit a work-in-progress story, you get a page with the title (or 'New Story') at the top. Beneath this is a text box labeled, 'Title,' guess what goes in there? Below this again is a larger text box labeled 'Story Text.' Below this is 'Or Upload story Text' which does what it says on the can, and may be what you have been using to date.

It's the 'Story Text' box that this article refers to. See those two diagonal arrows facing away from each other in its top right-hand corner? Click on those and you get a full page version of the box. I normally use this expanded view to paste my text into, as it's easier to check it pasted right.

This full page text box has another pair of blue diagonal arrows in its top right corner, but this time pointing at each other. This collapses the full page view back to the original one.

Preview & Publish

At the bottom of the new or edit story page, on the right-hand side, is a blue button labeled 'Preview & Publish.' This is useful as, if you click it, you get a preview of whatever you have entered in the Story Text box (as well as other stuff like the title and sub-title etc.). So, if you are using HTML formatting, you can use this feature to check you got it right (there are some slight nuances here, which I'll come back to later in a few different contexts).

If you are happy, you can press the 'Submit for Publication' button on the right at the bottom. If you are not, you can press the 'Make Changes' button on the left instead. This takes you back to the edit story page.

OK let's return to HTML tags...

Emphasis (Italics)

Here we have two ways to achieve the same thing. The original way to create emphasis was via:

Emphasis

which gives you:

Emphasis

However, has been deprecated in favor of so nowadays we should write:

Emphasis

which gives you:

Emphasis

No, I can't see the difference either, and Literotica still supports the old tag.

Here I want to come back to something I referenced as a subtlety above, tags with multiple paragraphs.

If you type:

What fire is in mine ears? Can this be true? Stand I condemn'd for pride and scorn so much? Contempt, farewell! and maiden pride, adieu! No glory lives behind the back of such.

And, Benedick, love on; I will requite thee, taming my wild heart to thy loving hand: if thou dost love, my kindness shall incite thee to bind our loves up in a holy band; for others say thou dost deserve, and I believe it better than reportingly.

Then in the final published story, the result is:

What fire is in mine ears? Can this be true? Stand I condemn'd for pride and scorn so much? Contempt, farewell! and maiden pride, adieu! No glory lives behind the back of such.

And, Benedick, love on; I will requite thee, taming my wild heart to thy loving hand: if thou dost love, my kindness shall incite thee to bind our loves up in a holy band; for others say thou dost deserve, and I believe it better than reportingly.

The second paragraph is not italicized. Instead you have to write:

What fire is in mine ears? Can this be true? Stand I condemn'd for pride and scorn so much? Contempt, farewell! and maiden pride, adieu! No glory lives behind the back of such.

And, Benedick, love on; I will requite thee, taming my wild heart to thy loving hand: if thou dost love, my kindness shall incite thee to bind our loves up in a holy band; for others say thou dost deserve, and I believe it better than reportingly.

To get:

What fire is in mine ears? Can this be true? Stand I condemn'd for pride and scorn so much? Contempt, farewell! and maiden pride, adieu! No glory lives behind the back of such.

And, Benedick, love on; I will requite thee, taming my wild heart to thy loving hand: if thou dost love, my kindness shall incite thee to bind our loves up in a holy band; for others say thou dost deserve, and I believe it better than reportingly.

But... and here is the kicker, in preview everything looks fine with the first approach, you only get the formatting error in the published story. This was the error in my previous How To... that spurred me to write this article.

It's the same with any other tag, each paragraph has to have its own opening and closing tags.

Boldface

Here we have the same situation as with emphasis, the old way to get boldface was:

Boldface

which gives you:

Boldface

However, has also been deprecated in favor of so nowadays we should write:

Boldface

which gives you:

Boldface

Again, I can't see the difference, and again Literotica still supports the old tag.

Keyboard Font

Before moving on to other areas, maybe you're wondering how I have made the HTML above have a different font, this is via another tag:

Keyboard Font

gives you:

Keyboard Font

What actual font is defined as keyboard varies with computer and browser.

Hyperlinks

First up, you can only link to other parts of Literotica, your own stories, other people's stories, competition / event announcements, forum threads etc. Linking off site is prohibited.

With that caveat:

Thank you to FrancesScott for beta reading my story.

will get you:

Thank you to FrancesScott for beta reading my story.

But please note you must use plain quotation marks "..." (ASCII 34) and not 'smart quotes' like “...” The latter will not work!

Lit Editor's Note: In the above example of hyperlinks, if you (the reader) click on the link, the new link opens on the same tab. So you need to click the back button to go to the original page. A workaround for the reader is to right click or hold the link (depending on PC or mobile) and "Open the link in new tab".

But there is one workaround from the "writer's" side. You (the writer) insert [ target="_blank"] (there is a space before target) after the closing quote of the URL. Now once you click on the link, it automatically opens in a new tab!

The above example becomes:

Thank you to FrancesScott for beta reading my story.

Now you can click on the following link and it opens in a new tab:

Thank you to FrancesScott for beta reading my story.

In other words, this is the format:

TextHere

Happy hyperlinking! (Don't link outside links please. : D)

Anchors

Hyperlinks are a subset of another tag called anchors (hence the ) you can define an anchor in one part of a web-page and have another part link to it by name. This might be good if you wanted to include links to footnotes or similar. However, as Literotica breaks your story up into multiple pages, this intra-page linking doesn't really work. I simply mention it for the sake of completeness.

Em Dash

This isn't a tag per se, not an angled bracket in sight, but it's useful to know the HTML code for an em dash, which is:

—

and gets you:

—

Alignment

This is a rather more complicated area. To start with, this legacy tag still works (for most things) on Literotica:

which gets you:

Centered text

Similarly you can use the also deprecated:

which gives you:

Centered text

Pretty much the same, right?

Again, you must use plain quotation marks "..." and not 'smart quotes' like “...”

But the preferred way to achieve this (absent CSS of course) is via paragraph tags as follows:

Centered text

which gives you:

Centered text

You can also do:

Right-aligned text

which gives you:

Right-aligned text

and:

Left-aligned text

which gives you:

Left-aligned text

which is generally the default anyway.

Alternating right and left-aligned text can be useful if - for example - you want to have a text / messenger conversation included in your story.

Blockquote

I have never used this pair of tags, but the article I mention at the beginning says that it works. I have had another author tell me the same. It certainly doesn't work in preview, so I am interested to see what happens with the below when published.

To be, or not to be, that is the question: whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles and by opposing end them. To die--to sleep, no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to: 'tis a consummation devoutly to be wish'd. To die, to sleep; to sleep, perchance to dream--ay, there's the rub: for in that sleep of death what dreams may come.