Webサイトを作りたいと思ったとき、最初に触れるのがHTMLです。WordPressでブログを書いているときも、画面の裏では記事がHTMLになっています。
この記事では、HTMLの基本の書き方と、よく使う5つのタグ、ページ全体の形、書いたHTMLを試す方法をまとめます。
HTMLとは：Webページの「骨組み」
HTMLは「HyperText Markup Language」の略で、Webページの文章や画像に「ここは見出し」「ここは段落」といった意味を付けて、ページの構造を作るための言語です。Webページは、主に次の3つでできています。
| 言語 | 役割 | 家にたとえると |
|---|---|---|
| HTML | ページの中身と構造 | 柱や壁、部屋の間取り |
| CSS | 色、大きさ、配置などの見た目 | 壁紙や内装 |
| JavaScript | クリックしたときの動きなど | スイッチで動く設備 |
HTMLは「何が書いてあるか」を表し、「どう見せるか」はCSSの仕事です。この分担を覚えておくと、このあとの説明が分かりやすくなります。
基本の書き方：タグで囲む
HTMLでは、文章を「タグ」で囲んで、その部分が何なのかをブラウザに伝えます。
<p>ここに文章が入ります。</p>
<p>（開始タグ）：ここから段落が始まる</p>（終了タグ）：ここで段落が終わる。名前の前に/を付ける
開始タグと終了タグ、その間の内容をまとめて「要素」と呼びます。
よく使う5つのタグ
① 見出し（h1〜h6）
章や節の見出しに使います。h1 がいちばん上の階層（ページのタイトル）で、h2（章）、h3（節）と数字が大きくなるほど細かい区切りになります。
<h2>章の見出し</h2>
<h3>節の見出し</h3>
ブラウザでは h1 ほど文字が大きく表示されますが、これはブラウザの初期の見た目です。見出しタグは「文字の大きさ」ではなく「階層」を表すので、大きくしたいだけならCSSを使います。WordPressでは記事のタイトルが h1 になるので、本文の見出しは h2 から始めます。詳しくは「hタグ（見出し）の基本」で紹介しています。
② 段落（p）
ふつうの文章は、p（paragraph：段落）で囲みます。
<p>これはブログの本文です。HTMLを学ぶと、自分でWebページを作れるようになります。</p>
段落を分けるときは、改行ではなく p を分けます。似たタグの div との違いは「pタグとdivタグの違い」で紹介しています。
③ リンク（a）
他のページへのリンクを作ります。href に移動先のURLを書きます。
<a href="https://example.com">詳しくはこちら</a>
href のように、タグに追加で付ける情報を「属性」といいます。属性は「名前=”値”」の形で、開始タグの中に書きます。
④ 画像（img）
ページに画像を表示します。img は中に文章を入れないタグなので、終了タグ（</img>）は書きません。
<img src="cat.jpg" alt="窓辺で寝ている猫">
| 属性 | 意味 |
|---|---|
src | 画像のファイル名やURL |
alt | 画像の説明。画像が表示されないときに代わりに出るほか、目の不自由な人が使う画面読み上げソフトでも読まれる |
alt には、画像を見られない人にも内容が伝わる説明を書きます。飾りだけの画像なら alt=""（空）にします。
⑤ 箇条書き（ul・ol・li）
箇条書きを作るタグです。
ul：順番のない箇条書き（頭に「・」が付く）ol：順番のある箇条書き（頭に 1. 2. 3. が付く）li：箇条書きの1つひとつの項目
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>ぶどう</li>
</ul>
li は必ず ul か ol の中に書きます。詳しい書き方は「箇条書きリスト（ul / ol / li）の構文」で紹介しています。
ページ全体の形
実際のWebページでは、上のタグを次のような全体の形の中に書きます。
<!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>
</body>
</html>
| タグ | 役割 |
|---|---|
<!DOCTYPE html> | このファイルが今のHTMLで書かれていることの宣言。これがないと、ブラウザが古いページ向けの表示のしかたになることがある |
<html lang="ja"> | ページ全体を囲む。lang="ja" で日本語のページと伝える |
<head> | ページの情報（文字コード、タイトルなど）を書く場所。画面には表示されない |
<meta charset="UTF-8"> | 文字コードの指定。これがないと日本語が文字化けすることがある |
<meta name="viewport"> | スマホで画面の幅に合わせて表示するための指定。これがないと、スマホで文字がとても小さく表示される |
<title> | ブラウザのタブや検索結果に出るページのタイトル |
<body> | 画面に表示される中身を書く場所 |
今のHTMLは、「HTML Living Standard」として少しずつ更新され続けています。以前は「HTML5」と呼ばれていましたが、書き方の基本は同じです。ページを header・main・footer などで区切る書き方は「ページの正しい区切り方とセマンティックな構造化」で紹介しています。
書いたHTMLを試す
HTMLは、特別なソフトがなくても試せます。
- ファイルに保存して開く：
上の「ページ全体の形」をメモ帳やVS Codeに貼り、test.htmlのような名前（文字コードはUTF-8）で保存して、ブラウザにドラッグする - ブラウザだけで試す：
「CodePen」のようなオンラインエディタなら、書いたその場で表示を確かめられる
書いたページの上で右クリックして「検証」（Chromeの場合）を開くと、ブラウザがHTMLをどう読んだかも確かめられます。
まとめ
- HTMLはページの中身と構造、CSSは見た目、JavaScriptは動きを担当する
- 文章を開始タグと終了タグで囲んで、意味を伝える。img のように終了タグがないタグもある
- 見出しは大きさではなく階層で選ぶ。WordPressの本文は h2 から
- img の alt には、画像を見られない人にも伝わる説明を書く
- ページ全体の形には、文字コードと viewport の指定を入れる
コメント