初心者向け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.サンプルのコードをブラウザで開いてみよう

ここからは以下の２つのツールを使います。くわしくは「HTML・CSSの勉強に必要なツールを用意しよう」を読んで頂ければと思います。

必要なもの

テキストエディタこの記事ではSublime Textを使います。
ブラウザこの記事ではGoogle Chromeを使います。

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

テキストエディターを開きます。Sublime Textの場合、開くとすぐにコードが書ける状態になります。

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

<!DOCTYPE html>
<html>
<head>
  <title>サルワカ</title>
  <meta charset="UTF-8">
</head>
<body>
  <h1>ゼロからウェブデザインを勉強しよう！</h1>
  <p>まずはHTMLについて学びましょう</p>
</body>
</html>

次にこのサンプルコードをコピーしましょう。<!DOCTYPE...から</html>までですね。

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

テキストエディターにコピーしたコードを貼り付けます。練習のためにキーボードで打っても良いでしょう。

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.ブラウザでページを再読込

【こんなウィンドウが表示されたら…】保存時にこのようなウィンドウがごくまれに表示されることがあります。有料版買わない？という内容なので無視すればOKです。［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"という形で書きます。

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

となると<a>~</a>ではさまれるものは何かという疑問が湧いてきますよね。aタグではさまれたものはというと「クリックするとリンク先へと飛ぶ」ボタンになります。

リンクを書いてみよう

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

HTMLコード

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

ブラウザ表示

サルワカへジャンプ！

このコードをブラウザで表示すると「サルワカへジャンプ！」というカラフルなテキストが表示されます。クリックすると、サルワカのトップページにつながるはずです。このように「開始タグの中に情報を入れることもある」ということは覚えておきましょう。

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

タグの書き方がなんとなく分かったところで、さきほどブラウザで表示させたコードを順番に見ていきましょう。

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

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

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

この宣言コードは、HTMLのバージョンによって異なるのですが、最新のHTML5では<!DOCTYPE html>と書くことが決まっています。なお、終了タグはありません。

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

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

これは「ここからここまでがHTMLコードですよ」ということを表しています。これも決まり文句のようなものでHTMLファイルを作成するときには必ず書く必要があります。

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

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

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

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

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

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

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

titleタグは文字通り、ウェブページのタイトルを示します。「この文字がサイトのタイトルですよ」ということをブラウザや検索エンジン、twitterなどのSNSに伝える働きをするのですね。

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

検索エンジンに表示されるページのタイトルも、基本的にはtitle内の文字が使われています。

また、headタグ内の<meta charset="UTF-8">は、文字コードを指定するためのものです。とくに意味を理解しなくてもOKですので、日本語のサイトであれば、忘れずにこのコードを書くようにしましょう。
なお、実際のウェブページではもっとたくさんのタグが書かれます。くわしい書き方は別の記事で解説します。

head内に書くべきタグを総まとめ：SEO対策に有効なものは？

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

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

HTMLコード

ブラウザ表示

↑ブラウザに表示されているのは、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が１番大きい見出しで、数字が大きくなるほど小さい見出しになります。たとえば、ウェブメディアやブログなどの記事のタイトルはh1で書かれていることが多いですね。

HTMLコード

<h1>ｈ１は１番大きい見出し</h1>
<h2>ｈ２は２番目に大きい見出し</h2>
<h3>ｈ３は３番目に大きい見出し</h3>
<h4>ｈ４は４番目に大きい見出し</h4>
<h5>ｈ５は５番目に大きい見出し</h5>
<h6>ｈ６は１番小さい見出し</h6>

ブラウザ表示

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

【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？

5-3.imgで画像を貼る

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

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

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

貼ることができるのはJPG/PNG/GIF形式の画像だけ

imgで貼ることができるのは、JPGやPNG、GIF、SVGなどの画像形式だけです。PDFデータや動画データを貼ることはできません（GIFアニメーションは貼ることができます）。

imgの書き方

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

src=" "の中には画像のファイル名とありかを書きます。ページが開かれるとき、このsrcに書かれた画像が読まれるのですね。alt=" "の中には代替テキストというものを書きます。これは画像が読み込めなかったときに代わりに表示してくれる文になります。そして最後にはスラッシュ/を書きます。これは「終了タグはない」と示すものだと思っておきましょう。

srcの書き方は2パターンあるのですが、詳しくは別の記事で解説します。この他にもimgに書かれる属性はありますが、ひとまずはこの２つだけおさえておけば良いでしょう。

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

HTMLコード

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

ブラウザ表示

imgも文字と同じと認識されるので、段落と同じように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="サルワカくんの顔" />
</a>
</p>

ブラウザ表示

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

HTMLのリンク＜aタグ＞の書き方を初心者向けに解説

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>の数を増やせば良いのですね。

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

【HTMLで箇条書き】ul・ol・liタグの使い方まとめ

5-6. brで改行

ウェブデザイン初心者からすると分かりづらいのが、「HTMLコード内でEnterを押して改行しても、ブラウザに表示される文ではその改行が反映されない」ということです。pタグなどを使えばその前後で改行が入りますが、もし「どうしてもここで改行したいんだ！」というときはbrタグを使いましょう。 brには終了タグは必要ありません。<br>だけで使います。

HTMLコード

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

ブラウザ表示

とはいえ、コードを書くのがウマイ人は<br>をほとんど使いません。規則正しい文章を書いていれば、<p>の改行だけで十分だからです。現時点では「どうしても改行したくなったら<br>」と覚えておきましょう。

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

HTMLコード内でではさまれたコードはブラウザでは非表示になります。この部分はコメントアウトと呼ばれ、自分用にメモ書きをするときなどに便利です。コメントアウトは基本的にはウェブページに訪れた人が読むことはないので、自分が分かりやすい形で書いてしまってOKです（見ようと思ったら見ることができますが）。

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でその管理名のタグのデザインを変える」というイメージですね。

つまり「この部分だけデザインを変えたい」というタグにclassやidをふっておき、それを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="見出し">などのように日本語のid名やclass名をつけるのはやめましょう。idとclass名は英数字にしましょう。日本語だと何かとエラーが起きてしまう可能性があります。

id名とclass名の先頭に数字は使えない

<h1 class="1title">などのように先頭に数字を書くのはNGです。アルファベットから始まるid名、class名にしましょう。

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です。

「なぜわざわざ２つを使い分けるんだろう」と疑問に思うかもしれませんが、HTMLとCSSを書いていれば、だんだんと使い分け方が分かってきます。