HTMLタグ間にはさまない場合についての質問

質問

アンカータグで特定のページの特定の場所にリンクさせる時に、リンク先に <a id="名前" name="名前"></a>のように開始タグと終了タグの間に何もはさまない場合でもIE、Firefox共に機能はしていますが、この何もはさまないということについて質問です。間に何もはさまないことはWeb標準としてはOKなのかNGなのか、基本的な質問で恐縮ですが教えていただきたいです。DWCS4ではアンカーの挿入時に間にはさむことを前提としてなさそうに思うのですが。。私がDWの使い方をわかっていないだけなのかもしれませんが。
ちまたではよくスクリプトの吐き出しなどを意図した何もはさまないdiv要素なども見かけますが。
よろしくお願いします。

回答No.3

abril · ベストアンサー

> 挿入パネル〈一般〉「アンカーポイント」にて挿入すると内容を挟まないaタグのid・name属性のタグと指定した要素のタグが入れ替わって

Dreamweaver CS4ではなく8なのですが、上記のやり方だとテキストや画像部分を選択しておいてもその要素自体が削除されて”<a id="hoge" name="hoge"></a>”に置き換わってしまうのですね…この様な挙動になっているとは、始めて知りました。もしかしたら環境設定などでこのあたりの仕様を変更できるのかもしれませんが、DWは普段コーディングのメイン・ツールとしては使用していないので詳しい事はわかりません。

要素を選択した状態でCtrl＋Tで「クイックタグ編集」のメニューを出して<a id="hoge" name="hoge">と入れて実行すれば、”<a id="hoge" name="hoge">要素</a>”と挿入されますが。それでも手間ですか？

> idはあくまで属性である以上、要素としての意味合い上リンクと関係のない要素にリンク用途でidを置くことの不自然さ(リンク用途の要素はaタグですよね？)を感じるのですが）、

aそのものは、リンクという意味ではなくあくまでリンクの出発点と到達点とを示す為のアンカーです。
そもそも何故”そこ”にアンカーが打たれる必要があるのか、という逆の考え方もできると思いますよ。同一ページ内で、そこにしかない特別な意味合いがあるからアンカーを打っておきたいのでは？であれば、一意であるid属性が付いている様な箇所だからこそ、そこを参照して欲しいのだと考えれば何ら不自然ではないのでは？

考え方について、下記など参考になるかと思います。
【参考】http://w3g.jp/webstandards/optimize/anchor

お礼

ご回答ありがとうございます。
はい、おっしゃるとおり要素が置き換わってしまう挙動になっています。環境設定の調整の可否は今はまだ勉強不足で分かっていませんが、挿入の仕方自体は某社のリファレンスブックにも同じやり方で紹介されていますし、サンプルファイルの記述もタグ間の内容なしになっています。 「自分の知識力」 vs 「最新版CS４の吐き出すコード」 ということで、 「素人の私」 vs 「何しろ最新版」 ということからやや困惑したのがそもそもの発端です。
クイックタグ編集は今初めて知りました。コードビューで入力する時の挙動と同じような感じがしますが、いちいちデザインビューとコードビューとをマウスで切り替えなくてもいいぶん、少し手間感がマシになった気がします。
参考URLを見させていただき、リンク目的のためだけであっても要素内にidを置いても何ら差し障りはないことがわかりました。ただ、後方互換よりは前方互換とはいえ、一応互換性は優先させておきたいのでクイックタグ編集でやっていこうかと思います（おそらくIBMのような所の指針では後方互換が必須なのでは？）。
後方互換無視でいくならタグセレクタで要素を選んだ時点で（あるいはその行の適当な所にカーソルを置くだけで）、プロパティインスペクタに表示されるid名を入力する欄にid名を入力するだけで済むからかなり楽ですね。これなら今の環境でも楽チンに感じます。
ところでabril様のメイン・ツールはどのようなものでしょうか？私、効率さえ向上すれば何らDWにこだわるつもりもないですが。(笑)
「アンチオーサリングツール依存」⇒「オーサリングツール徹底活用」への転換は何と言っても効率アップありきが必須の前提ですので。

回答No.4

abril

ANo.3です。レスを拝見しました。

> 後方互換よりは前方互換とはいえ、一応互換性は優先させておきたいのでクイックタグ編集でやっていこうかと思います（おそらくIBMのような所の指針では後方互換が必須なのでは？）。

後方互換が必須か否かはわかりかねますが、指針というのは例えばIBM アクセシビリティ・センターのコンテンツの事などを仰っているのでしょうか？
上記サイトの中では確かにidへのリンクではなく、aでアンカーを打ってリンクさせてはいる様です。ただ、

