HTML


What is HTML?

HTML like markdown can be used to format sections of text within your Questionnaires or Tasks. HTML, or HyperText Markup Language, is an 'extensive language' which is used by all websites to communicate how information on a web page should be displayed within a browser.

In Gorilla HTML can be used instead of markdown to add styling to text, such as to embolden, italicise, colour or text alignment. Create titles, numbered/bullet-pointed lists and tables. It can also be used to link to external pages or embed images or videos.

When writting HTML 'elements' we must always use what is known as an opening tag (e.g. <p>) and a closing tag (e.g. </p>).

Markdown is a simpler language for formatting text content. However, you may wish to use HTML if you are more familiar with it, or if you need more flexibility in formatting things in a way Markdown can’t, such as adding colour to text.

Click here for the equivalent Markdown page

Below is a guide to basic formatting in HTML:


HTML code elements: What it looks like when displayed:
Creating Titles and Text Blocks

<h1>My Title</h1>

My Title

<h2>My Subtitle</h2>

My Subtitle

<h3>My Subtitle</h3>

My Subtitle

<h4>My Subtitle</h4>

My Subtitle

<p>My paragraph would go here if I were writing one</p>

My paragraph would go here if I were writing one.

Styling and formatting Text

<p>You can create <strong>bold</strong> text.</p>

You can create bold text.

<p>Using <em>Italics</em> text is fun!</p>

Using italics is fun!

<p>Sometimes you will want to <u>underline</u> you text.</p>

Sometimes you will want to underline your text.

<p style="color: blue;">You can change the colour of your text by naming colours</p>

<p>Or specify the colour using
<span style="color: blue;">'decimal code'(R,G,B)</span></p>

<p>Alternatively you can use <span style="color: #1b9513;">
Hex code to pick a colour</span>.</p>

You can change the colour of all your text by naming colours

Or specify the colour using 'decimal code' (R,G,B).

Alternatively you can use Hex Code to pick a colour.


We recommend using https://htmlcolorcodes.com/ to find your hex-colour code.

<p style="font-size: 150%;">You can change the font size by %</p>

<p style="font-size: 16px;">Or specify the number of pixels (px) for your new font size.</p>

You can change the font size by %

Or specify the number of pixels (px) for your new font size.

<p style="font-family: courier, sans-serif;">
You can also change the font style.</p>

You can also change the font style.


Note: If you use a font that the participant’s browser/operating system does not support, the text will not appear. Its good practice to add in a backup after your first font style. Separate this back-up font from the first by using a comma. Sans-serif usually works.

Aligning Text

<p style="text-align: left;">
This text is aligned to the left.</p>

This text is aligned to the left.

<p style="text-align: center;"> This text is centre aligned.</p>

This text is centre aligned.

<p style="text-align: right;">
This text is aligned to the right.</p>

This text is aligned to the right.

<p style="text-align: justify;"> This text is justified.
You may wish to use this when writing longer paragraphs.</p>

This text is justified. You may wish to use this when writing longer paragraphs.

Adding in Links to other web-pages

<a href="https://gorilla.sc/support/markdown">My Link</a>

My Link

<a href="https://gorilla.sc/support/markdown" target="_blank">
Open My Link in a New Tab</a>

Open My Link in a New Tab
Inserting Line Breaks

<h4>This is how to insert a line break</h4>
<br/>
<p>between other html elements</p>

This is how to insert a line break


between other html elements.

<p>Sometimes you want to separate text with a horizontal rule</p>
<hr/>
<p>like this!</p>

Sometimes you need to separate text with a horizontal rule


like this!

Creating Lists and Tables

<ul>
<li> my first bullet-point item (or unordered list)
<li> my second bullet-point item
</ul>

  • my first bullet-point item (or unordered list)
  • my second bullet-point item

<ul>
<li> my first numbered list item (or ordered list)
<li> my second numbered list item
</ul>

  1. my first numbered list item (or ordered list)
  2. my second numbered list item

<h4>This is how to create a score table:</h4>

<table class="table table-bordered" style="margin: auto;">

<thead>

<tr>

<th>My Heading</th>

<th>Score1</th>

<th>Score2</th>

</tr>

</thead>

<tbody>

<tr>

<th>My Row Label</th>

<td>value 1</td>

<td>value 2</td>

</tr>

<tr>

<th>My Next Row Label</th>

<td>value 3</td>

<td>value 4</td>

</tr>

</tbody>

</table>

This is how to create a score table:

My Heading Score1 Score2
My Row Label value 1 value 2
My Next Row Label value 3 value 4

If you would like to learn more about how to code HTML, we recommend freecodecamp.org.

A charity organisation which provides free online 'learn-to-code' courses suitable for all levels of experience.