こちらでは現在最も多く使われているHTML4.0の中から比較的ポピュラーな物のいくつかを初歩のタグに続いて紹介したいと思います（若干重複する物もあります）。
「見ても良くわからない」てゆう人は初歩のタグや要素と属性を再確認してください。感覚が掴み易くなるようにわざと一部重複させてある部分もありますのでよくご覧になってくださいね。
なお一覧表の見方は下の例を参考にしてください。
要素
簡単な解説文
ここに書くトップレベルエレメントは後で出てくる一般的なエレメントと違って同一文書内（ひとつのドキュメントの中）には一組しか存在してはいけない・また絶対に一組は存在しなければならない重要なものです。
最初から意味を含めた全てを覚えるのは大変でしょうからテンプレート等を用いてこのトップレベルエレメントの構造が破綻しないように十分に注意してページ製作を行うようにしてくださいね。慌てなくても大丈夫。常に正しい構造を見つづけていれば自然に慣れてきていつのまにか覚えちゃってる筈ですから。ではそろそろいきまっしょい。
<html> - </html>
「これはHTMLドキュメントである」とゆう事を表すものでHTMLドキュメントには必須の項目です。 これは一切省略したり出来ません。このタグは必ずトップレベルで書く必要があると同時にこの外に何かを書く事は出来ません（＊除doctype）。
なお通常の場合<html>の後には後述する<head>・<body>が続きこれらを包括します。 ただし<frameset>を使う場合は<body>の位置には<frameset>が置き換えられる形で入ります。 <frameset>を使う場合の<body>は<noframes>の中に入ります。
<head> - </head>
これはHTMLドキュメントのヘッダインフォメーションで主にドキュメントの情報等が入ります。 こちらもHTMLドキュメントでは必須項目で一切省略したり出来ません。 原則として<head>の後には<body>が続きます。
<body> - </body>
これはHTMLドキュメントの本文で主に画面で目にする文字情報や画像情報等が入ります。 こちらもHTMLドキュメントでは必須項目で一切省略したり出来ません。 原則として<head>の後には<body>が続きます。
通常は<html><head><body>と構成されますが<frameset>を使用する場合は <body>の位置が<frameset>に置き代わります。 また<frameset>の中に<noframes>がある場合はその中に<body>を使います。
<frameset> - </frameset>
<frameset>は一般にフレーム表示と言われている画面を分割する為の枠（入れ物）を作る為に使われます。 参考：フレーム制御の概要
<h1> - </h1> ... <h6> - </h6>
これはHTMLドキュメントの中での「見出し」に使います。 数字はそれぞれ重要度の意味を持ちます。 <h1>は「見出しレベル1」で最も重要な見出しとなり<h2>は「見出しレベル2」で2番目に重要な見出しです。以降も<h3>が3番目<h4>は4番目とゆうふうに続き<h6>は最も重要度の低い見出しになります。
注意すべき点は一般的にひとつの文書内で<h1>はもっとも重要な見出し1つにしか使えません（つかうべきではありません）。 それ以下のレベルの見出しはレベルの矛盾（ここで言う矛盾とは<h2>（重要度2の見出し）が1つも無いのにそれ以下の<h4>（重要度4）があるような状態です）が生じない限りは特に制限無く使えます（むやみに使うべきではありませんけれど）。
<table> - </table>
<table>は縦横に分割された表を作る時に使います。 <table>内には複数のセルを配置する事により「単純な表」から「複雑な表」まで用途に合わせて表す事ができます。
横列を<tr>で表しその中には複数のヘッダセル（<th>）やデータセル（<td>）を入れて使います。 なお<table>タグは後方互換を持たせる為にレイアウトに用いる人も多いのですが本来はそういった使い方をするべきではありあません。参考：テーブル
<blockquote> - </blockquote>
引用された区画を表します。中には<p>や<table>のようなブロックレベルエレメントを入れられます。本来は先に述べた通り「引用部分」を表すタグですので単なる文章のインデント等に使うべきではありあません。
<p> - </p>
これはHTMLドキュメントの中で「段落」を表します。説明の中でも何度か出てきましたね。 使用する時に注意しなければならない事は<p>は他のブロックレベルエレメントを内包できないとゆう事です。 例えば<p>の中に<h1>があったり<table>があるのは間違いです（てゆうか考えると普通変でしょ？）。 この辺は段落の意味を考えればなんとなく理解できると思います。
<address> - </address>
一般的に管理者へのコンタクトをとるための簡易情報を表記する時に使います。 管理社名・メールアドレス・ページアドレス・電話番号・郵便番号などいろいろと使う事が出来ます。
<div> - </div>
<div>はブロック・テキストに関わらずあらゆるエレメントを内側に含む事が出来ます。 またブロックレベルエレメントを内側に含む事の出来る全てのエレメントの中に含まれる事も出来ます。
<pre> - </pre>
整形済みテキストに使います。<pre>で囲まれたブロックは改行タグなどを使用しなくてもドキュメント内のキャリッジリターン等がそのまま画面に反映されます。
<form> - </form>
これはすぐわかりますよね。文字通りフォーム部分を定義します。 実際の使用時には<select>・<input>・<textarea>・<button>などと組み合わせて使われる事になります。
<a> - </a>
<a>はリンクで使われますのでご存知ですね。最もよく見るのはhrefを使いリンク先を指定する場合やnameを使って文書内にアンカーを打つ場合でしょう（下記attribute欄参照）。なお<a>は<a>自身を除く全てのテキストレベルエレメントを内側に含む事が出来ます。
<q> - </q>
引用部に使います。意味的には先ブロックレベルエレメントで紹介した<blockquote>と同じと考えてもらって問題ありません。両者の違いは<blockquote>がやや長い内容を扱いやすいブロックレベルの扱いなのに対して<q>はごく短い引用部分を扱いやすいようにテキストレベルの扱いになっている事です。
<em> - </em>
<em>は内容を強調する意味を持ちます。 <em>は多くの場合において見かけ上「斜体」として表示される事になりますが 「強調の必要が無く単に見かけを斜体にしたいだけの場合」にはアンストラクチャルエレメントである<i>を使う方がより適切でしょう。
<strong> - </strong>
<em>同様に内容を強調する為に使いますが<strong>は<em>よりも更に強く内容を強調する意味を持ちます。<strong>は多くの場合において見かけ上「太字」として表示される事になりますが 「強調の必要が無く単に見かけを太字にしたいだけの場合」はアンストラクチャルエレメントである<b>を使う方がより適切でしょう。
<code> - </code>
<code>はコンピュータのコードを意味します。内容が複数行にわたる場合はブロックレベルエレメントである<pre>と組み合わせて使うとより効果的な場合があります。なお特に意味を持たない文字列を単に等幅フォントで表示したい場合は<tt>を使うほうがより適切でしょう。
<span> - </span>
<span>はブロックレベルエレメントである<div>のテキストレベル（インライン）版と考えても良いでしょう。ただし<span>は<div>と違いテキストレベルエレメントですから当然ブロックレベルエレメントを内包する事は原則として出来ません。
ここまでの内容がある程度きちんと理解できているようであれば専門書籍や専門サイトを見てもある程度の事は理解できるようになっていると思います。 最初から読み進めてこられた方なら初歩的なHTMLを覚えつつタグや解説文の見方も自然と身についているのではと思います。 いえ。管理者が「そんな感じになるようにしたいな」と思って意識して構成されたページとゆうだけなので実際にどうだかは解りませんけれど。
作った側としても「ここまでくればHTML初心者編は一区切りかなー」と思います。
あとは何を加えるべきかなと少し考えてみましたが特に思いつきませんでした。
まあしばらくはあちこちで細かい修正や補完が必要になってくるとは思いますけれどね。
何かあったら掲示板にでも書いておいてくださいましぇり。
ではお互い頑張りましょうね。おおー！
おつかれさまでした。
| SEO | [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送 | ||
