newly ancient

Poetry is one of the most expressive and creative writing formats. It allows plenty of artistic freedom and creativity. Historically, layout and style have been of great importance in poetry. In poetry, line and stanza breaks are extremely important as apposed to prose where line breaks can be moved with very little impact upon the writing. When taking poetry to the web, I (and others) feel that this styling and layout needs to be preserved. There are a number of ways to do this using XHTML and CSS. We will use XHTMLto create the semantic structure of our poem and CSS so it can keep up with the latest style. Just like in WordPress, let’s make sure that our code is poetry.

First off, we need to semantically structure the XHTML source of our poetry. This could be achieved using <p>, <ol>, or <pre>. All of these methods have their advantages which we can see. However, some are more semantic than others.

Paragraphs

You could structure each stanza into a <p> tag and add line breaks by using a <br /> tag. While this looks fine, it isn’t really entirely semantic since lines don’t really carry enough importance. You are really only structuring the line breaks, not lines, in this approach. Also, screen readers generally do not place enough emphasis on a line break created by <br /> so entire stanzas may be read as one sentence. Still, this is probably the easiest approach and would look something like this:

Listed

In some ways, poetry could be though of as an ordered list of lines. Using a list emphasizes the importance of each line greatly. However, poetry isn’t really a list - this is not the semantically correct way to do it. However, if you are really set on the importance of each line you might want to put the poem in an ordered list. This method might be useful if you were teaching an English class and wanted to easily reference each line. If you do want to reference the lines easily you might do it like this:

Formats Away!

Code is poetry -#. And since code is made with <pre><code> it makes sense that poetry should use <pre> too. To create the easiest and most semantic solution I think it would be best to enclose each stanza in a <pre> tag. The <pre> tag designates preformatted text. A poem certainly falls into this category since we are preformatting the line breaks and stanzas rather than leaving it up to the user agent to decide how it should be formatted. Most screen readers will interpret line breaks enclosed within <pre> correctly by pausing and making it clear that each line is separate. Besides being the best way to do it semantically, a <pre> also makes it the easiest to maintain and change poetry - there are no messy <br /> tags to move. Using <pre> we can create a semantic solution:

In the future, we could use the line element to provide greater control over each line and add another level of importance to the layout of poetry. However, this will not be supported until XHTML 2.0.

The Latest Style

Bad writing lacks style and voice. For poetry, you’ll have to provide the voice but we can add some style to it. Now that we have our semantic XHTML, we turn to CSS to make our poetry look great. To start with, we add a style to the containing div. In order for the poem to appear separated and have a slight shadow you might use something like this:

Once the container is styled, we can make the stanzas appear the way we want. This is where we specify a font since many browsers will set a special font for the <pre> tag. We also ensure that white space is interpreted correctly. We should add this style to our <pre> tags.

Things should be looking pretty rosy now. You may want to add some additional fanciness by styling the first letter or line of each stanza or placing special emphasis on a stanza. With all our sweet styles added on we will end up with this beautiful poem.

By using <pre> tags to semantically structure our stanzas and using CSS to make it look pretty we have ensured that none of the authenticity of our poetry will be lost when it is translated to code. This is the way that I believe poetry should be created although other methods certainly have valid arguments. If you have another idea or think that poetry should be created using some other method, please speak up. Remember, just as code is poetry, your poetry must act like code.