HTML入門① はじめてのWebページを作ろう
HTMLの役割と基本タグを学び、見出し・文章・リンクのある最初のWebページを作ります。
HTMLは、Webページの内容と構造を表すための言語です。
難しそうに見えても、最初に覚えることは多くありません。この記事では、見出し、文章、リンクがある1枚のページを作ります。
Webサイトで使われる言葉を先に確認したい場合は、Web開発の基本用語も参考にしてください。
HTMLはページの骨組み
HTMLでは、文章をタグと呼ばれる印で囲みます。
<h1>はじめてのWebページ</h1>
<p>HTMLを勉強しています。</p>h1はページの中心となる見出し、pはひとまとまりの文章です。開始タグから終了タグまでを含むまとまりは、要素と呼ばれます。
index.htmlを作る
作業用のフォルダーを用意し、その中にindex.htmlというファイルを作ります。次の内容を保存してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>わたしの学習ページ</title>
</head>
<body>
<h1>プログラミング学習ノート</h1>
<p>今日覚えたことを記録するページです。</p>
<a href="https://developer.mozilla.org/ja/">MDNで調べる</a>
</body>
</html>headにはページの設定、bodyには画面に表示する内容を書きます。titleはブラウザーのタブなどに使われます。
属性で追加情報を渡す
リンクのhrefや、htmlのlangは属性です。属性は、要素へ追加の情報を渡します。
<a href="about.html">このサイトについて</a>この例では、リンクを押すと同じフォルダーのabout.htmlへ移動します。ファイル名を間違えるとページが見つからないので注意しましょう。
ブラウザーで確認する
保存したindex.htmlをダブルクリックすると、ブラウザーで開けます。変更した後は、ファイルを保存してからブラウザーを更新します。
表示がおかしいときは、タグの閉じ忘れや、記号が全角になっていないかを確認してください。問題の探し方はエラーの読み方にもまとめています。
練習：好きなものを一覧にする
見出しの下に、好きなゲームや本を3つ表示してみましょう。箇条書きにはulとliを使います。
模範解答
<h2>好きなもの</h2>
<ul>
<li>アクションゲーム</li>
<li>科学の本</li>
<li>音楽</li>
</ul>解説
h2はh1の中にある話題の見出しです。ulが一覧全体、liが一つずつの項目を表します。内容は自分の好きなものに置き換えて構いません。
次に読む記事
ページの内容を作れたら、HTML・CSS入門② 色・余白・横並びを整えようへ進みましょう。
書き方を詳しく調べたいときは、MDNのHTML入門も役立ちます。