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

初心者向けHTML書き方入門

記事内に商品プロモーションが含まれる場合があります

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

1. HTMLとは?

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

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

ウェブページのほとんどはHTMLで書かれている

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

ウェブページの文章はHTMLファイルで書く

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

ウェブページに写真を表示するときもHTMLで書く

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

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

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

HTMLとは?ウェブページの土台みたいなもの

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

CSSでデザインを決める

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

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

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

htmlコードの例

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

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

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

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

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

ここからは以下の2つのツールを使います。くわしくは「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」に

ファイル名を◯◯.htmlに

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

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

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

保存したファイルをブラウザ上にドラッグ

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

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

ブラウザでHTMLファイルが開いた!

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

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

サルワカくんの顔(通常)
サルワカくん
サーバーを借りるなどの手続きをしなくても、自分のパソコン内で練習したり、テスト用のウェブサイトを作ることは簡単にできるのです。

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

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

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

HTMLの中身の文字を変えてみる

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

2.上書き保存

上書き保存

文を変えたら

  • Windows:ctrl+S
  • Mac:+S

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

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

sublime textの警告を無視

【こんなウィンドウが表示されたら…】保存時にこのようなウィンドウがごくまれに表示されることがあります。有料版買わない?という内容なので無視すればOKです。[Cancel]をクリックして再度保存しましょう。

4.変更が反映される

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

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

  • Windows:F5
  • Mac:+R

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

ページの内容が更新された!

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

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

3. HTMLの書き方の基本

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

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

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

開始タグと終了タグ

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

タグと要素

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

タグの基本

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

タグの一例

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

h1タグとpタグの例

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

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

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

htmlタグの入れ子

コードをよく見てみると、タグの間に別のタグが入っている部分が多くあります。<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番はじめに宣言を書く

HTMLのはじめに宣言を書く

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

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

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

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

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

htmlタグとは?

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

htmlタグの使い方

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

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

headタグでウェブページの情報を書く

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

headタグ

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

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

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

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

titleタグの使い方

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

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

titleタグの用途

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

サルワカ 

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

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

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

画面に表示されるのはbodyタグだけ

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

HTMLコード bodyタグの中身だけが表示される
ブラウザ表示

ブラウザでHTMLファイルが開いた!

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

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

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

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

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

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

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

pタグ

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

HTMLコード
<p>ここに文章を書きます。</p>
ブラウザ表示

pタグの使い方例

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

h1〜h6タグは見出しを作るために使います。h1が1番大きい見出しで、数字が大きくなるほど小さい見出しになります。たとえば、ウェブメディアやブログなどの記事のタイトルはh1で書かれていることが多いですね。

HTMLコード
<h1>h1は1番大きい見出し</h1>
<h2>h2は2番目に大きい見出し</h2>
<h3>h3は3番目に大きい見出し</h3>
<h4>h4は4番目に大きい見出し</h4>
<h5>h5は5番目に大きい見出し</h5>
<h6>h6は1番小さい見出し</h6>
ブラウザ表示

見出しの使い方例

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

5-3.imgで画像を貼る

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

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

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

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

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

imgの書き方

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

imgタグの使い方

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

サルワカくんの顔(通常)
サルワカくん

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

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

HTMLコード
<p>こんにちは</p>
<p><img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔" /></p>
ブラウザ表示

imgタグの使用例

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>
ブラウザ表示

顔を踏んでね

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

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

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

箇条書きにはul(ol)とliを使う

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

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

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

HTMLコード
<ul>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ul>
ブラウザ表示

ulとliタグ

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

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

HTMLコード
<ol>
<li>ひとつめの項目</li>
<li>ふたつめの項目</li>
<li>みっつめの項目</li>
</ol>
ブラウザ表示

olタグとliタグで番号付箇条書き

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

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

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

5-6. brで改行

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

HTMLコード
<p>これは
例です</p>
<p>ここで<br>改行します。</p>
ブラウザ表示

brタグで改行

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

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

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

HTMLコード
<h1>タイトル例です</h1>
<!--下にpタグ-->
<p>文章の例です</p>
ブラウザ表示

サルワカ 12

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.管理名をつけることで、その部分のデザインだけを変えることができる

idとclass

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

サルワカくんの顔(通常)
サルワカくん
つまり「この部分だけデザインを変えたい」というタグにclassやidをふっておき、それをCSSのデザイン情報とひもづけるわけですね。

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

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

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

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

サルワカくんの顔(通常)
サルワカくん
「なぜわざわざ2つを使い分けるんだろう」と疑問に思うかもしれませんが、HTMLとCSSを書いていれば、だんだんと使い分け方が分かってきます。

7. divとspanを理解しよう

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

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

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

divタグの使い方

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

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

divタグによりまとまりごとにデザインを変えられる

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

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

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

divとspanの違い

spanではまとまりの前後に改行が入りません。一方divではまとまりの前後に改行が入ります。

インラインとブロック

spanのように前後の改行が入らないタグをインライン要素、divのように前後に改行の入るタグをブロック要素と呼びます。これについては奥が深いので、別記事で解説します。

spanの使い方

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

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

サルワカくんの顔(通常)
サルワカくん
どうやってCSSでデザインを変えていくのか、ということは次の講座で解説していきます。

まとめ

まとめ
  • HTMLはウェブページの土台!
  • HTMLにより文字や画像をウェブページで表示することができる
  • HTMLのデザインやレイアウトを変えるのはCSS
  • テキストエディターで書いたHTMLはブラウザにドラッグして表示できる
  • HTMLの基本=開始タグと終了タグではさむ
  • タグの中にタグを書いてもOK(入れ子構造)
  • 開始タグの中に情報(属性)を書くこともある
  • headタグ内にはウェブページの情報を書く
  • ブラウザの画面に表示されるのはbodyタグ内のコードだけ
  • pタグ=段落を表す
  • h1~h6タグ=見出しを表す(h1が1番大きい見出し)
  • imgタグ=ページに画像を貼る(終了タグは不要)
  • aタグ=リンクを貼る(href=””属性にリンク先URLを書く)
  • ulタグとliタグ=箇条書きをつくる。olとliだと番号の箇条書きに
  • brタグ=改行(終了タグは不要)
  • コメントアウト=コードにブラウザに表示されないメモ書きができる
  • idとclassでタグに管理名をつける⇒その部分だけデザインを変えられるように
  • 同じid名は1HTMLファイルにつき、1回しか使っちゃダメ。class名は同じものを何回使ってもOK。
  • divとspanによりコードにまとまりを作る
  • divとspanにより作られたまとまりごとにデザインを変えることができる
サルワカ