文法チェックの<A>と</A>の間が空ですについて

質問

初めて文法チェックのサイトで、トップページのHTMLファイルをチェックしました。

99件ものエラーがあり、ある程度、解決しました。
しかし、グローバルナビゲーションのコードで出たエラーの対処のしかたがわかりません。

エラー　→　<A>と</A>の間が空です

私の場合、グローバルナビゲーションのタグは次のように記載してます。

<ul id="globalnavi">
<li id="menu1"><a href="http://www.test.com/"></a></li>
<li id="menu2"><a href="http://www.test.com/company.html"></a></li>
<li id="menu2"><a href="http://www.test.com/.itemhtml"></a></li>
<li id="menu2"><a href="http://www.test.com/.question"></a></li>
<li id="menu2"><a href="http://www.test.com/request.html"></a></li>
</ul>

何が問題かというと、確かに<a>と</a>の間は空なのですが、この間に「会社概要」、「商品」、「よくある質問」、「問い合わせ」などを記載すると、CSSで出力している画像と重複してしまい、見栄えに問題が生じるからです。

あまり推奨されることではないですが、私は画像に背景と項目名を表記しているので、<a>と</a>にテキストを入力すると、見栄えの問題が生じてしまうのです。

このような場合の対応方法について、わかるかたがおりましたら、教えて頂けないでしょうか？

回答No.3

ORUKA1951 · ベストアンサー

まず、Validatorはチェックすることでよいです。
　よく初心者は仕様とデザインは両立できないと考えてる方がいらっしゃいますが、それはまったく逆です。そもそもHTMLのプレゼンテーション能力には限界があるのでHTMLの文書構造を無視したマークアップが行われてきました。それではHTMLの理念・目的と反するために、HTMLは文書構造を記述し、HTMLよりもはるかに能力のあるスタイルシートにプレゼンテーションを任すことになったのです。
　⇒14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

　HTMLさえ、きちんと書かれていれば、そうでないHTMLよりも、はるかに簡単に様々なデザインが可能になるのです。

★a内にテキストを書かない一番の問題は、サイトを訪問するのはscreen端末だけではないということです。スタイルシートを読まない携帯電話や点字端末、スクリーンリーダー、テキストブラウザ・・・そして何よりも検索エンジンがそれを利用してクロールできません。
『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』
　添付図は上記サイトをLynxで表示したものです。

【対策】
★colorをtransparent(透明)にする。
★text-indentを大きくしてoverflowで消す。
★contentプロパティで画像を追加する。
★画像として配置しalt属性で代替文字を記述する。
　:hoverで画像をhiddenにしてもよい
など、方法はたくさんあります。

　HTML4.01strict、XHTML1.0strict、XHTML1.1で正しいHTMLを作成する。Validatorで必ずチェックする。そのうえで、スタイルシートでプレゼンテーションを指定するという方向でよいですよ。
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
　それが実際は一番楽です。(^^)

お礼

Validatorを使ってみます。

わかりました。a内にテキストを表示するようにします。

回答No.4

shockatz

これ、liタグとaタグの扱いが逆じゃないすか？
普通よくあるパターンだと、aタグを"display:block"にして、widthとheightを持たせ、background-imageで画像を指定する。
そのうえで、正しくテキストノードをセットし、text-indentで-1000emとかの値をセットするなりして、ブロック外にテキストを吹っ飛ばしたり、とにかく不可視状態にします。
要は、テキストだけでもメニューが作成できるようにしておいて、背面に画像を出し、テキストを消すと。

<ul id="menu">
<li><a id="menu1" href="http://www.test.com/">トップページ</a>
<li>...</li>
</ul>

a#menu1 {
　display:block;
　width:120px;
　height:32px;
　text-indent:-1000px;
　background-image:url('../images/menu1.png')
}

<a>内部へメニュー画像を直貼りするは昔の話。今はSEO的に不利な手法は常識的にとりません。
まあ、メニューに画像を使う時点で、マークアップ厨から見たらSEOもクソもないですが。

お礼

ありがとうございます。

いろいろと混乱しておりまして・・・

でも、なんとか改善できそうです！！

回答No.2

Gotthold

a要素の中に画像をimg要素で入れて、テキストはalt属性に書けば良い。

お礼

わかりました。試してみます！

回答No.1

noname#189141

どこのサイトでチェックされているか分かりませんが、そのサイトのチェックでエラーをなくすことの意味を考えてください。
そのサイトに解説等ないでしょうか？

CSSでボタンの画像を出している時点で、一部のブラウザ、音声読み上げソフトなどに対応できない状態であることは認識されていますか？
それを良しとするならエラーは無視してください。
（もちろん対応しないブラウザからはアクセスできない可能性があります）

無理矢理するなら・・・
<a>&nbsp;</a>
<a>　</a><!-- 全角スペース -->
というごまかしも出来るかもしれませんが、そのサイトが対応しているか不明ですし、リンクが踏めないブラウザが残るのは変わりません。

お礼

文法チェックのサイトはここです！
http://cetus.sakura.ne.jp/htmllint/htmllint.html

＞CSSでボタンの画像を出している時点で、一部のブラウザ、音声読み上げソフトなどに対応できない状態であることは認識されていますか？

一応、認識はしてます。
しかし、今の状態から変えるのが面倒なので、後回しで考えていました。