《HTMLの概要》

《タグの属性》
タグには属性と呼ばれるオプションがあります。
属性は、明示的に設定された値がなくても、デフォルトの値が設定されています。属性は常に要素の開始タグの中で使用します。属性が複数ある場合は各組を空白で区切り、出現順序は問われません。

次の例では、H1要素にID属性を設定しています。

これはid属性によって識別された見出し

属性値は上記のように、ダブルクォーテーション( " )、もしくはシングルクォーテーション( ' )といった引用符で囲みます。ただし、属性値が、アルファベット(a-z and A-Z)、数字(0-9)、ハイフン(ASCII十進45)、ピリオド(ASCII十進46)、アンダースコア(ASCII十進95)、及びコロン(ASCII十進58)のみを含む場合は、推奨されませんが、引用符を省略することができます。

《要素名と属性名》
HTMLでは大文字・小文字の区別をしませんが、要素名はのように大文字、属性は href="..." のように小文字で表記することが推奨されています。また、属性値も大文字・小文字で区別されません。

廃止される予定の属性
HTMLはバージョンアップする毎に表現能力をアップさせてきましたが、そのために様々な弊害が出てきました。そこで、HTML 4 でスタイルシート言語が導入されました。これまでHTMLで表現してきた配置、フォントサイズ、テキスト色などの指定はスタイルシート言語を使って指定することが推奨され、その代わり今まで使われていた要素や属性のいくつかは廃止される予定になっています。

改行は手動で行うもの
多くのワープロのドキュメントと違い、HTMLでは改行を無視します。また、複数の半角スペースは1つの半角スペースとして表現されます。
たとえば、下記のようなHTMLドキュメントを作成した場合です。

エディタで表示


Enterキーを押して改行。
どうだろう、ブラウザで改行されたかな?

ブラウザで表示
Enterキー

たかな?

ブラウザで表示
Enterキーを押して改行。 どうだろう、ブラウザで改行されたかな?
最初の例には文章の間に改行コードが入っていますが、ブラウザはこの改行コードを無視してしまいます。ブラウザに改行を指示するためには
タグを使う必要があります。



Enterキーを押して改行。

どうだろう、ブラウザで改行されたかな?

今度は次のように改行されます。
Enterキーを押して改行。
どうだろう、ブラウザで改行されたかな?

URIの概要
ウェブで利用できる資源、HTML文書、画像、ビデオクリップ、プログラム等はすべて住所を持っていて、この住所はURI(Universal Resource Identifier)と呼ばれる符号化形式で表されます。 URIの構成は次の例が基本です。 プロトコル://サーバーネーム.ドメイン/
例: http://www.rfs.jp/ 上記のURIは、「HTTPプロトコルを用いて利用できる文書が、 www.rfs.jp というコンピュータに存在し、 / というパスでアクセスできる。」という意味を持っています。場合によっては上記に続いて、サブディレクトリやファイル名が続いたりします。HTTPプロトコル(Hypertext Transfer Protocol)というのは、データをやり取りする規格で、これに続くファイルは、ウェブサーバ用のファイルであることを示しています。 プロトコルについては、HTTP以外にも、メール用の mailto やFTPの ftp などがあります。 ※一般には「URL(Uniform Resouce Locator)」という単語のほうが有名ですが、URIはそのURLの上位に位置するものです。
※「http://www.rfs.jp/」は、ファイル名を省略したアドレスです。サーバの設定により、ファイル名を省略した場合に使われるファイル名というのがあります。一般に多く使われるデフォルトのファイル名はindex.htmlで、その場合、「http://www.rfs.jp/」と「http://www.rfs.jp/index.html」は同じファイルを指定していることになります。 このアドレスは、ハイパーリンクで利用されます。
smartホームページ
表示結果は下記のとおりで、クリックするとタグで指定したアドレスのドキュメントが表示されます。 smartホームページ

相対URI
相対URIは、ページが置いてある場所を基準にして、リンク先のURIを指定するものです。例えば、http://www.rfs.jp/sb/html/index.htmlというURIのページから、http://www.rfs.jp/sb/html/01/01.htmlというページに相対RUIのリンクを貼る場合は、下記のようになります。
smartホームページ
上の階層にあるページ、たとえば、http://www.rfs.jp/sb/html/index.html というURIのページから、http://www.rfs.jp/index.html というページに相対RUIのリンクを貼る場合は、下記のようになります。
smartホームページ

詳しくはハイパーリンクの章を参照。



タグのネスティング
タグでタグを挟んだ状態をネスティングといいます。下記の例は、段落を示すPタグで、見出しを示すH1タグをネスティングしています。


Welcom to My Home Page!!


・・・・・・・・・・・・・・・・・・・・

上記の構造は、Pタグで示した段落要素の中に、H1タグで示した見出しが入っています。 ネスティングを用いるときには終了タグの位置に注意してください。鏡に映したように、囲むタグの両外側の位置が一致するようにします。
ブロックレベル要素とインライン要素
HTMLを構成する要素は、ネスティングできるレベルで大別し、ブロックレベル要素とインライン要素に分類できます。 簡単に説明すると、ブロックレベル要素は直接BODY要素内に配置できるもので、インライン要素はもちろん、ブロック要素をネスティングすることもできます。インライン要素はブロックレベル要素にネスティングされるもので、ブロックレベル要素を逆にネスティングすることはできません。
ブロックレベル要素
他のブロックレベル要素やインライン要素を含むことができます。一般的には、改行されてから表示されます。
インライン要素
データや他のインライン要素を含むことができます。一般的には、表示の際に改行を伴いません。

コメントタグ:

HTMLは文書中にコメントと呼ばれる要素を置くことができ、ブラウザはコメント部分を無視し表示しません。HTMLではそのコメントを記述するために、各行でコメントを で囲みます。コメント中に複数のハイフン( - )を含むことは避けたほうがよいそうです。

コメントには、HTMLファイルの著作権の表示や、ファイルの注意点を記述するために使われます。なお、ブラウザによっては、コメント内にHTMLタグを記述することもできます。コメントの中にタグが書けるというよりは、今書いているHTML文書をコメントにしておきたい場合、コメントタグを使うことによってHTMLタグを無効にできます。

エスケープ文字
タグの表記で使用する<>などは、文章中で使いたい場合などがあります。そのような際は、特別に用意された文字列(エスケープ文字)で参照することができます。よく使う例には、次のものがあります。
エスケープ文字 記号
< <
> >
" "
& &