初心者向けHTML入門：書き方の基本とタグの使い方

ウェブサイトを作るのに欠かせない『HTML』について学びましょう。初心者の方でも分かるように図をたくさん使って解説していくのでご安心ください。

1. HTMLとは？

HTML（えいちてぃーえむえる）とは、ウェブページの土台を作るための言語です。ウェブページに表示したい文章やウェブページの情報を独自のタグではさむことでHTMLを書いていきます。と言っても何のことだか分からないと思うので1つ1つ解説していきます。

1-1.HTMLはウェブページの土台！

インターネット上に公開されてるウェブサイトでHTMLを使っていないものはほとんどありません。今見ているこのページにもHTMLが使われています。

HTMLはウェブページに無くてはならない土台です。たとえば、ウェブページに表示する文字はHTMLのファイル上に書きます。

またウェブページに写真を表示させたいときにも、HTMLに画像を読み込むためのコードを書きます。

HTMLによりウェブページの文字や画像が再現されているのです。

1-2.HTMLだけではウェブページは完成しない

とはいえあくまでもHTMLで書くのはウェブページの土台です。HTMLだけで作られたウェブページは文字と画像だけが並んだ白黒の単調なものになってしまいます。

HTMLで作った土台のデザインやレイアウトを決めるのがCSSと呼ばれるコンピュータ言語です。CSSによりウェブページの文字や背景の色を変えたり、カラフルな線を引いたりして、見やすく装飾することができます。

CSSについては、次の記事で0から解説します。

1-3.こんなふうに書く

HTMLはこのように文字とアルファベットや記号を組み合わせて書きます。

複雑に見えますが、１つ１つおさえていくと、難しい話はほとんどありません。

2. HTMLをブラウザで表示してみよう

「HTMLがどのようなものなのか」実際にすこし触ってみると分かってくると思います。HTMLの基本的な書き方を学ぶ前に少しだけ実戦練習をしてみましょう。

2-1.サンプルのコードをブラウザで開いてみよう

ここからはテキストエディターとブラウザを使います。どちらも用意してから進めましょう。

1.テキストエディターを開く

テキストエディターを開きます。ここではSublime Textを例にします。画面やメニューの見た目はバージョンやOSによって異なりますが、ファイルにコードを書いて保存する操作は同じです。

2.サンプルコードをコピー

<!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>まずはHTMLについて学びましょう</p>
</body>
</html>

3.テキストエディターに貼り付け

テキストエディターにコピーしたコードを貼り付けます。練習のためにキーボードで打っても良いでしょう。画像は旧版のSublime Textを使った例で、現在のサンプルには言語と画面幅の指定も追加しています。上のコード全体をコピーしてください。

4.ファイルを保存

• Windows：ctrl+S
• Mac:⌘+S

をキーボードで押します。すると、保存ウィンドウが開きます。Save As:の欄がファイル名になります。

5.ファイル名の末尾は「.html」に

ここが重要です。ファイル名は「test.html」というように末尾に.htmlをつけましょう。これにより書いたコードがHTMLファイルとして保存されます。その後、保存先を選び[Save]をクリックします。

これでHTMLファイルの保存ができました。このファイルをブラウザで表示してみましょう。

6.ブラウザにHTMLファイルをドラッグ

フォルダウィンドウとブラウザウィンドウをそれぞれ縮小して横に並べます。そして、保存したHTMLファイルをブラウザの上にドラッグします。

7.ブラウザで表示された！

ブラウザでHTMLファイルが開かれました。ブラウザではHTMLのコードは変換され「ウェブページ」としての状態で表示されます。

このようにHTMLやCSSなどの言語で書いたコードは、ブラウザで開けば変換して表示してくれます。

2-2.コードを少し変えてみよう

さきほどのHTMLファイルを少し変更し、ブラウザに反映させてみましょう。

1.HTMLの中身を変えてみる

テキストエディターに戻り、HTML文の<h1>と</h1>に挟まれた文を好きなように変えてみましょう。

2.上書き保存

文を変えたら

