構造を記述するための HTML の要素が視覚的な表現のために利用されると，構造に基づいてそのページの内容を理解するUAは適切なナビゲーションを行うことができなくなる。例えば，ペ−ジリーダ（スクリーンリーダ）のような UA は「文字を大きく太く表示させるため」に用いられている <H1> を「一番重要な見出し」として読み上げてしまうかもしれない。HTML で構造を記述し，スタイルシートで視覚的表現をするということを可能な限り行うべきである。

「見出し」を表す <Hn> は，あくまで見出しである。<Hn>...</Hn> の中に書かれた内容は，多くの場合太字でサイズも大きく表現されるが，ブラウザによってはセンタリングされることもある。

「見出し」という役割を表すものであるのだ。したがって，<Hn>...</Hn> を文字を大きく太く表現する目的で用いてしまうと，文章の構造に基づいてページを読み上げる UA では,予期せぬところで「見出し」が登場し，文脈を失うということになる。また，文字が大きく太く表現されるというのは，あくまでそうされることが多いということであって，その表現方法は UA によって異なる。

また，見出しの階層的な構造の記述を適切に行うことも大切である。<H1> は一番重要な「見出し」，<H2> はその次に重要，<H3> はさらにその次というように，数字が若いほどその重要性が大きい見出しとなることはご存じであろう。

HTML で <BLOCKQUOTE> は長い引用を表す。多くのブラウザではこれらは前後で改行され，字下げされて表現される。しかし，字下げ目的で用いてはならない。この <BLOCKQUOTE> はあくまで引用という役割を持ったものであり，ブラウザによっては字下げとは異なった表現が用いられることもある。

同様に，リストはあくまで箇条書きを表すものである。多くのブラウザで字下げされて表現されるが，字下げ目的で用いてはならない。視覚的表現に気をとられすぎて，文書のきちんとした構造を見失ってはいけない。きちんとした構造があってこそ，それに見合った適切な装飾を行なうことができる。

上の例は，まったくひどいとしかいいようがない。文字の大きさを変えるために <Hn> を使っている上に，字下げのために <BLOCKQUOTE> を使っている。こんな記述をしていてはアクセシビリティの向上，やさしい HTML などは到底見えてこない。

フォントサイズやマージン，インデントの指定には絶対サイズと相対サイズでの指定方法がある。絶対指定は，文字の大きさやマージンを cm や pt で指定するやり方である。この方法ではユーザの環境によって大きさが変化することはない。一方，相対指定では em やパーセントなどを用いて指定する。この場合は画面の解像度や大きさによってサイズが異なる。

絶対指定をすると，ページの作者の思いどおりの外見を作り出すことができる。しかし，画面の幅・高さおよび解像度はユーザによってまちまちである。視力の低い人はページを拡大して見ているし，文字を大きくする設定をしているかもしれない。こんなときに「この文字のサイズは 〜cm です」と書かれていると面倒である。

同じように表現されていても，もしユーザが基準となるフォントの大きさを変えてしまったら，この 2つの例は異なって見える。ためしに，フォントサイズを大きくしてみるとよくわかるが，ある程度まで大きくすると，絶対指定された「強調」のサイズは，通常の文字のサイズより大きくなってしまうのである。製作者としては大きくしようとしてフォントサイズを指定したのだが，まったく逆のことになってしまっている。これでは正しい情報を伝えることは望めない。

一方で相対指定では，その環境にかかわらず，作者の意図を伝えることができる。120% などの相対指定を用いることによってユーザがすべての文字を大きくする設定をしてもその要素はさらに大きく表現される。また，マージンについても同様に，ユーザが画面の幅を狭くしていても，パーセント指定をしておけばその画面の幅の物理的な長さにかかわらず余白が確保される。

視覚障害者などの利用するテキストリーダには，HTML の構造を読んでいくものがある。もしその時に，表がレイアウトとして使われていたならば，ここから表，のように理解されてしまい，何がなんだかわからなくなってしまう。色の表現もそうだ。いきなり，ここは赤，といっても視覚障害者には何の意味も持たない。つまり構造の記述は表現の記述とは分離して書くべきである，ということなのだ。構造は構造，表現は表現と分離することで，発信される情報はひじょうに理解されやすいものとなる。