here is something nobody tells you when you put your first poem on the web: the browser doesn't care where your lines end.

you type the poem into notepad the way it's supposed to look. short lines. a stanza break. one word on a line by itself because it needs to be by itself. you save it, upload it, open it in netscape, and there it is, all of it, poured into one paragraph like soup. the line breaks are gone. the stanza break is gone. the word that needed to be alone is holding hands with the words on either side of it.

it isn't a bug. it's how html works. a browser reads the end of a line in your file as one space, and it reads ten spaces in a row as one space. it does that so it can wrap text to fit whatever window it's in, which is wonderful for prose and terrible for us.

i'm nineteen, a sophomore english major at a university in wisconsin, and i write poems. last spring i started putting mine on the web, and then i started reading other people's, and i saw the soup everywhere. good poems, too, poems that deserved better. so this is everything i've worked out about making a poem hold still on a web page. it isn't hard. it's about six tags.

the code below is shown the way you'd type it. the poems that go with it are on their own page: five of mine, each set a different way, with a note under each one saying how.

put <br> at the end of every line you want to end. that's it. that's most of it.

the bus is late again<br>
and the cold has gotten in<br>
under my scarf

you don't need a <br> on the last line of a stanza, because the next tag takes care of it.

<p> starts a new paragraph, and a browser puts a blank line in front of a new paragraph. a stanza is a paragraph's cousin, so that's what i use:

under my scarf
<p>
six of us stand in a row<br>

two <br>s in a row will also make a blank line, and some people swear by them. they look about the same. i like <p> because it says what it means.

a browser swallows extra spaces, but it won't swallow &nbsp;, the non-breaking space. it's a space the browser has to keep. four of them make a decent indent:

her hands were
    flour to the wrist

it isn't exact. &nbsp; is as wide as a space in whatever font your reader has, so indents line up only roughly from one line to the next. for a line that steps down the page, roughly is fine. for setting one word exactly under another, you need the next tag.

<pre> means preformatted. between <pre> and </pre> the browser keeps every space and every line break exactly as you typed them. no <br>, no &nbsp;. it's the closest thing on the web to a typewriter.

which is the price. it also switches your poem into a typewriter font, courier, every letter the same width, and it makes almost everything look like a carbon copy of a form. sometimes that's what a poem wants. usually it isn't.

and <pre> doesn't wrap. a long line runs straight off the right edge of a small window, and your reader has to scroll sideways to get the end of it, and nobody ever scrolled sideways for a poem. if you use <pre>, keep your lines short.

<blockquote> was meant for quotations, but every browser i've tried indents it from both sides, and a poem with air around it reads better than one pressed against the edge. put a blockquote inside a blockquote and you get more air.

<blockquote><blockquote>
the library, fourth floor
</blockquote></blockquote>

somebody on the html help board told me that's not what blockquote is for. he's right. i do it anyway.

on a big monitor, a paragraph can run a hundred and fifty letters across, and long lines are hard to read: your eye loses its place on the way back to the left. for a prose poem, or a page like this one, put everything in a table with a set width.

<table width="360">
<tr><td>
your words
</td></tr>
</table>

this whole page sits in a table 360 pixels wide. at 800 by 600 that leaves wide margins and lines of ten words or so, about like a book of poems.

if a line of your poem is longer than the reader's window is wide, the browser wraps it, and the part that wraps starts over at the left margin, where it looks exactly like a new line of the poem. nobody can tell your line breaks from the browser's. there isn't a tag for this. the only fix is the old one: break the line yourself before the browser does. if a line is too long for a small window, ask yourself whether it was two lines all along. (it usually was.)

don't center everything. i know Page Builder makes it easy. but when every line is centered, every line starts in a different place, and the reader's eye has to go looking for the beginning of each one. the left edge is where a poem's lines live. center the title if you want. leave the poem alone.

no pale text on a starry background. the stars are pretty. i know. but light gray letters on a black sky full of twinkles are letters i can't read, and if i can't read it i can't love it. dark letters, light page. it's boring and it works.

georgia reads well on a screen. it's the font this page is in, if you have it. Matthew Carter drew it for reading on a monitor, and it's one of the free fonts Microsoft gives away, so a lot of people do. ask for it with a backup, so anyone who doesn't have it gets times instead:

<font face="Georgia, Times New Roman">

one poem, one title. put the poem's name in the page's <title>, so it shows at the top of the window and in somebody's bookmarks. "my poems page 3" is not a title.

let it breathe. leave space around a poem, above and below. white space isn't empty. it's the part of the page where the reader gets to think.

this page has been read times since march.

if you've put a poem on the web and want to tell me how it went, or if a poem of yours is stuck in the soup and you can't get it out, write to me: [email protected]

last updated september 19, 1999
the words on these pages are mine. please ask before you borrow them.