XHTMLマークアップ

XHTMLによるマークアップでは、まずコンテンツそれぞれの役割を表す「要素」の書き方を押さえておくことが.大切である。要素の範囲を<要素名>という開始タグと、</要素名>という終了タグで囲む。たとえば、テキストに「段落」という役割を与えるためには<p> と </p> で囲むのである。終了タグには「ここまで」ということを示す / (スラッシュ)をつける。タグはすべて半角、小文字で‘入力する点に気をつけよう。 ここで例示した pという要素は paragraph(段落)の略である。 XHTML の要素名は、なるべく人間が見てもわかりやすいように「英単語の省略形」で定義されているものがほとんどである。 次に「属性」「属性値」を押さえておこう。要素に特定の機能をもたせるのが「属性」、値が「属性値」である。テキストにリンクを 設定するには「ahref=”http://www.example.com/ テキス 卜< /a> と書く。この場合、要素は a、属性は href 、属性値は http:/ /www.example.com/ となる。 ほとんどの要素が、なかに他の要素を含むことができる。コンテンツのおおまかな範囲を示すdiv 要素のなかに、段落を意味するp要素を含めたとする。この場合、 div 要素を「親要素」、 p要素を「子要素」 と呼ぶ。 XHTMLによるマークアップでは、このように親要素と子要素を繰り返し記述しながら全体をつくっていくことになる。 p要素のなかにテ キス卜の強調を意味するstrong 要素を含めたり、画像を埋め込むた めのimg 要素を含めたり、といったことである。 このような要素の親子関係は、樹形図としてまとめることができる。この樹形図を文書ツリー構造、または単にツリー構造といい、文字どおり木の枝がどんどん分かれていくようなイメージで XHTML の構造をとらえるのである。ツリー構造は、 CSSでスタイルを 適用するときも常に意識すべき大切な考え方だ。 CSSでは div要素のなかのp要素のなかのstrong 要素と、ツリー構造をもとにスタ イルの適用対象を指定することができる。このように、ツリー構造を意識したスタイル設定が作業の大きな部分を占めることになる。