<a name="easyweb"></a><p><b>Easy Web Browsing</b></p>

…などというソースを見てしまうと、アンカーを打つにしてももうちょっとましなマークアップがあると思うんですけど…というのが正直な感想です。実際上記の記述のあるコンテンツを文法チェッカーにかけるとちょっと悲惨な結果になってしまいますし…（上記サイトに対して他意があるわけではありませんので、これ以上は遠慮させて頂きます）ただ言えるのは、後方互換であってもできる限り適切なマークアップになる様に心がけた方がより良いでしょう、という事ですね。

> abril様のメイン・ツールはどのようなものでしょうか？私、効率さえ向上すれば何らDWにこだわるつもりもないですが。(笑)
> 「アンチオーサリングツール依存」⇒「オーサリングツール徹底活用」への転換は何と言っても効率アップありきが必須の前提ですので。

私自身は単に、HTML作成をメモ帳で始めたという経緯の為、Dreamweaverの様な総合的オーサリング・ツールをメインにするよりはエディタでコーディングして補助的に各種ツールを使うというやり方の方が「やりやすい（＝私自身にとって効率が良い）」のでそうしております。現在コーディングにメインで使用しているのはフリーのHTMLエディタです。コード編集にいくらか特化した機能が付いている程度のものですが、個人的に使い勝手が良いので愛用しています。ちょっと差し障りがあるので具体的な名前は控えさせて頂きますが。後は必要に応じて、所謂J○ditや秀○の様な高機能エディタ、テキスト置換ツール、Dreamweaverなどを補助的に使用しています。

ただ、コーディングの作業が一人に任されている様な場合はこの様なやり方でも支障ないのですが、大規模サイトのボリュームの多いコンテンツのメンテナンスを常に複数で対応しなければならない様な場合には、やはりDreamweaverのテンプレートやライブラリの様な機能は大いに有用なのではないかと思います。

質問者様の置かれている状況（＋質問者様のオーサリング・ツールに対する理解度）によって、Dreamweaverをメインにしてばりばり使いこなす方が効率アップに繋がるか、それほどでもないのか、というのは変わってくるでしょう。

お礼

