ホームページ作成時によく使うHTMLタグ

ホームページ作成時によく使うHTMLタグ「教えてマリオ」

ホーム>>教えてマリオトップ>>ホームページ作成時によく使うHTMLタグ

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。難しい言葉を使わず（使えない）噛み砕いた言葉で書いていくので、参考になればと思います。
＊勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

ホームページ作成時によく使うHTMLタグ

2012年3月24日
html

ここではよく使うHTMLタグをご紹介いたします。

HTMLタグはものすごい数存在しますが、よく使うものはそんなに多くありません。厳密にいうと色々なタグを使って文書構造をしっかり作成するのですが、初めは完成させることが肝心ですので、ここではよく使う、これだけは必ず必要、というものをご紹介したいと思います。

ホームページの作成を始めるのに、必要最低限の記述をしたHTMLファイルも最後にご紹介いたします。

必ず書いておかないといけないもの。
head内に書くもの
body内に書くもの
必要最低限の記述をしたHTMLファイル

1.必ず書いておかないといけないもの。

ここでは必ず書かないといけないものを紹介します。文章の内容とかではなくHTMLの全体像を表すタグです。ちょっと説明が下手ですが・・・

タグの名前と意味を紹介していきます。

開始タグ	閉じタグ	意味
<html>	</html>	以前タグ＝箱のようなものと説明しました、このタグは一番大きな箱になります。ほかのタグはすべて<html></html>の間に書かれます。（htmlという箱の中に箱を作るイメージです）意味は私はHTMLです！ホームページを作る言葉です！となります。
<head>	</head>	このタグはHTMLを人間に例えるとの頭の中（脳）になります。この中に書かれることは表示されることはありません。ここに書くのは何かを読み込む文章や、ページのタイトルなどを書く箱になります。意味は私はHTMLの頭の部分です！となります。
<body>	</body>	このタグはHTMLを人間に例えるとの体の部分になります。みなさんがインターネットで見ているホームページの情報はここの中に書かれたものを見ています。この中にいろいろなタグと文章を入れてホームページを完成させていきます。意味は私はHTMLの体の部分です！絵に例えるとキャンバスになります。

HTML構造

▲目次へ戻る

2.head内に書くもの

ここではhead(頭の中)に書くよく使うタグを紹介します。

開始タグ	閉じタグ	意味
<title>	</title>	ホームページのタイトルを入れます。居酒屋さんを例に出すと「居酒屋マリオ」などと入れる場所です。初めのころは入れるのを忘れる方が多いので注意しましょう。これは検索にかかるときに大変重要になりますので覚えておきましょう。
<meta name="keywords" content="ここに,（カンマ）で区切ってキーワードを入れる" />	ありません	これは自分のホームページに関係のある重要なキーワードを記述するものです。content=””の””の間に,カンマで区切って入れます。キーワードを書くときの注意点としては、作っているホームページに関係のある単語、詰めすぎないこと、5～１０個程度にすることをお進めします。このメタタグには閉じタグがありません。閉じタグがないものは必ず</>のように>の前に/（スラッシュ）が入ります。(XHTML1.0)
<meta name="description" content="ここに要約文を入れる" />	ありません	これはホームページの詳細（要約文）を入れるところです。グーグルで検索したときに黒文字で書かれているところに表示されます。content=””の””の間に簡単な紹介分を書きましょう。制限は特にありませんがあまり長くなりすぎないように書きましょう。
<link href="ここに.cssファイルがある場所をかく" rel="stylesheet" type="text/css" />	ありません	これは外部に書いてある.cssファイルを読み込むものです。.htmlファイルと.cssファイルを関連づけるものです。href=””の””の間に.cssファイルが置いてある場所を書きます。おいてある場所はパスで書きますがこのパスは今度詳しく投稿します。

タグが改行されて見づらくてすいません、最後にまとめます。

▲目次へ戻る

3.body内に書くもの

ここではbody(体)に書くよく使うタグを紹介します。

開始タグ	閉じタグ	意味
<h1>	</h1>	見出しになります。<h1>～<h6>の６段階まであり<h1>が一番重要な見出しになり番号が増えていくにつれて重要度が下がっていきます。例を出しますと、ワールドカップで日本が優勝した場合ですと、日本WP優勝が<h1>エースストライカーマリオが大会MVPが<h2>選手インタビューが<h3>のようになります。
<p>	</p>	段落になります。段落ごとに<p>で区切りましょう。
<div>	</div>	レイアウトコンテナです。タグ自体に特に意味はありませんが全体のレイアウトをする場合にこれを使います。
<a href="ここに飛び先">	</ap>	リンクになります。href=””の””の間にクリックしたときに開いてほしいホームページのアドレスや.htmlファイルを指定します。
<img src="ここに画像の場所" alt="画像の説明" title="マウスが画像の上に来たときポイントして出すもの">	ありません	画像を読み込みます。画像の場所はパスで指定しますがこれも今度詳しく投稿します。altには画像の説明、titleにも同じ説明を入れるのが基本です。titleは省略しても構いませんがaltは忘れずに書きましょう。
<br/>	ありません	改行です。復習で説明しますが閉じタグがないものは</>のように>の前に/（スラッシュ）がはいります。
<table>	</table>	表です。これは単体では書けず必ず<tr>と<td>とセットで書きます。
<tr>	</tr>	行です。先ほど書きましたが<table>と<td>とセットで書きます。<table>の中に書きます。
<td>	</td>	表の１マスです。<table>と<tr>とセットで書きます。<table>の中に書きます。
<li>	</li>	リスト（箇条書き）です。<ul>か<ol>の中に書きます。
<ul>	</ul>	<ul></ul>の中に書かれている<li>は順不同のリストであることを示すものです。順番がない場合のリストの時に使います。<li>とセットで書きます。
<ol>	</ol>	<ol></ol>の中に書かれている<li>は順番に意味があるリストであることを表すものです。順番や手順を示す場合に使います。<li>とセットで書きます。

タグが改行されて見づらくてすいません、最後にまとめます。

まだまだ重要なタグはありますが今後使うときに随時説明していきます。

▲目次へ戻る

4.必要最低限の記述をしたHTMLファイル。

まとめます。bodyに書くタグは作るホームページによって使うタグが変わりますが、head内に書くタグは必ず毎回使うものなので、１度書いてあとはコピーして使うと楽ですね。そこで必要最低限の記述をしたHTMLファイルを準備しましたのでダウンロードして使ってください。あとはそのつどタイトルを変更したりキーワードを変更して使ってください。

必要最低限の記述をしたHTMLファイルはこちらから

ダウンロードをされた方は本文中に書けなかった追記をメモ帳に書いておりますのでhtmlファイルを開きながら見てみてください。

▲目次へ戻る