HTMLのひな型-HTMLの基本をおさらい

TOP > HTML  > HTMLのひな型

タグの書き方

タグとは

<html> や <font> などHTML文章中で < > を用いるものをタグといいます。 タグは、文字の大きさ・色の指定、写真の表示、テーブルの作成などに用い、ある程度の定番のタグを覚えればHTMLの作成は難しくありません。

開始タグと終了タグで囲む

　多くのタグは <font>～</font> のように 開始タグ と 終了タグ( "/"がついているタグ ) で1セットとなっています。 終了タグがないものには、imgタグやbrタグなどがあります。

タグの書き方

　HTMLに近いXHTMLではタグは小文字で記述する規約のため、HTMLのタグも小文字で書く習慣をつけたほうが好ましいです。 
○ <html>
△ <HTML>		//← できれば小文字で
× ＜ｈｔｍｌ＞		//← 全角文字でのタグ記述はNG
× < html>		//← <の後や>の前に空白が入らないように注意

属性

　<font color="red"> の color="red" の部分を 属性と言い、属性名＝"属性値"のように記述します。それぞれのタグにはそれぞれの属性があります。また属性は小文字で書く事が好ましいです。 
○ <font color="blue">～</font>
△ <font COLOR="BLUE">～</font>　//← 属性値はなるべく小文字で
△ <font color=blue>～</font>　//← 属性値はなるべく"で囲む
　属性値はXHTMLとの関係上、小文字が好ましいですが、大文字でも問題なく表示されます。ただし一部の属性値は小文字でなければいけません。 
○ <a href="xx.html" target="_top">～</a>
× <a href="xx.html" target="_TOP">～</a>	//← この属性値は小文字のみOK。
○ <a href="xx.html" target="_blank">～</a>
× <a href="xx.html" target="_BLANK">～</a>	//← この属性値は小文字のみOK。

複数の属性の指定

　属性は複数指定することが可能です。以下の場合は文字サイズを4に、文字色を赤に、フォントをTimes New Romanにしています。 
<font size="4" color="red" face="Times New Roman">

属性の省略

　一部の属性は、属性値を省略してもブラウザで問題なく表示されますが、XHTMLの登場などもあり属性値は省略しないほうが好ましいです。 
○ <input type="checkbox" checked="checked">
△ <input type="checkbox" checked>　//← 省略は好ましくない

タグを閉じる

　imgタグやbrタグなどは、閉じるタグがありません。その場合は、以下のようにそのタグ自体で閉じておく事が好ましいです。 
○ <br />
△ <br>			//← なるべく 半角スペース/ とする。
× <br　　/>		//← /の前は半角スペースを1つのみとする。
○ <img src="～" />
△ <img src="">		//← なるべく 半角スペース/ とする。
　属性名も大文字・小文字どちらでも構いませんが、必ず半角文字にしてください。属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行が必要です。属性を複数指定することも可能です。

タグの包含関係

　開始タグ～終了タグは、他の開始タグ～終了タグの完全に外側か、完全に内側でなくてはなりません。例えば、<s>～</s> を記述する場合、次のようになります。 
○ <font>～<strong>～</strong>～</font> 
○ <strong>～<font>～</font>～</strong>
× <strong>～<font>～</strong>～</font>　//← 包含関係がおかしい。

blank