Best practice for Listings Formatting

Chris Horroll
Chris Horroll
  • Updated


Now that your contract is in place, it's time to get your listings on site.

You can follow the Best practice for New Homes listings guide to help you get your properties on site today. To really get more bang for your buck, formatting your content correctly will help to direct visitors to keywords and features within your listing very quickly.

ZooplaPro has a simple but effective formatting system to help showcase what's important in the text without needing any coding experience.

There are 4 main formatting codes you can use:

  1. <b></b> which makes text appear bold
  2. <u></u> which underlines text
  3. <i></i> which italicises text
  4. <li></li> which creates a bullet point 

These formatting codes are written in what's called HTML (Hyper Text Markup Language).  This is the standard markup language for documents to be displayed in a web browser.  

These codes are also called tags.  

Using <b></b> to bold text

Using <b></b> to bold text is a simple way to highlight key words and phrases you want to jump out at consumers on site. This should be used for paragraph headings, words or phrases that you wish to standout from the rest of the text. It is also very useful if you need to highlight development launch dates, changes to opening hours or health and safety notices.  You'll notice we use this when directing you to an action that needs to be taken, i.e. Click Save.  

To use this function, simply add <b> to the start of any word or phrase you would like to make bold and at the end, close the code with </b>.

So, for example, if you want to highlight the property has a garage you would write <b>garage</b>.

On site, this will appear without the <b></b> and only show garage.

Using this with full phrases is exactly the same <b>New Development in the UK</b> would show as New Development in the UK.

Using <u></u> to underline text

Using <u></u> allows you to underline text and is useful for splitting up property and development  information within the description. It can of course be used to highlight aspects of your listing you would like to stand out as above.  

It is used in exactly the same way as bold, added to the front and back of a word or phrase.

Using the same example, if you want to underline the word garage you would write <u>garage</u>.

On site, this will appear without the <u></u> and only show garage.

Using <i> </i> to italicise text

Using <i></i> to italicise words is best left for anything you would be adding as a footnote to the listings, for example T&Cs or disclaimers. It is a much finer style of text and would not be recommended for highlighting words or phrases contained within normal style text.  We use this to highlight another section, i.e. You can also access this from your Dashboard. 

As with the previous examples, <i></i> follows the same format. <i>Disclaimer - All images used are for illustrative purposes only</i> will show as Disclaimer - All images used are for illustrative purposes only.

Using <li></li>to create bullet points

If you want to create bullet points to create a list of features or room dimensions, using the code <li> is required. The li stands for "list item" and will align the list automatically so you do not have to add a tab or symbol in manually. 

There are 2 different techniques you can use to add bullet points to your listings. The most simple usage is to create an ordered list and write <li> before each word or sentence -

<li>Car parking available

<li>South facing gardens

<li>Coming Soon

  • Car parking available
  • South facing gardens
  • Coming Soon

When you use this technique you will not need to use </li> to close off the code.

The second technique can be a little bit trickier and requires the use of the full <li></li> code. Using the same list you can write them as follows:

<li>Car parking available</li><li>South facing gardens</li><li>Coming Soon</li>.

This will format the text to appear exactly the same as the above example:

  • Car parking available
  • South facing gardens
  • Coming Soon

Mixing codes

There are times were you may feel one style of formatting is not quite hitting the spot, so there are ways in which you can combine the codes above to work together.

If you want to use a combination of underline, italicise or bold, you can use several codes at the same time.

<b><u>This line will read as underlined bold text</u></b>.

This line will read as underlined bold text

<b><i>This line will read as italic bold text</i></b>.

This line will read as italic bold text

<u><i>This line will read as underlined italic text<i></u>.

This line will read as underlined italic text

<b><u><i>This line will read as bold underlined italic text</i></u></b>.

This line will read as bold underlined italic text

The key to combining codes is to remember to always close the codes in reverse order from the how they have been opened.

If you write <b><u><i> at the start of your word or phrase then you must close the code with </i></u></b>.

The key thing to remember when using these codes is that they need to be closed in the reverse order that they were opened.