Creating Simple Text Descriptions

For now, I'll assume that you can insert simple text formatting commands, like <strong> or <b> for boldface or <em> or <i> for italic. You can use these simple tags to highlight important words and phrases within your main description text.

That assumed, we'll jump right in and create some text descriptions (no titles yet) with very simple formatting.

Template 6.1. Centered Text

We'll start with a very simple all-text template, with centered default Times Roman text, as shown in Figure 6.1. This template is identical to the standard text-based eBay item description, except that the text is centered instead of being left-aligned. Some people prefer item listings to be centered on the page, which is why this is a popular approach.

Figure 6.1. Centered text.

Now, there are two ways to code this template. The first uses simple HTML and the <center> tag, like this:

<center> <p> This is the first paragraph of the description </p> <p> This is the second paragraph of the description </P </center>

The second approach uses Cascading Style Sheet (CSS) rules to define each paragraph with centered text, using the style attribute and the text-align: left declaration. Here's how this code looks:

<p style="text-align: center"> This is the first paragraph of the description </p> <p style="text-align: center"> This is the second paragraph of the description </p>

You get the same results with either approachand, in this instance, the simplicity of plain HTML may be preferable to the relative complexity of CSS. But in other instances, you'll find that CSS is a little more efficient, and a lot more accurate in how it defines various attributeswhich is why I present this template with both approaches.

Caution

Too much centered text becomes difficult to read. For that reason, try to avoid using too many long text paragraphs with this particular template.

Template 6.2. Left-Aligned Text with Bulleted List

When you're selling an item with a long list of dimensions, accessories, features, or benefitsor, in the case of music CDs, an extensive track listone neat way to present this type of information is in a bulleted list. Template 6.2, shown in Figure 6.2, contains such a list.

Figure 6.2. Left-aligned text with a bulleted list.

If you remember your HTML, you know that creating a bulleted list is relatively easy, thanks to the <ul> list container tag and individual <li> line item tags. Here's how to code it:

<p> This is the first paragraph of the description </p> <ul> <li>This is the first bullet</li> <li>This is the second bullet</li> <li>This is the third bullet</li> </ul> <p> This is the final paragraph of the description </p>

Template 6.3. Centered Text with Left-Aligned Bulleted List

What if you want to include a bulleted list within a description that uses centered text? Well, you probably don't want to center your bulleted list, as unaligned bullets look really strange. Instead, you want to left-align the bulleted list within the centered description text, as we do with Template 6.3 (shown in Figure 6.3).

Figure 6.3. Centered text with a left-aligned bulleted list.

Here you can see why CSS is so handy. We define each element on the page with its own distinct alignment. The text paragraphs (using the <p> container attribute) are defined with centered text, while the bulleted list (using the <ul> container attribute) is defined as left-aligned. Here's the code:

<p style="text-align: center"> This is the first paragraph of the description </p> <ul style="text-align: left"> <li>This is the first bullet</li> <li>This is the second bullet</li> <li>This is the third bullet</li> </ul> <p style="text-align: center"> This is the final paragraph of the description </p>

Template 6.4. Centered Text with Centered, Non-Bulleted List

Okay, so maybe you don't like the look of centered text with a left-aligned list. Just for you, Template 6.4 (shown in Figure 6.4) presents a non-bulleted list that's centered on the page, just like the rest of the text.

Figure 6.4. Centered text with a centered, non-bulleted list.

Creating a non-bulleted list involves a bit of a workaround, as the HTML standard doesn't include a code for non-bulleted lists. Instead, we use a single paragraph for the entire list, but put each list item on a separate line within the paragraph, using the <br> tag to force line breaks after each item. Here's how the code works:

<p style="text-align: center"> This is the first paragraph of the description </p> <p style="text-align: center"> This is the first list item<br> This is the second list item<br> This is the third list item </p> <p style="text-align: center"> This is the final paragraph of the description </p>

Template 6.5. Left-Aligned Text with a Section Divider

If you have two or more discrete sections within your description, you might want to visually separate the sections with horizontal rules or lines. That's what we do in this template, shown in Figure 6.5.

Figure 6.5. Left-aligned text with a section divider.

Caution

A horizontal line can serve as a kind of speed bump for anyone reading your listing. Make sure you really want the reader to pause as he moves from section to section, otherwise forgo the horizontal rule approach.

You add horizontal rules to your listings by using the <hr> code. Just insert the code between the two paragraphs you want to separate, as done in the following code:

<p> This is the first paragraph of the description </p> <hr> <p> This is the second paragraph of the description </p>

Note that in this template, the section divider rule extends across the entire page. To limit the width of the divider, you need to add a width attribute to the <hr> tag, as we'll do in Template 6.6.

Template 6.6. Centered Text with a Narrow Section Divider

Template 6.5 presented left-aligned text with a horizontal rule. In Template 6.6, shown in Figure 6.6, we apply the horizontal rule to centered text.

Figure 6.6. Centered text with a narrow section divider.

What's slightly different about this template is that we don't want the horizontal line to spread across the entire page. Sometimes you can improve readability by using a rule that is less wide than the rest of the listing, thus adding some white space on either side of the line. That's what we do here, by adding the width attribute to the <hr> tag, and defining the width at 50% of the available page width. Here's the code:

<center> <p> This is the first paragraph of the description </p> <hr width="50%"> <p> This is the second paragraph of the description </p> </center>