ホームページ制作の基礎知識
DOCTYPE宣言
HTMLでWebページを記述するとき、最初に記述するのがDOCTYPE宣言です。
「DOCTYPE宣言」とは、そのページがどのバージョンのHTMLで、どの仕様に従って作られているかのを、ブラウザに伝えるためのものです。
一般的によく使われているバージョンHTML4.01のルールでは必須とされているものですので、HTML4.01に準拠したページを作成するのであれば、このDOCTYPEの宣言を行う必要があります。
このバージョンHTML4.01には、Strictバージョン、Transitionalバージョン、Framesetバージョン の3種類があり、それぞれの記述方法や意味は次のようになります。
Strictバージョン
非推奨のタグや属性は使うことができず、タグの配置に関しても細かい決まりごとがあります。
また、フレームも使用することができません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Transitionalバージョン
非推奨のタグや属性が使用できますが、フレームは使用することができません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Framesetバージョン
Transitionalに加え、フレームを使用できるようにした指定です。フレームを指定するページの場合は、このDOCTYPE宣言を記述します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
難解でちんぷんかんぷんですが、これを翻訳するとこう言う意味になります。
「この文書は、既定のHTMLによるマークアップルールに則って作成されています」
まあ、ごく普通のホームページを制作される場合はTransitionalバージョンを書いておけばよいかと思います。
metaタグ
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
ページの文字コードを宣言することです。文字化け防止のためにも、この指定は必ず書いておくことをお勧めします。
<meta name="Keywords" content="キーワード1,キーワード2,キーワード3">
ロボット型検索エンジンによるホームページの自動収集に対して、検索してほしいキーワードを指定しておくことができます。
<meta name="Description" content="コメント">
このタグで指定したコメントは、検索の際に優先的に使用されるようです。省略することもできますが、ページのPRのためにも指定しておくことをお勧めします。
<meta name="Robots" content="ALL">
ロボット型検索エンジンによる、そのページとリンク先ページの自動収集を「許可する」という指定です。「とにかく自動収集してほしい！」という場合には、この指定を行っておくといいでしょう。
titleの付け方
ここに検索して欲しいキーワードを含めたタイトルが書かれていると、最もSEO対策に効果があると言われています。
このtitleタグを書くとどうなるかと言えば、ブラウザのキャプションバーと呼ばれるところ (ブラウザの一番上) に表記されます。通常はあまり見ないのですが、ロボット型検索エンジンにとってはとても重要な箇所と言います。
ここに「ようこそ○○のページへ」と書いたりししてはいけません。SEO対策上最悪となります。
あなたがもし、雑貨を販売していたら「雑貨の極秘情報」というような感じで、狙うキーワードから始まる文章をタイトルにしてください。
しかし、これでもまだよくないのです。雑貨の中でも中心商品となるものをキーワードとして書きます。
例えば、最も売りたい商品がTシャツなら、「Tシャツの極秘情報」といった感じです。
複数のキーワードをタイトルに入れたい場合は、「｜」で区切ってください。
Tシャツの極秘情報｜スウエットの極秘情報｜スニーカーの極秘情報---という感じです。
h*タグとは
h*タグ（h1〜h6）に囲まれた内容は、見出しとして扱われます。これはSEO対策に有効な記述と言われています。
一般的なブラウザでは、このタグで囲まれた文字は太字で表示され、上下に1行分のスペースを空けて改行が行われます。
タグには h1 〜 h6 までの6種類があります。見出しの重要度は h1 が一番高く、h6 が一番低くなります。
一般的なブラウザでは、見出しの重要度により文字の大きが変化します。
※文字の大きさはスタイルシートで変更することができます。
リンクをつくるには
aタグでリンクを設定できます。このタグに囲まれた内容が、リンクボタンになります。
<a href="---">リンク</a>
リンク先のページを別のウィンドウ（フレーム）で表示したい場合は以下のように記述します。
<a href="---.html" target="_top">リンク</a>
この記述の場合、文法チェッカーでは減点となります。そこで以下のように記述するとよいでしょう。
<a href="---.html" onclick="window.open(this.href);return false;" onkeypress="clickAction();">リンク</a>
メールソフトを設定するには以下のように記述します。メールの宛先欄には、指定したメールアドレスが既に入力済みの状態となって出てきます。
<a href="mailto:---@---">メールはこちらへ</a>
imgタグのaltとは
HTML4.01では、alt属性は必須とされています。できるだけ指定しておくようにしましょう。
alt="" に記述した文章は、以下のような場合に適用されます。
画像を表示しないブラウザの場合、画像の代わりにこのテキストが表示されます。
音声ブラウザの場合、画像の代わりにこのテキストが読まれます。
画像の読み込みが完了するまでの間、その部分にこのテキストが表示されます。
IEの場合、マウスでポイントしたときにこのテキストが数秒間表示されます。
文章タグについて
<p>タグ
段落（文章中の意味のまとまり）を指定することができます。段落と段落の間に1行分のスペースが空いて表示されます。
<p>簡単なホームページ制作辞典</p>と記述します。
これをブラウザで見ると次のように表示されます。
簡単なホームページ制作辞典
<strong>タグ
文字を部分的に強調したい場合はstrongタグを使います。
簡単な<strong>ホームページ制作</strong>辞典と記述します。
これをブラウザで見ると次のように表示されます。
簡単なホームページ制作辞典
<br>タグ
１行分スペースを空けず改行する場合はbrタグを使います。
<p>簡単なホームページ制作辞典<br>簡単なホームページ制作辞典</p>と記述します。
これをブラウザで見ると次のように表示されます。
簡単なホームページ制作辞典
簡単なホームページ制作辞典