• Windows：ctrl+S
• Mac:⌘+S

で上書き保存します。 新規保存と上書き保存のショートカットキーは同じです。

3.購入案内が表示された場合

【こんなウィンドウが表示されたら…】保存時にこのようなウィンドウがごくまれに表示されることがあります。これは旧版Sublime Textのライセンス購入案内です。評価中は［Cancel］で編集画面に戻れます。継続して使う場合は公式サイトで現在のライセンス条件を確認してください。

4.ブラウザでページを再読込

HTMLファイルの変更・保存ができたら、ブラウザに戻りページを再読込します。

• Windows：F5
• Mac:⌘+R

のショートカットを使うと楽です。

するとHTMLファイルで行った文字の変更が反映されました。一度開いてしまえば、ドラッグし直す必要はないわけですね。

このようにテキストエディターとブラウザを使って「HTMLを書き、ブラウザで確認…」という作業を繰り返してウェブページを作っていきます。

3. HTMLの書き方の基本

今度は「HTMLはどのように書けばよいのか」じっくり見ていきましょう。

3-1.HTMLの基本＝タグではさむ

さきほどのサンプルHTMLには<ほにゃらら>や</ほにゃらら>がたくさん使われてました。このほにゃららは『タグ』と呼ばれます。HTMLではこのタグで文や画像などなどをはさむというのが基本文法になります。

このように<タグ名>と</タグ名>で色々なものをはさんでいきます。それぞれ開始タグ、終了タグと呼ばれ、基本的にセットで使われます。※ 例外が少しだけありますが、それも後で解説します。

開始タグ〜終了タグまでのカタマリは要素と呼ばれます。

タグにはたくさんの種類があり「どのタグにはさまれるか」によってタグの中身の役割（＝意味）が変わってきます。

たとえば<p>と</p>ではさまれたものは「段落」を意味します。<h1>と</h1>ではさまれたものは「大見出し」を意味します。

さきほどブラウザで表示した文は、pタグとh1タグで書かれていました。h1ではさまれた「ゼロからウェブデザインを〜」が大見出しを、pタグではさまれた「まずは〜」が段落を表しているわけですね。

このようにHTMLはタグを使って文字や画像に役割を割りあてながら書いていきます。１つ１つ役割を作ることで、訪問者にとっては見やすく、Googleなどの検索エンジンにとっても内容を認識しやすいウェブページになります。

3-2.タグの中にタグを書く

コードをよく見てみると、タグの間に別のタグが入っている部分が多くあります。<h1>を 見てみると、<body>、さらには<html>の中に入っていますね。

HTMLでは「タグの中にタグ、さらにその中にタグ…」という書き方をしていきます。このタグの中にタグが入ることは「入れ子構造」と呼ばれます。タグの種類によって「このタグは中に書いてOK、このタグはNG」というようなルールがあるので注意しなければなりません。

3-3.開始タグの中に情報（属性）を書くことも

タグの種類によっては、開始タグの中に＋αの情報を入れる場合もあります。このタグの中に入れる情報は「属性」と呼ばれます。

例えば<a>~</a>はリンクを作るためのタグですが、リンク先のURLは開始タグの中にhref="リンク先のURL"という形で書きます。

なお、属性はタグ名のあとに半角スペースを空けてからを書きます。

リンクを書いてみよう

試しにサルワカのトップページへのリンクを書いてみましょう。 さきほどのHTMLの</p>のすぐ後あたりに書けば良いでしょう。そのあとは保存して、ブラウザで再読込すればOKでしたね。

<a href="https://saruwakakun.com/">サルワカへジャンプ！</a>

左のコードをHTMLファイルに追加してブラウザで表示すると「サルワカへジャンプ！」というテキストが表示されます。右側は見た目の例です。保存したファイル上のリンクをクリックすると、サルワカのトップページにつながります。このように「開始タグの中に情報を入れることもある」ということは覚えておきましょう。

4. HTMLファイルの基本構造

4-1.HTMLファイルは1番はじめに宣言を書く

ファイルの先頭に<!DOCTYPE html>とあります。これは「このファイルはHTML文書です」という宣言の役割をしています。

