# HTML formatting

Common tags you'll need for importing questions and EMQs via CSV

### 🔠  Formatting

#### Paragraphs

For longer questions, you may need to use paragraphs. To create new paragraphs for new ideas or points, use the `<p>` element to define a new paragraph. You always need a closing `</p>`tag at the end of your paragraph.&#x20;

```html
<p>No. I am your father</p>
<p> - Darth Vader <p>
```

![](https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FIkzEbs6ceK2lhEFkEx3x%2Fpara.png?alt=media\&token=acfb7172-98f2-47b4-afa5-4982e0bb401f)

#### Headings

Use headings tags to have text display as settings  `<h1>` being the largest `<h6>` being the smallest. You can use line breaks `<br>` to leave a gap between all html elements.

```html
<h1> Starwars </h1>
<h2> Episode V</h2>
<h3> The Empire Strikes Back </h3>
<br>
<p>"No. I am your father"</p>
<p> - Darth Vader <p>
```

![](https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FabLbxooBqHfNt34t2ate%2Fheadings.png?alt=media\&token=2b7d14c0-f975-44aa-924f-7c4b213e9c07)

#### Lists

Use ordered `<ol>` lists to list from 1 onwards and unordered `<ul>`lists which display as bullet points show different options in a question. Remember to us `<li>` tags for each list item&#x20;

```html
<p>No. I am your_______ </p>
 <ol>
 <li>father</li>
 <li>BFF</li>
 <li>Gaurdian</li>
 <li>Line manager</li>
</ol>
<p> - Darth Vader <p>
```

![](https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FTCx1Fe8FS3lfnKNrvVk6%2Forderedlist.png?alt=media\&token=0a305d23-4359-43c1-8bd3-9db7e6a3382a)

### 🖼  Images&#x20;

When using images in questions or answer options you'll need to upload them to either a content management system (CMS) or something else that can host your image and create a public permalink that points to that image. There are a few ways to generate these links:&#x20;

* Upload images to an Amazon S3 bucket
* Uploading images to Wordpress or other website you have
* Modify Google Drive share links (see below)

#### Google Drive links&#x20;

You will need to modify links from Google Drive in order for them to work on Synap&#x20;

**1) Get a share URL from Drive**&#x20;

Make sure the visibility is set to 'Anyone with the link' and copy that link&#x20;

![Copy the green link](https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FgkUioAoHhgLwdlwOEBZq%2FScreenshot%202022-02-23%20at%2010.02.55.png?alt=media\&token=e4d46800-cad0-4512-9ffd-9fef67427c01)

**2) Modify link**&#x20;

The share URL link structure needs to be modified, see the long string after `/d/` that is the `{FileID}` modify the link

```
Initial link: 
https://drive.google.com/file/d/{FileID}/view?usp=sharing

Reformatted link: 
https://drive.google.com/uc?export=download&id={FILE_ID}
```

