HTML (HyperText Markup Language) is used to create web pages. You can add HTML to your listings to make them appear cleaner and clearer on the page and improve the way your description looks.
You may want to review HTML Templates for Listings to help you get started.
How to use HTML tags to enhance your listings:
Spacing and Lines:
- Surround your paragraphs with the <p> </p> tags for a paragraph.
- The <br> tag starts a new line without skipping any space.
- To draw a line across the screen, use <hr> (for "horizontal rule").
| Tag | Usage in HTML | It will appear in listing as: |
| <p> </p> | <p> Sig 229 Elite® 9mm Cal!</p> <p> New and in Box! </p> |
Sig 229 Elite® 9mm Cal! New and in Box! |
| <br> | Sig 229 Elite® 9mm Cal! <br> You'll enjoy it! | Sig 229 Elite® 9mm Cal! You'll enjoy it! |
| <hr> | Sig 229 Elite® 9mm Cal! <hr> You'll enjoy it! |
Sig 229 Elite® 9mm Cal! You'll enjoy it! |
Different ways to create titles:
| Tag | Usage in HTML | It will appear in listing as: |
| <h2></h2> | <h2>Sig 229 Elite® 9mm Cal!</h2> | Sig 229 Elite® 9mm Cal! |
| <h3></h3> | <h3>Sig 229 Elite® 9mm Cal!</h3> | Sig 229 Elite® 9mm Cal! |
| <h4></h4> | <h4>Sig 229 Elite® 9mm Cal!</h4> | Sig 229 Elite® 9mm Cal! |
| <h5></h5> | <h5>Sig 229 Elite® 9mm Cal!</h5> | Sig 229 Elite® 9mm Cal! |
| <h6></h6> | <h6>Sig 229 Elite® 9mm Cal!</h6> | Sig 229 Elite® 9mm Cal! |
Enhancing words with bold and italics:
| Tag | Usage in HTML | It will appear in listing as: |
| <b></b> | <b>Sig 229 Elite® 9mm Cal!</b> | Sig 229 Elite® 9mm Cal! |
| <i></i> | <i>Sig 229 Elite® 9mm Cal!</i> | Sig 229 Elite® 9mm Cal! |
Adjusting your text size:
| Tag | Usage in HTML | It will appear in listing as: |
| <big> </big> | Buy <big>now</big> and lock in <big>your</big> win! | Buy now and lock in your win! |
| <small> </small> | Buy now! <small>Don’t miss out!</small> | Buy now! Don’t miss out! |
Using colors for text:
| Tag | Usage in HTML | It will appear in listing as: |
| <font color=color> </font> | Buy <font color=green> now</font> and lock in your win! | Buy now and you may win! |
| <font color=color> </font> | Buy <font color=blue> now</font> and lock in your win! | Buy now and lock in your win! |
Centering your text:
| Tag | Usage in HTML | It will appear in listing as: |
| <center> </center> | <center>Buy now!</center> | Buy now! |
Using numeric lists and bullet points:
- For an ordered or numeric list, begin with <ol>.
- For a bullet point list, begin with <ul>.
- All lists need a <li> tag before them and a </li> tag at the end.
| Tag | Usage in HTML | It will appear in listing as: |
| <ul> </ul> | My item is: <ul> <li>Factory New</li> <li>Never fired</li> </ul> |
My item is:
|
| <ol> </ol> | My item is: <ol> <li>Factory New</li> <li>Never fired</li> </ol> |
My item is:
|
Adding pictures to your listing:
Use the <img> tag and indicate the web address for the picture.
| Tag | Usage in HTML | It will appear in listing as: |
| <img> | <img src="https:// www.mydomain. com/images/ mypicture .jpg" width="100%"> | Your picture will appear in the Web browser at the spot where your tag is listed and the Width will help the image scale for different size browser windows. |
Although we do not allow videos to be embedded within listings, you can add a link to your video, and allow it to open in another window.
For more information on HTML syntax and how to create code-specific HTML tags, see w3schools.com HTML Tutorial.
Specifically restricted:
The following HTML tags are examples of tags GunBroker.com strips from listings due to the harm they could cause the website: <h1> <html> <head> <title> <form>
In addition, we do not allow Cascading Style Sheets (CSS), as hackers can use CSS maliciously for Cross Site Scripting (XSS).
Best practices for responsive design:
- Do not use large fixed width elements. Instead use relative widths for tables, images and dividers (divs).
- Simplify Layouts: content should not rely on a particular width. One column layouts work best for mobile displays.
To help you get started, browse HTML Templates for Listings.
Relative units instead of absolute measurement:
Do not use absolute measurements (fixed width) for your images, tables or containers. This will cause the content to be too wide for the viewport on a narrower device.
Instead, use percentages or max-width CSS properties. The content will scale to that width, improving text readability.
| For | Instead of this | Replace with this: |
| Tables<table> | width="800" | width="100%" for items using the full width |
| Images <img> | width="300" | width="30%" to specify for a smaller % |
| width="300" | style="max-width: 300px;" to set the max width | |
| Divs<div> | style="width: 800px;" | style="width: 100%;" for items taking the full width |
Responsive Design Resources:
HTML Code Editor:
A good, free program that will help you see code vs. text better is Notepad++ (for Windows). Unlike Notepad or WordPad, the code is in color (which you can ignore), and the text you will replace is in black. Mac Users can use TextEdit as a plain text editor.
Anytime you want to see what the file will look like: save the file, select run, launch in your browser.
We recommend you do this often to make sure you are satisfied with the design.
How to set up TextEdit as an HTML or plain text editor:
TextEdit for MacOSX renders HTML in rich text by default. You may change its preferences to act as a plain text editor for use in editing HTML files.
1. Open TextEdit.
2. Choose Preferences from the TextEdit application menu.
3. Under the New Document tab, click the Plain Text radio button for Format.
4. Under Open and Save tab, click the checkbox to "Display HTML files as HTML code instead of formatted text"
5. Deselect "add .txt extension" to plain text files.
6. Checkbox for "Preserve White Space" is selected.