XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。
画像（img要素）を見出しとするのは悪か？
「見出しとして埋め込むのはテキストだけであって、画像（img要素）を埋め込むのは正しくない」と勘違いしている人が意外と多い。特にテーブルレイアウトに慣れ親しんでいる人は、Webページにとって骨格である「見出し」をきちんとマークアップするという発想がなく、見た目として「見出し」のように見える画像を置いておけばそれでオーケーと判断してしまうケースが多いようだ。
構文的なことをいえば、どの文書型であっても、h1～h6要素はテキストだけでなくインライン要素を含むことができるため、インライン要素であるimg要素を含めても当然問題がない。alt属性できちんと代替テキストを指定しておけば、文字どおり「テキスト相当」として機能する。
<h1> |
| hr要素のマークアップ例 |
実務上、高いデザイン性が求められるページでは、見出しとして単にテキストを埋め込んだのでは質感が損なわれてしまう恐れがある。CSSでいくら精緻にテキストのスタイル設定しても、画像編集ソフトで表現できるほどのクオリティを実現するのは不可能である。
結論としては、それがテキストであろうと画像であろうと、見出しであればh1～h6要素でマークアップすること、そもそも画像を特別扱いせずテキストのように扱うことが大切である（インライン要素は、昔は「テキストレベル要素」と呼ばれていたことからも、この発想は非常に重要だ）。
水平線「hr要素」は悪か？
ページのなかに水平線（horizontal rule）を引くためにhr要素が利用できるが、あまり使われなくなっているのが現状だ。使い道としては、ある情報ブロックと他の情報ブロックを区別する目的で利用するのが一般的であるが、XHTML 1.1（その基礎資料であるModularization of XHTML）ではプレゼンテーションモジュールに分類されていること、XHTML Basicでは定義されていないことから考えると、構造ではなく見栄えのみを指定する要素と考えられるのが、使われなくなっている理由といえる。
しかし、hr要素はページのなかで明確な区切りを意味するという役割があるので、必ずしも見栄えのみに関する要素とは言い切れない。たとえば、ヘッダー、メインコンテンツ、サイドバー、フッターのそれぞれをhr要素で区切るのは構造的な区別であって、必ずしも見栄えの指定に当たるわけではない。CSSが利用できない環境では、hr要素で内容が区切られていることで、ユーザーがそのhr要素を頼りにそれぞれの内容を区別しやすくなるといった実際的なメリットもある。
<div id="header"> <hr /> <div id="content"> <hr /> <div id="sidebar"> <hr /> <div id="footer"> |
| hr要素のマークアップ例 |
 |
| hr要素のブラウザでの表示（CSS不適用時） [画像のクリックで拡大表示] |
なお、現在W3Cで策定中のXHTML 2.0では、構造モジュールに関する要素のひとつである「seperator要素」が導入され、hr要素はこれに代替される予定だ。separator要素はhr要素と同じように、ページ内の構造的な区切りとして利用する。
