HTMLとは？最初のページを作ろう

LESSON 01 · はじめの一歩

HTMLは、文章や画像に「これは見出し」「これは段落」と役割を付けるための書き方です。まずは短い自己紹介ページを作ってみましょう。

青いノートパソコンと、h1・p・imgのタグを表した紙のカード — 小さな部品を組み合わせて、1枚のページを作ります。

今日できるようになること

見出しと文章を使ったページを、パソコンのブラウザー＊1で表示します。色や飾りは後回しで大丈夫です。

＊1 ブラウザー：ウェブサイトを開くためのアプリです。

HTMLは「文章の役割」を伝える

<p>こんにちは</p> と書くと、「こんにちは」を1つの段落にできます。この目印をタグ＊2と呼びます。<p> が始まり、</p> が終わりです。

＊2 タグ：文章などの前後に付ける目印です。終わりの目印には / が入ります。

コピーして、最初のページを作ろう

文字を編集するアプリに下のコードを貼り付け、文字の保存形式をUTF-8＊3にして index.html という名前で保存します。保存したファイルをブラウザーで開いてください。この例はパソコンでの練習用です。

＊3 UTF-8：日本語を含む文字を保存する方式の1つです。文字化けを防ぐため、コード内の指定とそろえます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>わたしの練習帳</title>
</head>
<body>
  <h1>はじめまして</h1>
  <p>今日からHTMLを学びます。</p>
</body>
</html>

どんなふうに見える？

画面には見出し「はじめまして」と、その下に「今日からHTMLを学びます。」が表示されます。ブラウザーのタブには「わたしの練習帳」が出ます。画面の本文は body の中に書きます。

表示のイメージ

はじめまして

今日からHTMLを学びます。

1分チャレンジ

本文の下に「好きなものは読書です。」という段落を追加しましょう。

答えを確かめる

</body> の前に、次の1行を追加します。好きなものは自由に変えてください。

<p>好きなものは読書です。</p>

うまく表示されないとき

ファイル名が index.html.txt になっていないか確認します。変更したら保存して、ブラウザーの再読み込みも行いましょう。

確認に使った公式資料：MDN「Basic HTML syntax」、MDN「HTML: Creating the content」