決まり文句のようにとらえて、HTMLファイルの1番はじめには宣言を書くようにしましょう。

現在のHTMLでは、先頭に<!doctype html>と書きます。ブラウザに標準モードで文書を表示させるための宣言で、終了タグはありません。大文字でも小文字でも同じように扱われます。

4-2.htmlタグでコード全体をはさむ

宣言の次には<html>というものがありますね。終了タグ</html>は1ばん下にあります。

文書全体を囲む要素です。省略できる場合もありますが、入門では開始タグと終了タグを明示しましょう。日本語のページならlang="ja"も書きます。

4-3.headにはそのウェブページの情報を書く

<head>~</head>の中にはそのウェブページのさまざまな情報や設定を書きます。

例えば「フォントの読み込み設定」「検索エンジンやブラウザがそのページを理解するための情報」「CSSファイルの読み込み設定」などをheadタグ内に書きます。

head内のコードは基本的に画面に表示されない

headタグの中の情報は、基本的にウェブページの画面に直接は表示されません。あくまでも様々な設定や情報を書くためのスペースなのですね。

4-4.titleは検索エンジンやブラウザなどに認識されて使われる

今回はhead内にtitleタグというものを書きました。<title>サルワカ</title>というやつですね。

titleタグは文字通り、ウェブページのタイトルを示します。ブラウザのタブ名や検索結果のタイトルを決める際の重要な手掛かりです。検索結果では他のページ情報から別の文言が選ばれることもあります。

たとえばtitle内の文は、ページ名としてブラウザのタブに表示されます。

検索結果のタイトルにtitleの文言が使われることもありますが、検索エンジンが見出しなどから別の文言を選ぶ場合もあります。

また、headタグ内の<meta charset="UTF-8">は、文字コードを指定するためのものです。とくに意味を理解しなくてもOKですので、日本語の文章を正しく扱えるよう、文字コードはUTF-8にし、この指定をheadの先頭近くに書きましょう。スマートフォンで見やすくするには、上のサンプルのviewport指定も役立ちます。
なお、実際のウェブページではもっとたくさんのタグが書かれます。くわしい書き方は別の記事で解説します。

4-5.画面に表示されるのはbody内のものだけ

ウェブページの画面に表示されるのは、<body>~</body>ではさまれたものだけです。

↑ブラウザに表示されているのは、body内に書かれたものだけ

「ウェブページの内容自体はbody内に書かれる」のだと頭に入れておきましょう。なお、bodyタグは基本的に1ページに1回しか使うことができません。

5. よく使うタグの書き方

ではbodyの中にはどのようなタグを書くのでしょうか。

これから紹介するタグはすべてbody内で使うものです。

5-1.pで段落をつくる

pタグ<p>~</p>は最もよく使われるものでしょう。段落を表しブログなどの文章では何度も使われます。pはParagraph（パラグラフ）のPですね。

このブログの文章も多くがpではさまれています。

HTMLコード

<p>ここに文章を書きます。</p>

ブラウザ表示

5-2. h1〜h6で見出しをつくる

h1〜h6タグは見出しを作るために使います。h1が最上位の見出しで、h2からh6へ順に下位の見出しを表します。初期表示では字の大きさも変わりますが、見た目はCSSで調整できます。たとえば、ウェブメディアやブログなどの記事のタイトルはh1で書かれていることが多いですね。図の見出しの文言は旧版の例です。コピーする場合は左の更新済みコードを使ってください。

HTMLコード

<h1>レベル1の見出し</h1>
<h2>レベル2の見出し</h2>
<h3>レベル3の見出し</h3>
<h4>レベル4の見出し</h4>
<h5>レベル5の見出し</h5>
<h6>レベル6の見出し</h6>

ブラウザ表示

見出しについてはこちらの記事で詳しく解説しています。

5-3.imgで画像を貼る

img（イメージタグ）は画像を貼るために使います。少し書き方が特殊なので注意しましょう。

imgでは終了タグは使わない

imgでは終了タグは使いません。

