When creating Mechanical Turk HITs, it’s necessary to use HTML syntax. This is a list of 20 examples of HTML syntax (tags and attributes) for accomplishing common tasks in Mechanical Turk HITs. These 20 examples don’t cover the entirety of HTML, but they cover all the HTML that is typically needed to setup a Mechanical Turk HIT. A single-page version suitable for printing can be downloaded here.
To make this list easier to use, it’s mostly simple HTML instead of the au courant Cascade Style Sheets (CSS). An advantage of using regular HTML is that it can be used in a variety of environments (e.g., Qualtrics) where full CSS isn’t allowed.
1. Bold
Syntax:
In this text, <b>this part</b> is in bold.
Result:
In this text, this part is in bold.
2. Italics
Syntax:
In this text, <i>this part</i> is in italics.
Result:
In this text, this part is in italics.
3. Underline
Syntax:
In this text, <u>this part</u> is underlined.
Result:
In this text, this part is underlined.
4. Centering text and other elements
Syntax:
<center>This is centered.</center>
Result:
5. Special characters: non-breaking space
Syntax:
Result:
(one space)
Notes:
This is useful when you want to display more than one space in a row. When a browser encounters multiple regular spaces in a row, it will display only one of them. Using multiple times in a row will force the browser to display all of the spaces.
6. Special characters: double quote (“)
Syntax:
"
Result:
“
Notes:
This is useful when you want to display a double quote (“) but using it in the code would act like HTML rather than simple text.
7. Special characters: < and >
Syntax:
< and >
Result:
< and >
Notes:
This is useful when you want to display a less-than sign (<) or greater-than sign (>) but using them in the code would act like HTML rather than simple text.
8. Indent with CSS
Syntax:
<div style=”margin-left:20px”>This is indented.</div>
Result:
This is indented.
Notes:
This indents the left side of the text by 20 pixels. It is a bit of CSS, not simple HTML. Mechanical Turk allows this kind of CSS, but not all environments do.
9. New line
Syntax:
One<br>Two
Result:
One
Two
Two
Notes:
A new line, without any vertical space. Sometimes you’ll see <br /> as an equivalent of <br>.
10. Two new lines
Syntax:
One<br><br>Two
Result:
One
Two
Notes:
A new line with some vertical space
11. Colors in text
Syntax:
This is <span style=”color: yellow; background-color: blue; border: 4px solid yellow; padding: 3px;”>highlighted</span> text.
Result:
This is highlighted text.
Notes:
This is a bit of CSS, not simple HTML. Mechanical Turk allows this kind of CSS, but not all environments do. The color names (e.g., yellow) can be replaced with specific colors (e.g., #93a602). For more info, see https://htmlcolorcodes.com
12. Display an image
Syntax:
<img src=”https://ederosia.byu.edu/MKTG415/icon-class.jpg” width=”50″>
Result:
Notes:
The width=”50″ will force the image to be displayed at 50 pixels wide. That can be removed to display the image at its native size.
13. Built-in paragraph style
Syntax:
<p>This is a paragraph.</p>
Result:
This is a paragraph.
Notes:
This automatically adds space above and below the paragraph.
14. Labeled box around an area
Syntax:
<fieldset><legend>This text is on top</legend>This text is inside the box.</fieldset>
Result:
15. Link with text
Syntax:
The link is <a href=”https://nerdshout.gifts” target=”_blank”> nerdshout.gifts</a>.
Result:
The link is nerdshout.gifts.
Notes:
The target=”_blank” makes the link open in a new browser tab. Removing it will make the link open in the current browser tab.
16. Download a file
Syntax:
To download the file, <a href= “https://ederosia.byu.edu/MKTG415/example_document.docx”>”>click here</a>.
Result:
To download the file, click here.
Notes:
This syntax is simply a regular HTML link to a Word file that I have uploaded to my webserver at ederosia.byu.edu Clicking on the link initiates the download.
17. In a form, ask for a text response
Syntax:
<label>What is your favorite color? <input type=text name=color></label>
Result:
Notes:
The name=color portion defines the name of the field. It will be reported in the Mturk results as “color.” This name should be unique within the form. Forgetting to make the name unique is a common mistake.
18. In a form, ask for a long text response:
Syntax:
<label>How are you? <textarea rows=”2″ cols=”60″ name=how_are_you></textarea></label>
Result:
Notes:
This code makes the text box 2 rows high and approximately 60 letters wide
19. In a form, ask for a radio button response
Syntax:
<label><input type=radio name=a_or_b value=choice_a>Choice A</label><br>
<label><input type=radio name=a_or_b value=choice_b>Choice B</label>
<label><input type=radio name=a_or_b value=choice_b>Choice B</label>
Result:
Notes:
The value of the selected option will be reported by Mturk under the name field. Making the name the same for both inputs will let the user select one option or the other, but not both. This code does not force a user to choose one of the options. In other words, this code allows users to select neither option.
20. In a form, ask for a checkbox response
Syntax:
<label><input type=checkbox name=subscribe>Do you want to check this box?</label>
Result:
Notes:
Every checkbox needs a unique name