[Click here to download](https://synap-content.s3.eu-west-1.amazonaws.com/synap_support/Modifying+Google+Links.xlsx) an excel template for how to modify Google Drive image links.&#x20;

{% hint style="success" %}
🧠  **Note**: If you don't want to generate image links with any of the methods above mentioned - use the Synap question editor to upload directly onto the platform. When you export these questions links will have been automatically generated by the system.&#x20;
{% endhint %}

Any image URL then needs to be used in `<img>` tags. You can use `style` elements to alter the width and height. [More on HTML images W3 schools](https://www.w3schools.com/html/html_images.asp)

```html
<p>No. I am your father</p>
<p> - Darth Vader <p>
<p> See fig below Darth Vader </p>
<p><img src ="https://synap-content.s3.eu-west-1.amazonaws.com/portalstore/empire-strikes-back-10.jpeg" width = 50% > </p>
```

![Image in a question](https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FGka5EIHx5hoHbLuRd1H2%2Fimage.png?alt=media\&token=16e5706c-7cde-4857-b1a8-5362e2b99d25)

{% hint style="info" %}
🧠 Note: If you don't want to generate image links with any of the methods above mentioned - use the Synap question editor to upload directly onto the platform. When you export these questions links will have been automatically generated by the system.&#x20;
{% endhint %}

#### Links

Create hyperlinks using `<a>` tags and the `href` element for different URLs

```html
<p>No. I am your father</p>
<p> - Darth Vader <p>
<p> <a href = "https://www.youtube.com/watch?v=_lOT2p_FCvA"> Click to watch full scene </a></p>
```

![](https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FNjpRFAogHVsdoYsKoJK8%2Flink.png?alt=media\&token=f8c59e5d-b599-482f-886d-71a418189d35)

### 📣 Emphasis

Use HTML tags to add emphasis to different parts of text&#x20;

```html
<p><strong>No.</strong> I am your <u>father.</u> </p>
<p>— <i>Darth Vader</i><p>
```

### 🧞‍♂️ Special Characters&#x20;

In HTML, special characters are typically those that can't be easily typed into a keyboard or may cause display issues if typed or pasted into a web page. If you want to use special characters in your questions or answers, you should use either the HTML **entity name** or the HTML **entity number.** This will ensure that it displays correctly in most/all browsers.

```html
<p>No. I am your father.</p>
<p> - Darth Vader <p>
<p>Lucasfilm LTD&trade;</p>
```

![](https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FlGTOKoKdLqOvXlKitbTa%2Fspecialcharacters.png?alt=media\&token=b41ddf26-fc3a-4ea1-8fc7-a305b1c4492f)

&#x20;A Trademark **(™)** symbol will require special characters, use `&#8482;`(**entity number**) and `&trade;` (**entity name**) will both display The entity name and number will always start with an & and end with a semicolon. To find a full list of special characters you can insert with HTML, try [this website.](https://www.whatsmyip.org/html-characters/)

| Tag                     | Description                                |
| ----------------------- | ------------------------------------------ |
| `<p>`                   | Paragraphs                                 |
| `<h1>` `<h2>`....`<h6>` | Headings                                   |
| `<br>`                  | Line breaks                                |
| `<ol>`                  | Ordered list (ie 1,2,3...)                 |
| `<ul>`                  | Unordered list (bullet points)             |
| `<li>`                  | List item                                  |
| `<a>`                   | Creates a link                             |
| `<strong>` or `<b>`     | Makes text bold                            |
| `<u>`                   | Underlines text                            |
| `<mark>`                | Highlights text                            |
| `<i>`                   | Makes text italic                          |
| `<sup>`                 | Puts characters in superscript (eg powers) |
| `<sub>`                 | Puts characters in subscript               |

### Buttons with links

Buttons can be created on platform with HTML snippets, the below snippet will create a button with a link to a website and open it in a new tab. The buttons colour will be set to the portal primary colour.&#x20;

{% code overflow="wrap" %}

```
<div style="text-align:center"><a href="https://synap.ac" target="_blank"><button class="ui primary button large" style="min-width:100px">
        Visit Synap
          </button></a>
</div>
```

{% endcode %}

<figure><img src="https://3316915154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgvUeCmTPeNouRxGPC%2Fuploads%2FFwd7slu7DDc1RuTp23jt%2FScreenshot%202025-11-27%20at%2013.40.35.png?alt=media&#x26;token=386f5ef7-fe3e-4e5a-a878-c42c1b87779d" alt=""><figcaption></figcaption></figure>

Use buttons alongside user group share links to allow users to add themselves into groups.&#x20;

{% content-ref url="../../users-and-groups/creating-groups/sharing-user-group-links" %}
[sharing-user-group-links](https://academy.synap.ac/doc/users-and-groups/creating-groups/sharing-user-group-links)
{% endcontent-ref %}

### 💡 Top Tips

* &#x20;Use HTML preview tools to check your text before you put it on platform or into a sheet - [htmledit.squarefree.com](https://htmledit.squarefree.com/)
* Tutorial sites like [W3 Schools](https://www.w3schools.com/html/) to find other HTML tags and when to use them
* Always preview your questions before you give access to students!&#x20;

## Allowed tags in import and HTML snippets

Not all HTML tags are allowed in the importer or in the question editor. This is to keep your content scalable and accessible for users

<details>

<summary>List of allowed HTML tags</summary>

```
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1>
<h2>
<img>
<button>
<sup>
<sub>
<figure>
<address>
<article>
<aside>
<dir>
<footer>
<header>
<hgroup>
<main>
<nav>
<section>
<blockquote>
<dd>
<div>
<dl>
<dt>
<figcaption>
<figure>
<hr>
<li>
<lang>
<main>
<ol>
<p>
<pre>
<ul>
<a>
<abbr>
<b>
<bdi>
<bdo>
<br>
<cite>
<code>
<data>
<dfn>
<em>
<i>
<kbd>
<mark>
<q>
<rb>
<rp>
<rt>
<rtc>
<ruby>
<s>
<samp>
<small>
<span>
<strong>
<sub>
<sup>
<time>
<caption>
<col>
<colgroup>
<table>
<tbody>
<td>
<tfoot>
<th>
<thead>
<tr”>
<video>
<audio>
<iframe>
<Math>
<u>
<var>
<wbr>
<math>
<mglyph>
<mi>
<mn>
<mo>
<ms>
<mspace>
<mtext>
<menclose>
<merror>
<mfenced>
<mfrac>
<mpadded>
<mphantom>
<mroot>
<mrow>
<msqrt>
<mstyle>
<mmultiscripts>
<mover>
<mprescripts>
<msub>
<msubsup>
<msup>
<munder>
<munderover>
<none>
<maligngroup>
<malignmark>
<mlabeledtr>
<mtable>
<mtd>
<mtr>
<mlongdiv>
<mscarries>
<mscarry>
<msgroup>
<msline>
<msrow>
<mstack>
<maction>
<annotation>
<annotation-xml>
<semantics>
```

</details>

<details>

<summary>List of allowed Styles</summary>

```
allowedStyles: {
        '*': {
          'text-align': [/^left$/, /^right$/, /^center$/],
          'background-color': [
            /^#(0x)?[0-9a-f]+$/i,
            /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/,
            /^hsl\(\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*\)$/
          ],
          color: [
            /^#(0x)?[0-9a-f]+$/i,
            /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/,
            /^hsl\(\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*\)$/
          ],
          width: [/./],
          height: [/./],
          position: [/./],
          padding: [/./],
          'min-width': [/./],
          'min-height': [/./],
          'max-width': [/./],
          'max-height': [/./],
          'padding-top': [/./],
          'padding-bottom': [/./],
          'padding-left': [/./],
          'padding-right': [/./],
          margin: [/./],
          'margin-top': [/./],
          'margin-bottom': [/./],
          'margin-left': [/./],
          'margin-right': [/./],
          border: [/./],
          'border-radius': [/./],
          'border-width': [/./],
          'border-style': [/./],
          'border-color': [/./],
          float: [/./],
          display: [/./],
          'flex-direction': [/./],
          'flex-flow': [/./],
          'flex-grow': [/./],
          'flex-shrink': [/./],
          'flex-wrap': [/./],
          'flex-basis': [/./],
          'align-items': [/./],
          'align-content': [/./],
          'align-self': [/./],
          'justify-items': [/./],
          'justify-content': [/./],
          'justify-self': [/./],
          gap: [/./],
          'column-gap': [/./],
          'row-gap': [/./],
          'list-style-position': [/^inside$/, /^outside$/],
          direction: [/^rtl$/, /^ltr$/]
```

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://academy.synap.ac/doc/quizzes/importing-and-exporting/html-formatting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.