HTMLの基本とHello World! はじめの一歩

jsPsychを始める前に、HTMLファイルの基本構造と、コードを書くときのルールを学びます。最初のページとして「Hello World!」をブラウザに表示してみましょう。

HTML · Hello World!

HTMLとは

HTML（HyperText Markup Language）は、Webページの構造を記述するための言語です。「これは見出し」「これは段落」のように、文章の各部分に意味を与えます。

HTMLでは、文字を < と > で囲んだタグを使います。ただし、タグと要素は厳密には同じものではありません。

 Hello World! 

：開始タグ　Hello World!：内容　：終了タグ

これらを合わせた Hello World! 全体が要素です。

最初のHTML

ブラウザで試す ↗ HTMLを保存

サンプルコードを見る

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

コードを上から読んでみよう

<!DOCTYPE html>
この文書をHTML5として解釈するよう、ブラウザに伝えます。タグではなく宣言で、ファイルの先頭に書きます。
<html lang="ja"> ... </html>
HTML文書全体を囲みます。lang="ja" は、ページの主な言語が日本語であることを示す属性です。
<head> ... </head>
ページ全体の設定を書きます。通常、この中身はページ本文には表示されません。
<meta charset="UTF-8">
文字コードをUTF-8に指定し、日本語の文字化けを防ぎます。meta は終了タグを必要としない要素です。
<meta name="viewport" ...>
スマートフォンなどでも画面幅に合わせて表示するための設定です。
<title>Hello World!</title>
ブラウザのタブに表示されるページ名です。ページ本文の見出しではありません。
<body> ... </body>
画面に表示する本文を入れます。この例では見出しと段落を置いています。
<h1> と 
h1 はページの最も重要な見出し、p はparagraph（段落）を表します。

HTMLを書くときの基本ルール

基本は開始タグと終了タグを組にする：内容 のように書きます。終了タグには / が付きます。
入れ子の順序を守る：後から開始した要素を先に閉じます。<body>文章</body> の順です。
階層に合わせてインデントする：内側の要素を半角4文字分（Tab1回分）下げると、親子関係が見やすくなります。インデント自体は表示にはほぼ影響しません。
属性は開始タグに書く：lang="ja" のように、属性名・=・引用符で囲んだ値を記述します。
タグ名は小文字で統一する：HTMLでは大文字も動く場合がありますが、小文字に揃えると読みやすくなります。
ファイル名の末尾を .html にする：例として hello-world.html とし、半角英数字とハイフンを使うと安全です。

教材の目次に戻る ↑