なるたけ正確なHTMLを書けるようお話するつもりです。
HTMLは、文書をマーク付けしていくものです。意味によってマーク付けしていくことが大切です。例えば、1番重要な見出しは、<h1>見出し</h1>のように書きます。この場合、「見出し」は、h1(という)要素でマーク付けしています。マークには、意味があります。その意味にあった適切な要素でマーク付けしていきましょう。
このページでは、よく使われる要素を、かんたんに説明しています。
よく使われる要素p,h(h1〜h6),aについて、お話します
たいていのページは、HTML文書は、文章が入っています。p要素は、段落を意味します。文章の段落ごとを、<p>段落の中身</p>のように囲みます。
<p>ケーキはチョレートケーキが好きです。</p> <p>飲み物は、ロシアンコーヒーを頂きたいな。</p>
h1〜h6のhはheading、見出しを意味します。h1が一番重要な見出し、h2,h3,...h6と続きます。<h1>人生論</h1>のように、囲んで使います。
数字を飛ばすのは、あまりよくないようです。h2,h4,h2でなく、h2,h3,h2のほうがいいです。
<h1>漫画</h1> <h2>少年漫画</h2> <h3>ジャンプ</h3> <p>ジャンプの特徴は、…</p> <h3>サンデー</h3> <p>サンデーの特徴は、…</p> <h2>少女漫画</h2> <h3>りぼん</h3> <h3>花とゆめ</h3>
aは、アンカー。他のリソース(他のページ、HTML文書等、URI)へのリンクを作ります。他のページへ移動します。
<a href="uri">リンク先の説明</a>のように使います。要素(この場合はa)に補足情報を与えるものを属性(この場合はhref)といいます。uriは住所です。index.htmlとか、http://www.yahoo.co.jp/等の参照先、リソースの位置です。
<a href="index.html">目次へ戻ります</a> <a href="http://www.yahoo.co.jp/">Yahoo Japanへ</a>
HTMLは、入れ子構造がよくでます。ある要素の中に別の要素をはさみこむことです。例えば、<p><a href="index.html">目次へ戻ります</a></p>は、p要素の中にa要素が入ってます。こういうのを入れ子といいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>たいとる</title> </head> <body> <p><a href="index.html">目次へ戻ります</a></p> </body> </html>
1行目の<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">は、どのHTMLのヴァージョンを使うかを宣言しています。文書型宣言とかDOCTYPE宣言とか言います。これは、HTML4.01 Strictというヴァージョンです。これは新しいので、他のヴァージョンを使う必要はありません。
次から、入れ子があります。htmlの中にheadとbodyが入ってます。headに、titleとmetaが入っています。bodyにpが入ってて、pにaが入ってます。
HTMLは、html要素の中に書きます。ただし、DOCTYPE宣言は<html>の前、1行目に書きます(参考。XHTML宣言も<html>の前です)。それ以外はhtmlの中に書きましょう。最後の行は</html>で終るのが望ましいです。
htmlの中に、headとbodyが入ります。headに、そのHTML文書の情報を入れます。例では、titleとmetaが入ってます。
bodyに、本文を書きます。例では、p要素が入ってます。要素は、ブロックレベル要素とインライン要素に分けられます(例外もある)。bodyの中に直接書けるのは、ブロックレベル要素だけです。
ブロックレベルは、大きい構造、かたまりです。段落、リスト等です。新しい行を作ります。インラインは行内と訳されますが、文の中の一部(全部になることもありますが)に意味を持たせるようなものです。インラインは、ブロックレベル内にしか書けません。
メタデータ、文書の情報を書きます。作者やロボット用検索キーワード、使うスタイルシートのタイプ等です。大体決ってますので、コピー＆ペーストで使えばいいでしょう。<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">は、テキストタイプにShift_JISを使いますよってことです。日本語は、この宣言の後に書きます。だから、titleの前に書かれます。
そのページのタイトル、表題を書きます。必須ですので、必ず書かなくてはいけません。
お気に入り、bookmarkに登録したときに、このtitleの使われます。なるべく詳しいのがいいです。