# Custom HTML

Code is the language that tells your web browser what it should look like and what it should do. Three of the core code types are **HTML, CSS,** and **Javascript**.

**HTML** tells your browser what content to show and where it should go**.**

{% tabs %}
{% tab title="HTML" %}
{% code title="Sample HTML" %}

```markup
<p>This is a paragraph.</p>
```

{% endcode %}
{% endtab %}
{% endtabs %}

**CSS** is responsible for the look/style. It allows you to apply a unique style to one HTML element at a time. You assign CSS to a specific HTML tag by using the style attribute with any CSS properties defined within it.

{% tabs %}
{% tab title="CSS" %}
{% code title="Sample CSS" %}

```css
<p style=“color: blue;“>This is a paragraph.</p>
```

{% endcode %}
{% endtab %}
{% endtabs %}

**Javascript** is a prototype-based, multi-paradigm scripting language that supports object-oriented, imperative, and functional programming styles.

The \<script> tag is used to define a client-side script.

{% tabs %}
{% tab title="JavaScript" %}
{% code title="Sample Javascript" %}

```javascript
<script>
document.getElementById(“demo”).innerHTML = “Hello JavaScript!“;
</script>
```

{% endcode %}
{% endtab %}
{% endtabs %}

If you want to add any of the above-mentioned codes to your site, you can use our **Custom HTML** element to do so!&#x20;

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 1.  Add HTML Element

To get started, just drag and drop the ‘Custom HTML’ icon from the **Elements** section to the crafting area.

![Add HTML Element](https://downloads.intercomcdn.com/i/o/109119754/f73780cebf2c74f97b8cd8e1/Custom-HTML-1.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 2.  Insert HTML

Insert the desired HTML tags and click the **‘Save’** button.

![Insert HTML](https://downloads.intercomcdn.com/i/o/109119756/fbbc2be1a0cea1cf4bff807d/Custom-HTML-2.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 3.  Crop the element

To **crop** the added element, push the Crop Pointers and move them.

![Crop Element](https://downloads.intercomcdn.com/i/o/109119759/b668082462fc7647d7b8e75f/Custom-HTML-3.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### **4**.  Edit HTML Element

Edit the Custom HTML Element by simply clicking on it and choosing the desired option from the ‘**Settings**’.<br>

![Click the ‘Save’ button once all the desired changes are made.](https://downloads.intercomcdn.com/i/o/109119768/90cf852812da2fec157b33ad/Custom-HTML-4.png)

{% hint style="info" %}
​🧙 **Tips:** The code will go active once you've connected a **Custom Domain** to your Harness website.
{% endhint %}

## &#x20;<a href="#save-edits" id="save-edits"></a>

### **4**. **Alignment**

To change the alignment settings of the Custom HTML Element, click on the ‘Alignment’ icon you’ll have three options available: top, center, bottom, just choose the one, you prefer.

![Update alignment](https://downloads.intercomcdn.com/i/o/109119775/dbfaf071d3e4691abdc14c10/Custom-HTML-5.png)

## &#x20;<a href="#save-edits" id="save-edits"></a>

### 5. **Delete**

If you don't need the Element anymore, Click on the **‘Trash’** icon to remove it from your page.<br>

![Trash can = Delete](https://downloads.intercomcdn.com/i/o/109119800/bd62464a6644b402029140a0/Custom-HTML-6.png)

{% hint style="success" %}
Need further help? Just hit the **Chat Box** in the lower right corner and drop us your questions. You'll surely receive a timely and friendly support from our team.
{% endhint %}