ご回答ありがとうございます。
確かに、[http://www-06.ibm.com/jp/accessibility/solution_offerings/EasyWebBrowsing.html]のページでは内容無しのaタグになってますね。。きちんとh2などにはさんで内容を間に入れているものもありますが、ばらついていますね。何も挟まないdivもありますし。。更新か何かで下請けの担当が複数にまたがったりしたんでしょうかね。あるいは何か意図が別にあるんでしょうか。実はIBMのページのソースをちゃんと見て言ったわけではなく、以前に研修でお世話になった開発者の方が受けた仕事で、デザインやレイアウトよりもアクセシビリティについてチェックがより厳しかったと間接的に聞いていただけなので、勝手に後方互換のことと思ってました。。
エディタは色んな種類があるみたいですね。見ていたらDWと似たような機能も見かけますね。私はまだ個人的な勉強の身でして、まだ自分にどちらが合っているかはよくわからないですが、これまでは効率よりも自分自身で理解することを優先していたので全て手打ちだったんですが、DWを一通り使いこんでみてどのようなツールがしっくりくるのか考えていきたいと思います。
ありがとうございました。

補足

すみません、リンクURLがうまくはれませんでした。。
Googleで「Easy Web Browsing」を検索してはじめに出てくる【http://www-06.ibm.com/jp/accessibility/solution_offerings/EasyWebBrowsing.html】のページです。

回答No.2

ORUKA1951

＞DWCS4ではアンカーの挿入時に間にはさむことを前提としてなさそうに思うのですが。
　確かにそうですが、HTMLは元々、プログラムに頼らないで作成することを（テキストエディタで作成すること）を前提としています。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという・【中略】・テクニックには思わぬ副産物があった。こうしたテクニックは、・【中略】・すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。

* ・・・【中略】・・・
* HTMLでページを作らずにプログラムに頼る。

こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで、HTML4.01仕様書(邦訳(14.1スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

　icやnameは、文書中の特定の位置を示すアンカーですから、HTMLの趣旨から言うと、内容のないアンカーはありえないはずです。
　ですので、
<div>
　　<a id="ID"></a>
　　　<h2>見出し</h2>
ではなく、
<div id="ID">
　　　<h2>見出し</h2>
とか
<div>
　　　<h2 id="ID">見出し</h2>
あるいは、
<div>
　　<h2><a id="ID">見出し</a></h2>
となるべきものです。
【参考サイト】
ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0
　 http://www.zspc.com/documents/wcag10/#gl-facilitate-navigation

　DWであっても、アンカーをつける場合、その要素を選択して付ければ出来ますので。

　要素名や、クラス名、ID等は、著者しか知らない文章の意味・内容に関わるものですから、それはWEBオーサリングツール(プログラム)では、判断できないものですから、そのようなツールを使う限り、テキストエディタで作成する以上に、要素や属性などHTMLに対するきちんとした理解が必要なのです。HTMLを知らなくても作成できるのではなく、HTMLをより深く知っていないとそのようなツールは使えないのです。この点は多くの誤解がある。

★HTMLの仕様ではなく、W3Cのウェブコンテンツ・アクセシビリティ・ガイドライン 1.0 ( http://www.zspc.com/documents/wcag10/ )としては、【ＮＧ】ということです。

お礼

ご回答ありがとうございます。
タグのイロハを勉強し始めてまだ4か月ほどですが、こないだまではオーサリングツールに頼らないことにこだわってテキストエディタのみの手書きでHTMLとCSSを書いていました。そろそろ制作スピードを意識したいのでDWの機能をフルに使いこなせるようになることを考えたのですが、CS4では吐き出すコードもだいぶきれいになってきていると聞いていますが、やはり完全に意図したようにはならないみたいですね。。
＞HTMLの趣旨から言うと、内容のないアンカーはありえないはずです。//
やはり、内容なしのタグはNGですか。このような不自然なタグのレイアウトをたまに見かけるのとDWで内容のないアンカーポイントを吐き出すことから、疑問に思っていましたが。
ありがとうございます。

＞DWであっても、アンカーをつける場合、その要素を選択して付ければ出来ますので。//
タグセレクタ及びコードビューから直接親要素を選択した場合、挿入パネル〈一般〉「アンカーポイント」にて挿入すると内容を挟まないaタグのid・name属性のタグと指定した要素のタグが入れ替わってしまいますし、タグ間の適当な位置にカーソルを置いて実行した場合はその位置に同様のaタグが挿入されます。
<親要素><a id="名前" name="名前">内容</a></親要素>とaタグを置きたい場合には行頭にこの挿入の仕方を実行した後でどうしても終了のaタグをコードビューからいじることになり、不便です。
また、親要素にidを指定してリンクの用途に使う場合、機能自体には問題なさそうですが、aタグというアンカーのタグをわざわざ差し置いてリンクだけのためにブロック要素内にidを指定するのはコーディングのレイアウト上なんとなく意味合いが違うような気がして（親要素に置くidはWebデザインのレイアウト用に残しておいた方がいいような気がするのと、idはあくまで属性である以上、要素としての意味合い上リンクと関係のない要素にリンク用途でidを置くことの不自然さ(リンク用途の要素はaタグですよね？)を感じるのですが）、何となく腑に落ちないので今の所はめんどくさいけど終了タグをわざわざコピペして使っています。ただ、効率アップを目的に本ツールを使っている以上、1つでも手間を省けるようにしたいので、まだちょっと納得がいきません。
引き続き効率の良い方法を募集します。

回答No.1

zeeeg

Web標準としては、以下ご参考の通り「はさんだ方がいいよ」
程度のものらしいです。

DTDでは
「A要素は開始タグと終了ダグは必須で内容にA要素以外のインライン要素を含むことができる」
としかなくテキストを含まなければならないとまではされていません。
内容が空でも文法的には間違いではないようです。

しかしW3CのHTML 4.01仕様書（邦）の注意書には
「ユーザエージェントは、空のA要素が生成するアンカーも発見できるべきだが、発見できないユーザエージェントもある。」
文法上間違いではなくても内容が空では何のためのタグなのかわかりませんし不具合が全くないとまでは言いきれないようです。

ちなみに、WebブラウザLynxの古いバージョンでは
アンカータグに文字をはさまないと動かなかったらしいです。
（最新バージョンでは動く）

参考URL：

http://blog.livedoor.jp/cola_papa/archives/7314920.html

お礼

早速のご回答ありがとうございます。
やはりはさんでおいた方が無難なようですね。ローカルサイドの環境によりけりではアクセシビリティダウンの可能性ありということでしょうか。
とても参考になりありがとうございました。

今ドリームウィーバーCS4の使い方を練習中なのですが、アンカーポイントの挿入をすると間に内容を挟まない形となり、いちいちコードビューから手直しするのが面倒なのですが、これはこのアプリの仕様上は仕方がないのでしょうか？
この点につき、引き続きアドバイスを募集いたします。
よろしくお願いします。