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

TOP > HTML > HTMLのひな型

タグの書き方

タグとは

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

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

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

タグの書き方

 HTMLに近いXHTMLではタグは小文字で記述する規約のため、HTMLのタグも小文字で書く習慣をつけたほうが好ましいです。
○ <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