最低限度覚えておいた方がよい基本的HTMLタグ

WEB SITE制作で必要なHTMLタグですが、
ソフトやツールを使ってある程度簡単にWEB制作することもできますが、
最低限度覚えておいた方がタグを備忘録として書いておきます。

HTMLの知識はサイト構築の基本になります。

SEOの最適化にもある程度の部分はHTML知識が必要になるので、
是非覚えておきましょう。

基本的なHTMLタグ

以下はWEBサイトの記事更新などに利用する基本的なHTMLタグです。

• 改行タグ

<br />　もしくは　<br>

• 段落タグ

<p>　もしくは　</p>

• 横線タグ

<hr>

• 文字を太字

<b>太字</b>

• 文字を太字＋重要な文字と認識

<strong>強調文字</strong>

※strongタグは記事テーマに関する文章に使用し
１ページにつき１～２つくらいの使用に抑えることが適切と言われています。
（記事中にあまりにたくさんの重要キーワード指定があるのもよくない）

• 文字等の位置を指定する

<left>左側</left>
<rigit>右側</right>
<center>中央</center>

• 文字の背景に色を付ける

<span style="background-color: カラーコード;">文字</span>

参照：http://yume.hacca.jp/koiki/text/haikei.htm

• 文字の色の変更タグ

<font color=#E5E5E5>テキスト</font>

#E5E5E5の部分に各種カラーコードを指定していく。

カラーコードは以下のサイトで取得が可能です。

参照：カラーコード取得サイト

• 画像を表示させる為の指定タグ

<img src="画像ファイル名.拡張子">

画像ファイルで良く使用する拡張子は下記の３つです。
gif、jpg、png

※ファイル名のところには画像ファイル名を記載します。
※ファイル名と拡張子の間にある「.」（ドット）は消さないように注意します。

• Windows XP でファイルの拡張子を表示する方法
• Windows vista でファイルの拡張子を表示する方法
• Windows7でファイルの拡張子を表示する方法
• 画像の高さと幅、画像の代替テキストの指定

<img src="画像のURL" width="***" height="***" alt="画像の代替テキスト">
***の部分に画像のサイズを記載する

widthが横幅、heightが縦幅となります。

「画像の代替テキスト」部分に記載したテキストが検索エンジンクローラーが
その画像自体が何かを理解する為に指定するテキストになります。

• titleタグで表示テキスト指定

<img src="画像のURL" width="***" height="***" title="画像の表示テキスト">

画像にカーソルを合わせた際にブラウザ上に指定したテキストが表示されます。
画像が表示出来ないブラウザの場合には、指定したテキストのみが表示されます。

例えば、
「申し込みはコチラ」という画像であれば「申し込みはコチラ」と記載するのが基本です。
カーソルを画像上におくと、その指定したテキストが表示されます。
画像に関連するテキストを指定して下さい。

もし何も指定しない場合には下記のようになります。
<img src="画像のURL" width="***" height="***" title="">
（titleタグを入れなくてもいいです。）

• リンクの指定方法

画面内で開く場合
<a href="http://www.yahoo.co.jp/">Yahoo!JAPAN</a>

別窓で開く場合
<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo!JAPAN</a>

※http://www.yahoo.co.jp/の部分にリンクしたいURLを記載
※Yahoo!JAPANの部分に表示させたいリンクテキストを記載

ご自分の別のページへリンクする際には画面内で開く設定にするのが基本ですが
外部サイトへリンクをする際には別窓に開く設定にする事をおすすめします。
それにより、元サイトが閉じないのでユーザビリティにも役立ちます。

HTMLの単語登録

こちらで解説したような基礎的なHTMLタグについては使用する事が多いので
パソコンのキーボード入力において単語登録をしておくと便利です。

参照：単語登録方法の解説（サイトが削除されていたのでリンクも外しておきます）

単語登録しておけば忘れてしまってもタグを正確に記載する事が出来ます。

単語登録に関しては、各種入力システム上で設定できます。
以下の記事等を参照してみてください。

参照：Google日本語入力のインストール初期設定方法を解説

半角スペースを忘れずに

HTML記述では「半角スペース」が重要な場合が多いです。

例えば以下のような記述では、半角スペースが入っています。

<a href="http://www.yahoo.co.jp/" target="_blank">Yahoo!JAPAN</a>

target= の前に半角スペースが入っています。

この半角スペースが入っていないとタグが正しく認識されない場合があるので注意が必要です。

ブックマークして利用する

このような基本的なHTML記述を解説しているページをブックマークしておき、
WEBサイト構築時に開いて参考にするのも便利です。

当サイトの記事でも以下のものをブックマークおすすめします。

• 最低限度覚えておいた方がよい基本的HTMLタグ
• htmlタグ wordpressで必須のモノ基本まとめ
• WordPress投稿時の文字サイズ・色のhtmlタグでの変更方法

やっていくと段々なれていくので、頑張りましょう！