画像ファイルの形式

imgではJPEG、PNG、GIF、SVG、WebP、AVIFなど、ブラウザが対応する画像形式を表示できます。PDFや動画を表示するときは、目的に合った別の方法を使います。

imgの書き方

imgタグの中には様々な属性を書きます。

src=" "の中には画像のファイル名と場所を書きます。ページが開かれるとき、このsrcに書かれた画像が読まれるのですね。alt=" "の中には代替テキストというものを書きます。画像の内容や役割を言葉で伝えるもので、画像を表示できないときや読み上げ機能でも使われます。装飾だけの画像には空のalt=""を使う場合もあります。HTMLのimgには終了タグがなく、末尾のスラッシュも不要です。図の末尾の/は旧表記です。

実際に書いてみましょう。画像は一旦サルワカにアップロードされているものを使います。

HTMLコード

<p>こんにちは</p>
<p><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔" width="120" height="119"></p>

ブラウザ表示

画像を文章の一部として置く場合は、この例のようにpの中に入れられます。画像の用途に応じて配置を選びましょう。

5-4. aタグでリンクをつくる

さきほども説明しましたが、大事なので改めて触れておきます。

リンクを作るには<a>の中にhref="リンク先のURL"を書くんでしたね。aタグにはさまれた文字や画像がリンクになります。

aタグではテキストだけでなく、画像をはさむこともできます。画像のリンクボタンが作れるということですね。試しに「サルワカくんの顔の画像をクリックするとサルワカのトップページに飛ぶ」ボタンを作ってみましょう。

HTMLコード

<p>顔を踏んでね↓</p>
<p>
<a href="https://saruwakakun.com/">
<img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔" width="120" height="119">
</a>
</p>

ブラウザ表示

リンクタグについては、こちらの記事で詳しく解説しています。

5-5. ul・ol・liで箇条書きを作る

HTMLでは箇条書き用のコードも用意されています。<ul>と<li>のペア、もしくは<ol>と<li>のペアで使用します。

ulとliのセットで使う場合は<li>~</li>の中に箇条書き文を好きな数だけ書き、その前後を<ul>~</ul>ではさみます。

百聞は一見に如かず、実際にどのように表示されるのかを見てみるのが早いですね。

ulタグとliタグで箇条書きをつくる

HTMLコード

<ul>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ul>

ブラウザ表示

olとliで番号付の箇条書きに

ulの代わりにolを使うと、箇条書きのポッチが番号になります。

HTMLコード

<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>

ブラウザ表示

このように箇条書きの頭が数字になります。

このliの数はいくつでも構いません。箇条書きしたいだけ<li>~</li>の数を増やせば良いのですね。

箇条書きについては以下の記事でより詳しく解説しています。

5-6. brで改行

ウェブデザイン初心者からすると分かりづらいのが、「HTMLコード内でEnterを押して改行しても、ブラウザに表示される文ではその改行が反映されない」ということです。pタグは標準では別の段落として表示されます。一つの段落内で改行自体に意味があるときはbrタグを使いましょう。 brには終了タグは必要ありません。<br>だけで使います。

HTMLコード

<p>これは
例です</p>
<p>ここで<br>改行します。</p>

ブラウザ表示

<br>は住所や詩など、ひと続きの文章の中で改行自体に意味があるときに使います。別の段落に分けたい場合は<p>を使い、見た目の間隔はCSSで調整しましょう。

5-7. コメントアウトで自分用にメモ書きをする

HTMLコード内で<!--と-->ではさまれたコードはブラウザでは非表示になります。この部分はコメントアウトと呼ばれ、自分用にメモ書きをするときなどに便利です。画面には表示されませんが、ページのソースを開けば読めます。公開したくない情報はコメントに書かないようにしましょう。

HTMLコード

<h1>タイトル例です</h1>
<!--下にpタグ-->
<p>文章の例です</p>

ブラウザ表示

6. classとidを理解しよう

classとidは開始タグ内に書く属性の1つです。<p id="example">や<h2 class="name">というような書き方をします。

