～目次～
bodyの中に記述する内容の説明
bodyタグの中には、ブラウザに表示される内容を記述していきます。
今回は、代表的なタグをいくつかご紹介していきます。
コピペで使用できるようにしていますので、必要であればご利用ください。
<h1></h1>タグ
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5>
h1タグとは、それぞれのコンテンツのタイトルのようなものです。
h1だったら本のタイトル。
h2だったら各章のタイトル。
h3だったら各文章のタイトル。
のように目次のような体系で数値が小さいものほど大きな括りとなっています。
基本的にはh1はページ内に１つにした方が良いでしょう。
それぞれのコンテンツの見出しを表示するときにはh1タグ、h2タグを使用しましょう。
<p></p>タグ
<p></p>
pタグとは、文章を記述するときに使用するものです。
文章を表示するときにはpタグを使用しましょう。
<a></a>タグ
<a href=""></a>
aタグとは、ハイパーリンクを表示するときに使用するものです。
WEBサイトの別のページを表示するときにはaタグを使用しましょう。
aタグにはhref属性が必須です。
別のページのURLを記述します。
<img>タグ
<img src="" alt="">
imgタグとは、画像を表示するときに使用するものです。
画像を表示するときにはimgタグを使用しましょう。
imgタグにはsrc属性が必須です。
WEBサーバにアップロードした画像のURLを記述します。
また、alt属性も出来る限り記述した方が良いでしょう。
何らかの理由で画像が表示できなかった時に、代わりに表示される文字になります。
その画像がどのような画像なのかわかるように記載すると良いでしょう。
<video></video>タグ
<video src=""></video>
videoタグとは、動画を表示するときに使用するものです。
動画を表示するときにはvideoタグを使用しましょう。
videoタグにはsrc属性が必須です。
WEBサーバにアップロードした動画のURLを記述します。
<table></table>タグ
<table>
<caption></caption>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
tableタグとは、表を表示するときに使用するものです。
表を表示するときにはtableタグを使用しましょう。
<ul></ul>タグ
<ul> <li></li> <li></li> <li></li> </ul>
ulタグとは、リストを表示するときに使用するものです。
メニューなどのリストを表示するときにはulタグを使用しましょう。
<input>タグ
<input type="">
inputタグとは、フォームを表示するときに使用するものです。
テキストボックスやチェックボックス、ラジオボタンなどを表示するときにはinputタグを使用しましょう。
<header></header>タグ
<header></header>
headerタグとは、ヘッダーエリアを表示するときに使用するものです。
文字や画像、動画を囲むときに使用します。
次に紹介するnavタグが中で使用されます。
<nav></nav>タグ
<nav></nav>
navタグとは、サイトナビを表示するときに使用するものです。
navタグの中にulタグを入れてリストを表示するときに使用されます。
<article></article>タグ
<article></article>
articleタグとは、内容が単体で完結するセクションを表示するときに使用するものです。
文字や画像、動画を囲むときに使用します。
次に紹介するsectionタグが中で使用されます。
<section></section>タグ
<section></section>
sectionタグとは、一つのセクションを表示するときに使用するものです。
文字や画像、動画を囲むときに使用します。
<footer></footer>タグ
<footer></footer>
footerタグとは、フッターエリアを表示するときに使用するものです。
文字や画像、動画を囲むときに使用します。
フッターエリアの中にもnavタグを使用することができます。
<div></div>タグ
<div></div>
divタグとは、箱を表示するときに使用するものです。
文字や画像、動画を囲むときに使用します。文字などもdivタグで記述できますが、文字の時はpタグを使用するなどdivタグの乱用はやめましょう。
まとめ
ブラウザに表示するために必要なタグの一例をご紹介しました。
bodyタグの中には、たくさんのタグを記述できます。
そして、表示する内容に合わせてタグを記述することによりどんなものでも表示できます。
今回ご紹介したタグは、ホームページを作成するためには必須のタグになります。最低限覚えておきましょう。
今後の記事で、それぞれのタグを使用して、WEBページを作成していきます。
