1 HTML
learning goals
- Understand the fundamental structure of web pages and how HTML creates content
- Learn essential HTML tags for building psychology experiments
- Master HTML document structure and organization principles
- Apply HTML attributes, classes, and IDs for element identification and styling preparation
- Create well-structured, accessible web content using semantic markup
1.1 How Websites Work: The Basics
Think of a website like a digital magazine. Just as a magazine is made up of text, images, and layout instructions, a website consists of files that tell your browser what to display and how to display it.
Every website you visit is built from simple text files that contain instructions written in special languages:
HTML (HyperText Markup Language) is like the skeleton of a webpage. It defines the structure and content like headings, paragraphs, buttons, and forms.
CSS (Cascading Style Sheets) is like the clothing and makeup. It controls how things look, including colors, fonts, spacing, and layout.
JavaScript is like the nervous system. It makes things interactive and responsive to user actions.
The remarkable thing is that these are all just plain text files, no different from a document you might write in Notepad. The “magic” happens when your web browser reads these text files and interprets the instructions to create the visual, interactive experience you see.
When you create an online behavioural study, here’s the simplified journey your experiment takes to reach participants:
First, you create your experiment files using HTML for structure, CSS for appearance, and JavaScript for interactivity. These files are then stored on a web server, which is essentially a computer that’s always connected to the internet, ready to share your files.
When participants visit your experiment’s web address (URL), their browser requests your files from the server. The server sends your files to their browser instantaneously, like mailing a package but much faster. Their browser then interprets your files and transforms your text instructions into the interactive experiment they see. Finally, when participants respond, their answers are sent back to be stored for your analysis.
1.2 Introduction to HTML
All the web experiments you might encounter are simply websites, built using the same building blocks that all websites are made with. To start, we’re going to be using the language HTML, or hypertext markup language.
HTML isn’t a programming language since it doesn’t actually do anything. It doesn’t, for example, perform calculations, make decisions, or respond to user input. Think of HTML like the blueprint or skeleton of a house: it defines the structure and layout, but it doesn’t make the lights turn on or the water flow.
More specifically, HTML is a markup language. Just like how you might use a highlighter to mark up a printed document like underlining important parts, circling key terms, or adding notes in the margin, HTML “marks up” text to give it meaning and structure. It tells the browser “this text is a heading,” “this text is a paragraph,” “this text is a link,” and so on.
You can think of HTML as providing the content and structure of a webpage. It contains the actual text, images, and media that appear on the page. It defines how that content is organized through headings, paragraphs, lists, and other elements. It establishes the basic layout and hierarchy of information that users will see.
HTML creates static content, meaning it doesn’t change or respond on its own. It’s like a printed page—the words and pictures stay exactly where you put them. Later, we’ll add CSS to make it look better and JavaScript to make it interactive, but HTML provides the foundation that everything else builds upon.
In psychology experiments, HTML creates the basic structure: the instructions participants read, the buttons they click, the areas where stimuli appear, and the forms where they enter responses.
1.6 Attributes
Attributes allow you to modify behavior of an HTML tag. You’ve already seen a few of them but we’ll go into a few more examples of them.
A really good example we have seen already is the href attribute of the anchor tag:
By modifying the href we’re modifying what the tag does. It’s contextual as well: href only works on an anchor tags. You can’t add a href to a div and expect it to suddenly work as a link.
Another example is the src attribute on images. The src tells the browser where to find the image file:
1.6.1 Classes and IDs: Reference Labels
There are other attributes like class and id that are universal and can be applied to (nearly) all tags. These themselves don’t change how things look or behave - they’re like reference labels that allow other parts of your code to find and work with specific HTML elements later.
Think of classes and IDs like name tags at a conference. The name tag doesn’t change what you look like, but it helps other people find and identify you. Similarly, classes and IDs help CSS (for styling) and JavaScript (for interactivity) find and work with specific HTML elements.
<div class="experiment-instructions">
<h2 id="main-title">Memory Task Instructions</h2>
<p class="important-note">Please read carefully!</p>
<p class="important-note">This experiment will take 15 minutes.</p>
<a class="start-button" href="experiment.html">Begin</a>
</div>In this example:
- The experiment-instructions class labels the entire instruction section
- The main-title ID labels the specific heading (there’s only one main title)
- The important-note class labels both important paragraphs (reusable!)
- The start-button class labels the link
You can give a single element multiple classes by separating them with spaces. This is really powerful because it lets you combine different labels:
<div class="trial-display centered-content">
<p class="stimulus-text large-font">BLUE</p>
<img class="stimulus-image rounded-corners" src="face1.jpg" alt="Happy face" />
<a class="response-button primary-button" href="next-trial.html">Continue</a>
</div>In this example:
- The div has both trial-display and centered-content classes
- The p has both stimulus-text and large-font classes
- The img has both stimulus-image and rounded-corners classes
- The a has both response-button and primary-button classes
1.6.2 Classes vs IDs: When to Use Which?
Classes are like group labels - you can use the same class on multiple elements:
- Use when you might have multiple elements that should be treated the same way
- Perfect for things like “all warning messages” or “all response buttons”
- Can be reused as many times as you want on a page
IDs are like unique identifiers - each ID can only be used once per page:
- Use when you have exactly one of something special
- Good for unique elements like “the main experiment area” or “the final results section”
- Must be unique - you can’t have two elements with the same ID
<!-- Good use of classes - multiple elements that should be grouped -->
<p class="instruction-text">Read the word, ignore the color.</p>
<p class="instruction-text">Respond as quickly as possible.</p>
<p class="instruction-text">Press any key to begin.</p>
<!-- Good use of ID - unique element -->
<div id="experiment-container">
<!-- All experiment content goes here -->
</div>
<!-- Combining classes and IDs -->
<div id="trial-area" class="centered-content trial-display">
<p class="stimulus-word large-text">RED</p>
</div>Rule of thumb: Use classes 95% of the time. Only use IDs when you’re absolutely sure there will only ever be one of that element on the page, and you need to specifically target that unique element later in your code.
For psychology experiments, classes are perfect for things like trial displays, response buttons, and instruction text that you’ll reuse across different parts of your experiment.
1.7 Organizing HTML
Let’s talk about organizing HTML and how to make the most of it. This will help a ton once you get to the CSS section.
HTML is like building with blocks in that you can put smaller elements inside bigger containers to organize your content. The <div> element is your most versatile container. It doesn’t have any special meaning by itself, but it’s perfect for grouping related elements together.
1.7.1 Basic Organization with Divs
Let’s say you’re creating an instruction page for a psychology experiment. You need to welcome participants, explain the task, show them what they’ll see, and give them a button to start. Let’s put that together using HTML:
<div>
<h1>Welcome to the Experiment!</h1>
<p>
In this experiment, you will see images of faces and need to identify
the emotion being displayed. Each face will appear for 2 seconds.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-smile.svg/120px-Face-smile.svg.png" alt="Example of a happy face" />
<p>Click the emotion you see as quickly and accurately as possible.</p>
<button>Start Experiment</button>
</div>Let’s walk through what we did here and why.
We wrapped everything in a <div> element. This creates a container that holds all our related content together. Think of it like putting all the instruction materials in one folder.
Notice how every tag that we opened gets closed. We have: - <div> ... </div> - <h1> ... </h1> - <p> ... </p> - <button> ... </button> - Note that the <img> tag is self-closing, so it doesn’t need a separate closing tag.
Look at how we formatted the HTML with indentation and line breaks. This makes it easier to read, but the browser ignores most of this whitespace. We could write it all on one line and it would look the same to users, but that would be much harder for us to read and edit! Good formatting makes your code maintainable.
All of our content elements (h1, p, img, button) are inside the div container. This is called nesting. The div is the parent, and everything inside it are its children.
1.7.2 Adding Labels for Future Reference
Now, this HTML works perfectly fine, but when we get to CSS (in the next chapter), we’ll want to style different parts differently. Maybe we want the title to be bigger, or the button to be blue. To do that, we need a way to refer to specific elements. That’s where classes and IDs come in:
<div id="instruction-page">
<h1 class="page-title">Welcome to the Experiment!</h1>
<p class="instruction-text">
In this experiment, you will see images of faces and need to identify
the emotion being displayed. Each face will appear for 2 seconds.
</p>
<img class="example-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Face-smile.svg/120px-Face-smile.svg.png" alt="Example of a happy face" />
<p class="instruction-text">Click the emotion you see as quickly and accurately as possible.</p>
<button class="start-button">Start Experiment</button>
</div>Notice that it looks exactly the same! The classes and IDs don’t change how things appear. They’re just labels that we can use later. Think of them like putting sticky notes on different parts of your content.
We gave id="instruction-page" as a unique label for this specific page. The class="page-title" labels the main title. We used class="instruction-text" for instruction paragraphs (notice two elements have this same class). The class="example-image" labels the example image, and class="start-button" labels the start button.
In the CSS chapter, we’ll use these labels to make the title bigger, color the button blue, or center the image. The key principle is that HTML defines the structure and content, while CSS (which we’ll learn next) handles the appearance. By organizing our HTML well and adding meaningful labels, we set ourselves up for success when we start styling our experiments.
1.8 HTML Document Structure
So far we’ve been discussing snippets of HTML, using things like divs to build up “components” (or a group of tags that represents a higher level concept like a post or a navigation bar). But let’s talk about the overall structure of an HTML document.
Every HTML page needs a basic skeleton that tells the browser important information about how to display and handle your content. Here’s the standard structure you should use for every HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Psychology Experiment</title>
</head>
<body>
<!-- All your visible content goes here -->
<h1>Welcome to the Study</h1>
<p>This is where participants will see your experiment content.</p>
</body>
</html>Let’s break down each part of this structure:
1.8.1 Document Type Declaration
This tells the browser we’re using HTML5 (the current standard). There have been several versions of HTML over the years, and this declaration ensures the browser interprets your code using the latest, most reliable standards.
1.8.2 Root HTML Element
This is the container for your entire document. The lang=“en” attribute tells browsers and search engines that your content is in English, which helps with accessibility and search indexing.
1.8.3 The Head Section
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Psychology Experiment</title>
</head>The <head> contains metadata that is information about your page that doesn’t appear in the browser window.
The charset="UTF-8" tells the browser which character set to use. UTF-8 supports all modern characters, emojis, and international text. Always include this.
The viewport meta tag is essential for mobile devices. Without this, phones might display your page zoomed way out and tiny. This ensures your experiment works properly on all screen sizes.
The <title> sets the text that appears in the browser tab and in search results.
1.8.4 The Body Section
Everything participants actually see and interact with goes inside the <body> tags. This is where you’ll put your experiment instructions, stimuli, response buttons, and all other visible content.
1.9 Putting it All Together: A Live Coding Exercise
Throughout this textbook, you will find live coding exercise where you can directly edit some code and see the result right here in the book.
Below is our simple HTML welcome page. Go ahead and edit the HTML below. The webpage, on the right, will update as you change the code. None of these changes are permanent. If you refresh the page, the codepen will revert back to the original code it started as.
Some things to try:
- Change the paragraph text inside
<p> </p> - Add a second header using
<h2> </h2> - Add an ordered list below the
<p> - Add the smiley face image using the wikicommons link from the earlier examples.
Live Coding Exercise
1.4 Comments vs. Code
One important note before going through the essential HTML tags: All programming languages allow us to write ‘comments’ inside our code. These comments are ignored when the code is run. It’s a way for us to make notes to ourselves or future readers of our code to help document our code as we write it. Each language has it’s own way of marking something as a comment. In HTML, the way you mark some text as a comment (and not code) is by putting the text inside a
<!--and-->.Commenting is also a useful way of removing some code without deleting it. Let’s say you want to see what the page looks like without some HTML, you can ‘comment it out’ like this:
Ok, now that we have that settled, let’s explore some of the essential tag types that we will be using to make our experiments.