6-1.idやclassを書く＝タグに管理名をつける

classやidはタグに管理名をつけるような働きをします。「このaタグのid名は"link"」や「このpタグのclass名は"saruwaka"」というように自分の好きな管理名を、自分の好きなタグにつけることができます。 では、何のために管理名をつけるのでしょうか。

6-2.管理名をつけることで、その部分のデザインだけを変えることができる

管理名をつけることで、CSSでデザインを決めるときに、そのタグだけを特別なデザインに変えることができます。「HTMLで各タグに管理名をつけておき、CSSでその管理名のタグのデザインを変える」というイメージですね。

次の「CSSの書き方講座」でも触れるので、なんとなくそういうものなんだな程度に頭に入れておきましょう。

6-3.idとclassはどのタグにも使える

「aならhref=""でリンク先URLを書く」というようにタグごとに使える属性は決まっていますが、idとclassはどのタグにも書くことができます。

pにもh1にもaにもimgにも、classやidは使うことができるのです。

6-4. idとclassの書き方

idとclassは、他の属性と同じようにタグ名の後に半角スペースを空けてから書きます。管理名であるid名とclass名（""の中）は自分で決めることができます。

<タグ名 class="好きな名前">〜</タグ名> <タグ名 id="好きな名前">〜</タグ名>

<タグ名 id="好きな名前" class="好きな名前">〜</タグ名>のように両方入れることもできます。

id名とclass名の付け方

<h1 class="見出し">のように日本語を使うこともHTMLでは可能です。ただし、英字で始まる分かりやすい名前を選ぶと、CSSやJavaScriptから扱いやすくなります。class名には空白を入れず、複数のclassは空白で区切ります。

数字で始まる名前を使う場合

<h1 class="1title">もHTML上は使えます。ただし、CSSのクラスセレクターやIDセレクターでは数字で始まる名前をそのまま書けず、エスケープが必要です。初めは英字で始まる名前にすると簡単です。

6-5. idとclassも違いは？

ではidとclassの違いは何なのでしょうか。違いは以下のようになります。

id：1つのHTML文書内で同じid名を使うことができない class：何回でも同じclass名を使うことができる

たとえば、<h1 id="title">というタグ書いたら、別のタグに<h2 id="title">と同じid名を使うのはNGです。一方classであれば、何回でも使うことができます。<h1 class="title">と<h2 class="title">、<p class="title">のように同じclass名を使いまわしてOKです。

7. divとspanを理解しよう

さて、この記事最後の内容です。ここまでの内容とdivとspanの考え方を理解すれば、HTML学習の最大の難関は超えたと言っても良いでしょう。

7-1.divとspanはまとまりを作るために使う

<div>~</div>や<span>~</span>はコードにまとまりを作るためのコードです。

たとえば、divタグで複数のコードを２つのまとまりに分けてみます。それぞれのclass名を"one"、"two"としました。とはいえ、まとまりを作っただけなのでブラウザで見てもパッと見は変化がありません。

7-2.まとまりごとにデザインを変えることができる

しかし、divのまとまりにclass名をつけていれば、その部分だけデザインを変えることができます。この例のようにclass="one"のまとまりは背景を水色に、class="two"のまとまりは文字をオレンジに、というようなデザイン指定をCSSでできるわけです。

7-3.divとspanの違いは？

divとspanの違いは何なのでしょうか。

標準の表示ではspanは文章の流れの中に並び、divは前後の内容と別の行に配置されます。これはCSSの初期設定による違いで、HTMLに改行文字が追加されるわけではありません。図の「改行が挿入される」という表現も、その標準の表示を指しています。

標準で文章の流れに並ぶspanタグは、文章の一部の文字色を変えたり、線を引いたりするときに便利です。この図では、「例文」という文字だけを<span class="aka">でくくり、CSSでそのclass内の文字色だけを赤に指定しています。

このようにdivとspanをclass・id指定とうまく組み合わせて使えば、自由にデザインすることが可能になるのです。なお、divとspanの違いは以下の記事で詳しく解説しています。

まとめ