HTML basics and Hello World! Your first step

Before creating an experiment with jsPsych, learn how an HTML page is organized and how to write its basic parts. In this lesson, you will open a small example, read it from top to bottom, and make a change of your own.

HTML · Hello World!

What is HTML?

HTML stands for HyperText Markup Language. It describes the structure and meaning of a web page. For example, HTML tells the browser which text is a heading, which text is a paragraph, and where an image belongs. HTML is not a programming language for calculations; it is a markup language that organizes page content.

HTML uses words in angle brackets, such as , called tags. Most elements have an opening tag and a closing tag. The closing tag has a slash before the tag name.

 Hello World! 

 is the opening tag. Hello World! is the content.  is the closing tag.

The opening tag, content, and closing tag together make one paragraph element: Hello World!.

Your first HTML page

Open the shared sample in a new tab. The same sample file is used by the Japanese and English lessons. It is stored directly in the jspsych folder, beside dist and media; do not move it into en.

Open the example in a browser ↗ Download the HTML file

View the sample code

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! | はじめてのHTML</title>
</head>
<body>
    <h1>はじめてのHTML / My first HTML page</h1>
    <p>Hello World!</p>
</body>
</html>

Read the code from top to bottom

<!DOCTYPE html>
This declaration tells the browser to interpret the document using modern HTML. It is not an HTML tag. Put it at the very beginning of the file.
<html lang="ja"> ... </html>
The html element wraps the entire page. The lang attribute tells browsers and assistive technologies which language the page mainly uses. This shared sample uses Japanese for its main language; English text can still appear in the page.
<head> ... </head>
The head element contains information and settings about the page. Most of its contents are not shown in the page itself.
<meta charset="UTF-8">
This sets the character encoding to UTF-8. UTF-8 supports many languages and helps prevent text, including Japanese, from appearing as garbled characters. This meta element has no separate closing tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This setting helps the page use the actual screen width on a phone or tablet. Without it, a mobile browser may display the page as if it were much wider and shrink it to fit.
<title>...</title>
The title is shown in the browser tab and may be used in bookmarks or search results. It is different from the heading displayed inside the page.
<body> ... </body>
The body contains the page content that visitors see. In this example, it contains one heading and one paragraph.
<h1>...</h1> and ...
h1 marks the main heading of this page. p means paragraph and marks a block of text. The text between each pair of tags is the content displayed by the browser.
</body> and </html>
Close the elements in the reverse order in which they were opened. The body closes first, then the outer html element closes last.

HTML · writing rules

Basic rules for writing HTML

These habits make HTML easier to read and help prevent small mistakes. You will use the same habits when you start editing jsPsych examples.

Close elements that have an opening and closing tag. Write Text. The slash in  marks the closing tag. Some elements, such as <meta>, do not have a closing tag.
Close nested elements in the right order. If one element is inside another, close the inner element first: <body>Text</body>. Do not close the body before closing its paragraph.
Indent nested lines. Move the contents of head and body inward by one level (often four spaces or one Tab). Indentation usually does not change what the browser displays, but it makes the parent-child structure much easier to see.
Write attributes inside the opening tag. An attribute adds information to an element. For example, lang="ja" is an attribute on the opening html tag. Keep the value inside quotation marks.
Use lowercase tag names consistently. Browsers may accept uppercase letters, but lowercase names such as <body> are conventional and easier to compare with examples.
Save the file with an .html extension. Use a simple name such as hello-world.html. Keeping the sample beside the dist folder also ensures that its relative file paths keep working.
Keep the content and its tags paired. Text that should appear on the page belongs between the opening and closing tags, not before or after them.

HTML · practice

Try it yourself

In VS Code, open the extracted jspsych folder and select sample-hello-world.html from the folder's top level.
Use File → Save As to make your own copy named my-first-page.html in the same folder. Keep the original sample unchanged so you can compare it later.
Change the text inside <title>, save the file, and look at the browser tab. Notice that this text appears in the tab, not as the large heading in the page.
Change the text inside <h1>, save, and look at the page. This is the main heading shown in the page content.
Change the text inside , save, and observe the paragraph below the heading.
Try changing lang="ja" to lang="en". The words on the page do not automatically translate; the attribute describes the language so browsers and assistive technologies can interpret the text appropriately.
Check that every opening tag still has the correct closing tag and that the indentation makes the structure easy to follow.

If you use Live Server, right-click your saved HTML file and choose Open with Live Server. Otherwise, open the saved file in a browser. If your changes do not appear, save the file and refresh the browser.

Back to the course contents ↑