HTMLの基本的な要素

HTMLではどんな要素を表さないか

次の例は、簡単な報告をレポート用紙に記した状態をイメージしています。

HTMLはどのくらい難しいと思われているか

1999年4月1日 内田明

WWWを徘徊していると、"HTMLあるいは「ホームページ」作りは難しいと思われているかもしれないけれども実はこんなに簡単なんだよ"といったニュアンスの「ページ」を見かけることがある。

さて、WWWの「ページ」ではなく、現在市販されている「HTML入門」あるいは「ホームページの作り方」等の書物のうち、例えば『ホームページはむずかしくない』のように、書名に上述のニュアンスが含まれているものはどのくらいあるだろうか。

今回仙台の大型書店で筆者が行なった調査では、書名に「HTML」が含まれる図書が61冊、「ホームページ」が含まれる図書が119冊、合計180冊あり、「『簡単』…」「1日で解る…」等のフレーズが含まれるものは計8冊(4.5%)であった。

この割合が多いのか少ないのかは、他のジャンルの入門書と比較するといった作業が必要だろうが、30-40%くらいに上るのではないかという自分の予想が裏切られる結果であったということは記しておきたい。「難しいと思われているようだけれども簡単だ」という風説の根拠が問われる結果なのではないかと、筆者には思われるのだ。

題名と署名に続けて、最初の段落が導入(introduction)、次の2段落が展開(main body)、最後の段落が結論(conclusion)を表しています。

このような、作文の構成方法として広く理解されている「導入-展開-結論」あるいは「起-承-転-結」といった「文章の構造」は、専用の要素としては、HTMLでは表せません。HTMLではすべて等しく、単なる「段落(Paragraph)」として表します。

HTMLではどんな要素を表すか

以下は完全な一覧ではありませんが、HTMLでは次のようなものを表すのだというイメージをつかんでみてください。

大きな構造の単位

見出し(Headings)

このページでも何段階かの見出しを使い分けていますけれど、HTMLには、「h1」から「h6」まで6段階の見出し要素があります。これは字の大きさの段階ではなく、章/節/項などの「階層」の段階を表すために使い分けます。詳しくは、HTML 4仕様7.5.5節をご覧ください。

段落(Paragraph)

前回まででお馴染みの「p」要素です。詳しくは、HTML 4仕様9.3節をご覧ください。

署名(Address)

上のレポートの書式で言えば「署名」、直訳すれば「連絡先」であるような内容を、この「address」要素が表します。詳しくは、HTML 4仕様7.5.6節をご覧ください。

リスト(List)

いわゆる箇条書きに、順不同のもの(Unordered List:「ul」要素)と順序付け(Ordered List:「ol」要素)があり、またこのリストのように定義リスト(Definition List:「dl」要素)と呼ばれるものもあります。「リストと表」のページで簡単な説明をします。

引用ブロック(Blockquote)

引用した文章は、「blockquote」要素として扱います。詳しくはHTML 4仕様9.2.2節をご覧ください。

表(Table)

情報を「行(Raw)」「列(Column)」の2次元的な並びで表現する際に、表=「table」要素を使いますね。「リストと表」のページで簡単な説明をします。

文章の一部分の性格を表す要素

強調(Emphasis)

文中に含まれる強調語句を、emphasis(「em」要素:弱い強調)とstrong(「strong」要素:強い強調の2段階の強度で表せます。詳しくは、HTML 4仕様9.2.1節をご覧ください。

特別な働きを持つ要素

ハイパーリンク(HyperLink)

ある「ページ」から別の「ページ」へ移動したり、特定のキーワードが別の記事に繋がっていたりする、その繋がりを表現します。「a」要素と「link」要素があります。「ファイル名とリンク」のページで簡単な説明をします。

外部ファイルの埋め込み(Multimedia Embeding)

画像や動画などテキスト情報以外のものや、当該HTML文書ファイル以外のファイルなどを、「ページ」を構成する要素として扱うことができます。画像(image)の場合「img」要素として表されることが多く、また画像を含むあらゆるモノ(object)の埋め込みは「object」要素として扱えます。「画像などをページに貼り付ける」のページで簡単な説明をします。

フォーム(Form)

検索エンジンやアンケートなど、ボタンや記入枠などを用いて特定のフォーマットで読み手の入力を受け付けたい場合に、「form」要素を用います。「フォームとスクリプト」のページで簡単な説明をします。

要素の親子関係の決まり

HTML 4の要素には、親子関係についての幾つかの決まりがあります。

詳しい内容はさておき、ブロック系とは何かということに、簡単に触れておきます。

例えば「強調語句」というのは、文を構成する要素であり、文が集まって(あるいは1つの文が)段落を構成します。このような、文章の構成要素に見られる自然な階層構造を反映させて、HTMLでは、ブロック系の要素(block level element)と行内要素(inline element)という分類が行なわれています。

この両者には、body要素の直接の子要素になるかならないかという違いと共に、多くのWWWブラウザの標準表示で「改行を伴う表示」になるか「行の一部を成す表示」になるかという違いがあります(関連:ページレイアウト)。

また、ブロック系要素には、他のブロック系要素の親になれるもの(ブロックコンテナ)と親になれないもの(インラインコンテナ)という違いもあります。例えば「段落の中の段落」というのは不自然なので、p要素は別のp要素の親になることはありません。一方「引用ブロックの中の別の引用ブロック」という構造(つまり孫引き)は十分あり得るので、blockquote要素はブロックコンテナとして定義されています。


目次/詳細目次

まず1つ作ってみよう

色を変えてみたりする

HTMLの基本的な要素

ファイル名とリンク

画像などをページに貼り付ける

ページレイアウト

リストと表

フォームとスクリプト

HTML化する文章と文字

Web用の文章の組み立てを考える

HTMLで表せない型や要素

ドキュメントオブジェクトとDynamic HTML


Thanks a lot for many visits since April 13, 1999.

1999 - 2001 内田明
uchida@happy.email.ne.jp