Here are a couple of little tricks that may keep you from tearing your hair out in frustration, and in any case will make your posts look better.

Tip the first: Make beautiful poetry with no effort.

There are two obvious ways to post poetry: enclose it in <pre>...</pre> tags (which tells the browser that it's preformatted, so it should leave your line breaks alone), or tediously add a line break tag -- <br> -- to the end of every line. Unfortunately, preformatted text uses a monospaced font, which is great for code and concrete poetry, but really doesn't look very good. And adding line breaks is just tedious.

There is a third way: use

<blockquote style="white-space: pre-wrap;" >to wrap your poem. </blockquote>

This tells your browser to keep spaces and line breaks the way you want them, but continue using the same font as the rest of your page.

There's one subtlety: that start tag is pretty long, but if you start your poem on the following line there will be an annoying extra blank line at the top. So do what I did up there, and start a new line before the >. It turns out that you can replace spaces with newlines anywhere outside of quotes.

That brings me to the next tip:

Tip the Second: Don't let your word processor try to help.

A lot of people compose their blog posts using a word processor, and paste them into the "post" form. If you don't, and aren't using some kind of posting client that lets you save your work any time you want to, you should. Especially if you have cats. But there's a problem. Word processors want to help you create great-looking documents. And that's a problem if you're trying to write HTML.

One thing word processors may try to do is to replace all your quotation marks with “curly” quotes (also called “smart” quotes), instead of using "straight" quotes. That's great except for when you're trying to enter a link, or one of style attributes I just showed you up above. A browser won't recognize them. So instead of

<a href="https://steve.savitzky.net">this</a>

you get

<a href=“https://steve.savitzky.net”>this</a>

See the difference? You may have to zoom in a little. Hover over the links. You'll see that your browser thinks that it's looking at a local link, because it doesn't start with https://, it starts with “https://! Oops!

Another thing I've seen word processors and some other programs do is, behind your back, replace "<" and ">" characters with "<" and ">". Those weird things are called "character entities", and they're HTML's way of forcing the browser to show something that looks like "<" without letting it interpret it as part of a tag. That probably isn't what you wanted, unless you're trying to write math inequalities or an article about how to write HTML.

Yet another problem happens because word processors use proportional spacing, so that your post looks to you the way it's going to look in a browser, more or less. The problem happens because some characters are really small in proportional-spaced fonts, so it's hard to select exactly the text you wanted to, and easy to overlook stray spaces and periods if they get pasted into your links by mistake.

That's why programmers use text editors with fixed-width fonts, and rely on programs like web browsers and LaTeX to make their pages look good when you read or print them.

 

By the way, I did a little searching and found The Mandelbear's Rough Guide to HTML, from back in 2006. It's still mostly good advice.