Use HTML tags to turn a drab block of text into an interesting, attractive, and effective sales tool.
As a seller on eBay, you’re expected to wear a lot of hats: diplomat, market researcher, salesperson, and yes, even web designer. Since eBay auctions are web pages, your description area can be decorated with the same fonts, colors, images, links, and tables found on any other web site.
Tip
If you’re already familiar with HTML, you’ll probably want to skip this primer and just use it as a quick-reference. The rest of the hacks in this chapter contain more meaty HTML code.
For many sellers, the introduction to HTML comes in the disappointment of seeing a carefully formatted description seemingly mutilated by eBay. For example, this text:
Antique steam shovel toy:
real working treads
working shovel, turn crank to raise
glossy red lacquer
in immaculate condition!will look like this when viewed on an eBay auction page:
| Antique steam shovel toy: real working treads working shovel, turn crank to raise glossy red lacquer in immaculate condition! |
The fault lies not with eBay, but with the way web browsers interpret plain text. All spacing, alignment, and line breaks are effectively ignored in favor of the HTML code that is the basis of formatting in all web pages.
HyperText Markup Language (HTML) consists of plain text interspersed
with markup tags. A tag is a special formatting
keyword enclosed in pointy brackets (also known as carets and
greater-than and less-than symbols). For instance, simply place the
<br> tag in your text to insert a line
break, or <p> to insert a paragraph break.
For example:
real working treads<br>working shovel, turn crank to raise<br>glossy red lacquer
Tags that modify text actually require two parts: a tag to turn the
formatting on and another to turn it off. For example, the
<center> tag, used to center-justify text
and images, requires a corresponding
</center> tag later on to restore the
default left justification. Other tags that work like this include
<b>bold</b>,
<i>italics</i>, and
the <table></table> structure, all
described in the next sections.
Table 4-2 shows some of the more tags[10] you’ll use in your auction descriptions, and how they’ll appear on the auction page.
Table 4-2. HTML tags that affect spacing and alignment
|
Goal |
HTML Code |
Preview | ||
|---|---|---|---|---|
|
Line break |
|
| ||
|
Paragraph break |
|
First Line Second Line | ||
|
No break |
|
| ||
|
Horizontal line, centered |
|
First section —————— Second section | ||
|
Center-justify |
|
In the middle | ||
|
Right-justify |
|
way over | ||
|
Indent |
|
See the next table | ||
|
Start a bulleted list (unordered list) |
|
| ||
|
Start a numbered list (ordered list) |
|
| ||
|
Display preformatted text with all line breaks and spacing |
|
| ||
|
Display text in a scrolling marquee |
|
w! Bid No |
So using some of these tags, we can fully reproduce the steam shovel description as intended:
|
HTML Code |
Preview |
|---|---|
|
Antique steam shovel toy: <blockquote>real working treads<br>working shovel, turn crank to raise<br>glossy red lacquer</blockquote> in immaculate condition! |
Antique steam shovel toy: real working treads working shovel, turn crank to raise glossy red lacquer in immaculate condition! |
Better yet, let’s use bullets:
|
HTML Code |
Preview |
|---|---|
|
Antique steam shovel toy: <ul><li>real working treads<li>working shovel, turn crank to raise<li>glossy red lacquer</ul> in immaculate condition! |
Antique steam shovel toy:
in immaculate condition! |
Note that the individual tags don’t have to be on separate lines, but it would sure make the code easier to read. Table 4-3 shows the commonly used HTML tags that affect the appearance of text.
Table 4-3. HTML tags that affect fonts and appearance
|
Goal |
HTML Code |
Preview |
|---|---|---|
|
Bold |
|
Shipping is Free |
|
Italics |
|
it’s really important |
|
Subscript |
|
Drink H2O |
|
Superscript |
|
Turn 180o |
|
Set the font |
|
|
|
Set the font size |
|
Big or small |
|
Set the font color |
|
It’s ! |
Tags can be combined to achieve just about any effect. Take care when nesting HTML tags, however, so that structures do not improperly overlap. For example, this is wrong:
The <i>coldest <b>winter</i></b> I ever spent
But this is correct:
was <i>a summer in <b>San Francisco</b></i>
Essentially, tags that are opened first should be closed last.
An
image of any size, from a tiny icon to a full-size photo of what
you’re selling, can be inserted anywhere in your
text using the <img> tag, like this:
<img src="http://pics.ebay.com/aw/pics/navbar/ebay_logo_home.gif">
In this case, the image URL points to a GIF file on eBay’s http://pics.ebay.com server that happens to be the eBay logo itself. See [Hack #59] for information on placing your photos on the Web and referencing them from your auctions.
By default, the image will appear inline with the text, which typically doesn’t look very professional. Instead, you can left-justify or right-justify the image and the text will wrap around it:
<img src="http://pics.ebay.com/aw/pics/navbar/ebay_logo_home.gif" align=right hspace=4 vpsace=7 border=1>
Also shown in this example are the hspace and
vspace parameters, which specify invisible
horizontal and vertical margins in pixels, and the
border parameter, which places a black line around
the image with the thickness also specified in pixels.
Hyperlinks are created by placing the <a>
(anchor) structure around ordinary text, like this:
<a href="http://www.ebayhacks.com/">click here</a>
Here, the text “click here” will
automatically appear blue and underlined in your auction, and when
clicked will navigate to the URL http://www.ebayhacks.com/. Make sure to
include the closing </a> tag to end the
hyperlink.
Warning
Always test each and every one of your links before placing them into your auction descriptions. The last thing you want is 20 confused bidders emailing you because you mistyped a URL in one of your links.
Of course, you don’t want your bidders to click a
link and leave your auction, never to return. To have the link open
in a new window, leaving your auction description window intact,
include the target="_blank" parameter:
<a href="http://www.ebayhacks.com/" target="_blank">click here</a>
Note that the <img> and
<a> tags can be combined to make clickable
images; see [Hack #60] for details.
Tables
are easy to create and are a great way to organize information in
your auction descriptions. A table is defined with a single
<table></table> structure with one or
more <tr></tr> and
<td></td> structures contained
therein. For instance, this code defines a simple table with two rows
and two columns:
<table width=90% border=1>
<tr>
<td>Color:</td>
<td>red lacquer with chrome trim</td>
</tr>
<tr>
<td>Dimensions:</td>
<td>3 inches high, 4 inches long</td>
</tr>
</table>Each <tr></tr> structure defines a row
in the table, and each <td></td>
structure defines a single table cell inside that row. Once a row is
complete, another row begins. The resulting table looks like this:
Note that text and images should never be placed outside the
<td> tags. Use indents, like in the example
above, to make the code more readable and to help you keep track of
your rows and columns.
Using nested tables, you can create a nice-looking box to highlight important information:
<table border=0 cellspacing=0 cellpadding=0 width=40% bgcolor=#000000>
<tr><td>
<table width=100% border=0 cellspacing=1 cellpadding=3>
<tr><td bgcolor=#CCCCCC align=center>
<b>Condition of this item</b>
</td></tr>
<tr><td bgcolor=#FFFFFF>
Brand new in the original box with all original paperwork.
<br>Batteries are not included.
</td></tr>
</table>
</td></tr>
</table>which should look something like this:
|
Condition of this item |
|---|
|
Brand new in the original box, with all original paperwork. Batteries are not included. |
The bgcolor parameter in the
<td> tag sets the background color; the
six-digit code is explained in [Hack #41].
Tables are also often used to make simple bars and stripes. For example, to include section headers that match those on eBay auction pages, use this code:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td bgcolor="#9999CC">
<img src="http://pics.ebay.com/aw/pics/x.gif" width=1 height=1>
</td></tr>
<tr><td bgcolor="#EEEEF8" nowrap>
<img src="http://pics.ebay.com/aw/pics/x.gif" width=6 height=1>
<font face="Arial" size="3"><b>
Your Title Goes Here . . .
</b></font>
</td></tr>
</table>Table cells with background colors set with the aforementioned
bgcolor parameter can be fine-tuned with
transparent, single-pixel images (like x.gif
here) used as spacers.
For more complicated page layouts, you may wish to use a graphical web page editor such as Netscape/Mozilla Composer (free from http://www.netscape.com or http://www.mozilla.org), HTML-Kit (free from http://www.chami.com/html-kit), or any word processor (Wordperfect, Word, etc.).
The problem is that web page editors are all designed to generate complete HTML pages, not snippets to be inserted into other pages, which means that the generated HTML code must be modified before it’s inserted into your auction description. Otherwise, your page may not display correctly and may even interfere with people’s ability to bid on your item.
Warning
If you’ve generated a page with a Microsoft Office application such as Word, Excel, or Powerpoint, the resulting HTML will be clogged with extraneous codes that should be removed. The easiest way to do this is to use the Microsoft Office HTML Filter, available for free at http://www.microsoft.com/downloads.
First, open the generated HTML file in a plain text editor (e.g.,
Notepad on Windows) so you can see the HTML tags. The actual body of
the page will be contained within a
<body></body> structure, so all you
need to do is delete everything before the opening
<body> tag and everything after the closing
</body> tag, as well as the tags themselves.
Then, select everything that’s left (Ctrl-A), copy
it to the clipboard (Ctrl-C), and paste it into the description field
of the Sell Your Item form at eBay (Ctrl-V).
eBay also provides a WYSIWYG auction description editor as part of the Turbo Lister auction listing tool; see [Hack #73]. But if you want to use the same design for all your auctions, you’ll still need to be somewhat familiar with HTML, so you can create clean code that can be used again and again.
[10] For a complete listing of all HTML tags, consult an HTML reference such as http://www.w3.org or HTML & XHTML: The Definitive Guide (O’Reilly).
Get eBay Hacks now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
