---
title: "Adding HTML"
slug: "adding-html-1"
updated: 2024-03-25T00:44:52Z
published: 2024-03-25T00:44:52Z
canonical: "support.bookingtimes.com/adding-html-1"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.bookingtimes.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Adding HTML

HTML provides the basic structure of the homepages and supporting pages on the bookingtimes platform. We use the [TinyMCE](https://www.tiny.cloud/tinymce/) editor to add our HTML code.

You can add HTML by navigating to the page you wish to edit, such as the home page, [service page](/v2/docs/adding-a-services), [custom page](/v2/docs/adding-pages) or [suburb/location](/v2/docs/publishing-a-suburb-page) page.

When adding HTML code, you do not need to wrap it in doctype, html, or head tags as the system automatically adds these. Just add your body code directly.

Tip

To test your pages, you will need to logout to view the site from public view. You can also have the site open in an incognito window to create a separate public session.

## Adding HTML to the homepage

### Steps

1. Navigate to **Setup** > **Website Content** > **Edit Website** to open the drag and drop editor
2. Click **Edit** on the Toolbar
3. On the right of the Toolbar, click **Edit HTML </> ![](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-1642541320149.png)**

1. Add your HTML here and click **Okay**
2. Click **Save** on the Toolbar

---

## Adding HTML to service pages, custom pages and suburb pages

### Steps

1. Service and course pages are located under **Setup** > **Bookings** > **Services**
2. Custom pages are located under **Setup** > **Website Content** > **Custom Pages**
3. Suburb/location pages are located under **Setup** > **Bookings** > **Locations** > select **Location** > **Suburbs**
4. Click on the relevant service/custom page/suburb page
5. Click on the **Publish** tab to open TinyMCE
6. Click on the sourcecode **<>** icon to open the HTML Editor
7. Add your HTML here and click save

![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28545%29.png)

---

## HTML best practice

You may code the page as needed for your design, however, we generally break down our pages into well-defined sections, and wrap our sections in the following structure.

**Note:** It's important to use class names in your HTML as global CSS styling is not recommended, and you should always use class names to refer to elements such as div, p, h2, table, modal, a etc.:

```markup
<!------Section Name------>
<div class="section-classname full-width">
    //Full-width element with well defined classname, to be used for CSS Styling
    <div class="container">
        //Container element which will contain elements to the middle of the screen
        <p>Lorem ipsum dolor</p>
    </div>
</div>
<!-------/Section Name----->
```

You should try and follow good HTML practice as discussed here: [https://www.w3schools.com/html/html5_syntax.asp](https://www.w3schools.com/html/html5_syntax.asp) and validate your HTML here: [https://validator.w3.org/](https://validator.w3.org/)