HTMLの基本を解説２ #初心者

今回は実際にブラウザーに表示される＜ｂｏｄｙ＞内に記述するタグを解説していきます。
タグの種類が多いので、よく使うタグのみ解説します。解説するタグだけでも簡単なWebサイトを作成できますので、頑張って覚えましょう。

基本文法とタグ

＜＞や＜/＞はタグと呼ばれるもので、HTMLでは基本的に文字列をこのタグで挟んで記述します。タグには様々な種類があり「どのタグで挟むか」によってその部分の役割が変わってきます。
　また、＜＞は最初に書かれる方を「開始タグ」、＜/＞は後から書かれる方を「終了タグ」と言います。基本的に二つセットで使われますが、場合によっては終了タグのないものもあります。開始タグから終了タグまでの一つのかたまりを要素と言います。

タグの解説

見出し＜１ｈ＞～＜ｈ６＞タグ
段落を表示する＜ｐ＞タグ
画像を表示する＜ｉｍｇ＞タグ
リンクを貼る＜ａ＞タグ
箇条書きリストを作る＜ｕｌ＞タグ＋＜ｌｉ＞タグ

見出し＜ｈ１＞～＜ｈ６＞タグ

見出しには＜ｈ１＞～＜ｈ６＞タグを使います。＜ｈ１＞、＜ｈ２＞、＜ｈ３＞、＜ｈ４＞、＜ｈ５＞、＜ｈ６＞と６種類のタグがあり、＜ｈ１＞が一番大きな見出しで、Webページのタイトルや記事のタイトルなどによく使われます。＜ｈ＞の後の数字が大きくなるほど小さな見出しになっていきます。

見出し

<h1>見出し１</h1>
<h2>見出し２</h2>
<h3>見出し３</h3>
<h4>見出し４</h4>
<h5>見出し５</h5>
<h6>見出し６</h6>

見出しタグは大見出しとなる＜ｈ１＞から順に使っていき、次の中見出しには＜ｈ２＞、小見出しには＜ｈ３＞のように、大きな見出しから数字の順だ使っていきます。文字の大きさなど、見た目を理由に当然＜ｈ５＞を使ってはいけません。もしそんなときはCSSで装飾しましょう。
　また、大見出しとなる＜ｈ１＞は基本的には１つのWebページにつき一箇所の使用が良いとされています。そのページのタイトルにだけ使用すると良いです。
　＜ｈ６＞までありますが、実際は多くても＜ｈ４＞で十分でしょう。

段落を表示する＜ｐ＞タグ

段落

<p>今日の天気は曇りです。</p>
<p>最高気温は１７℃です。<p>

＜ｐ＞タグは文章の段落を表すタグで、文章のまとまりを表示するときはこのタグを使います。＜ｐ＞タグを使うと囲まれた文章が段落になります。ブラウザーの表示でも段落ごと改行され、段落の間には少しスペースができます。改行されない長い文章は読みにくくなるので、＜ｐ＞タグを追加し、段落を分けて表示するとよいでしょう。

画像を表示する＜ｉｍｇ＞タグ

画像には＜ｉｍｇ＞タグを使います。通常のタグのように終了タグがないので、文字列を囲まず単独で使うのが特徴的です。

画像

<img src="ファイル名" alt="テキスト">

HTMLコード内に＜ｉｍｇ＞と書くだけでは画像は表示されません。「どの画像を表示するか」をsrc属性という場所を設定する属性を使って指示します。画像がHTMLファイルと同じフォルダー内にある場合は表示させたい画像のファイル名を書き、違うフォルダーにある場合はフォルダー名を含めたその画像へのパスを記述します。
　また、指定の際はalt属性も必須です。alt属性とはWebブラウザで画像がうまく読み込めなかった場合に、画像に代わって表示するテキストになります。alt属性を記述するとで、どんな画像が表示されるはずだったか伝えることができます。何の画像なのかわかりやすく記述しましょう。

補足～画像が別のフォルダー内にある時～

呼び出し元のあるファイルと同じ階層にあるフォルダー内のファイルを指定するときは、「/」を使って「フォルダー名/ファイル名」と記述します。
　呼び出し元のファイルも、対象とするファイルも、別のフォルダーにある場合は、「../」を使って一つ上の階層に行くという指定します。上手く画像が表示されないときは、パスの記述を間違えてる可能性が高いので、ファイルの位置関係を確認しましょう。文章にすると難しく見えますが、実際に書いてみるとイメージがつかめて理解が深まります。

リンクを貼る＜ａ＞タグ

リンクを作るにはリンクさせたい部分を＜ａ　ｈｒｅｆ=""＞と＜／ａ＞タグで挟みます。リンク先はｈｒｅｆ属性で指定します。同じフォルダー内の違うファイルへリンクする場合はファイルパスを指定するだけでリンクを貼ることができますが、別のWebサイトのURLを指定する場合は「ｈｔｔｐ：//」を先頭につけることを忘れないようにしましょう。

リンク

<a href="リンク先URL">リンクするテキスト</a>

＜ｉｍｇ＞タグと組み合わせることもできるので、＜ｉｍｇ＞タグを＜ａ＞タグで挟めばリンクができます。

画像リンク

<a href="リンク先URL">
　<img src="ファイル名" alt="テキスト">
</a>

箇条書きリストを作る＜ｕｌ＞タグ＋＜ｌｉ＞タグ

箇条書きリストを表示するには＜ｕｌ＞タグを使います。リストの表示は＜ｕｌ＞タグだけでは機能せず、＜ｕｌ＞タグ内に＜ｌｉ＞タグを使ってリスト項目を追加していきます。

リスト

<ul>
 <li>項目1</li>
 <li>項目2</li>
 <li>項目3</li>
 <li>項目4</li>
</ul>

終わりに

今回は頻出するタグについて解説しました。分かりにくい箇所があったかもしれませんが、真史実際に手を動かしてアウトプットすると、理解が深まりますので是非書いてみてください。

エンジニアファーストの会社　株式会社CRE-CO 吉川　真史