リンクの書き方についての疑問

このQ&Aのポイント
  • <a href='http://www.htmllint.net/html-lint/htmllint.html'>htmllint</a>でリンクの書き方をチェックした結果、<a href='#写真'>#写真</a>の書き方にエラーが出るようです。
  • エラーメッセージは「<A> のアンカー名 `XXXX` 中に安全でない文字が含まれています。 *3*」というものです。
  • 実際には<a href='http://www.uso800.ac.jp/fake.html#foobar'>URIと一緒に<a href='#foobar'>#foobar</a>のように指定することもありますが、なぜ<a href='#写真'>#写真</a>が問題なのか疑問です。
回答を見る
  • ベストアンサー

<a href="#写真">

http://www.htmllint.net/html-lint/htmllint.html で、チェックしたのですが、 ページ内でリンクを張りたいときは、 <a href="#写真"> 写真 </a> としていますが、 この書き方はよくないのでしょうか? -------------------------------------------------------------------------- <A> のアンカー名 `XXXX` 中に安全でない文字が含まれています。 *3* -------------------------------------------------------------------------- のエラーに該当するようです。 予想としては、 「#」の部分がエラーとして引っかかっているようです。 でも解説では、 -------------------------------------------------------------------------- <a href="http://www.uso800.ac.jp/fake.html#foobar"> あるいは <a href="#foobar"> のようにURIと一緒に指定します -------------------------------------------------------------------------- となっているから、#は使っても問題ないように思えるのですが、 <a href="#写真">の何が問題なのでしょうか?

  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.2

下記の2点を守る必要があります。 ・URLは英数で指定する。 ・リンク先にはURLで指定したidを付与する。 <a href="#photo">写真</a> ・ ・ ・ <div id="photo> 写真 </div>

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

そこにポインターをあわせれば分かるように、ブラウザはURLの一部として解釈してサーバーに要求します。  当然URLに含まれるべきでない文字は使用できません。  URLで使用可能な文字、使用できない文字( http://www.ipentec.com/document/document.aspx?page=web-url-invalid-char )  ページ内アンカーをターゲットにするのでしたら <a href="#photo">写真へ</a> ・・・・・・・ <div class="photo">  <h2>写真</h2>  <p><img src="" width="" height="" alt=""></p> </div> とか

関連するQ&A

  • <A HREF=""></A>でリンクしません

    いくつかあるページのうち一つのページだけ <A HREF="xxx.html">xxxx</A>のリンクが、マウスで押しても 何も反応しません。どのリンクもダメです。 ソースをチェックに掛けてみたのですが特に問題もないようです。 このような場合どのようなことが考えられますでしょうか。 アドバイスお願いいたします。

  • 文字参照「#」を含むURI 正しくない?

    アンカータグなどでCGIへのリンクを指定するとき、 xxx.cgi?param1=aaa&param2=bbb などというURIの場合、そのままHTML内に書くと「&」記号が文法エラーになるので、「&amp;」などに置き換えますよね。 これを、汎用的なモジュールや適当なサブルーチンを使って、記号などを一括で「&#38;」のような文字参照に置き換えています。 ところが、 xxx.cgi?param1=aaa&param2=bbb#name のように(パラメーターではなく)アンカー名が入っていると「#」記号が「&#35;」に置き換えられるのですが、Another HTML-lint でチェックしてみると、この部分が正しくないと警告されてしまいます。 -------------- <A> の HREF 属性の URI 中の実体参照 `&#35;` は使用できない文字 `#` です。 -------------- 単純に、実体参照はデコードしてから評価し、#記号はURIとして認められるように思うのですが、違うのでしょうか。 「#記号はURIとして認められる」という私の認識自体は間違っていないと思うのですが、なぜ実体参照にするとNGなのでしょう。「実体参照はデコードしてから評価」という認識が、間違っていますか? どなたか、ご教授お願いいたします。 (※ 文中の「&」記号が、ここに投稿するとなぜか化けるので全角にしてあります)

    • ベストアンサー
    • HTML
  • CGI検索エンジンをHTMLに

    コスモナビの検索エンジンをHTMLで書こうと無理しているのですが、 Another HTML-lint gatewayのチエックで <A> の HREF 属性の URI `./navi.cgi?mode=view&class=0&part=1` は正しくない書式です。となります。正しい記述はどのようになりますか?。

    • ベストアンサー
    • HTML
  • <ul>〜</ul> 内に普通のテキストを書くことはできません。と診断されます

    Another HTML-lint gateway「http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html」にてHTML文法チェックを行ったところ以下のような診断をされました。 <ul>〜</ul> 内に普通のテキストを書くことはできません。(重要度9) なぜこういう診断がされてしまうのか原因がわかりません。 専門のサイトなどで<li>や<ul>について確認しましたが特に問題のある箇所が自分では特定出来ませんでした。 診断されたHTMLコード(抜粋)は以下になります。 <div id="sidebar"> <div id="sidebar_top"> <div id="sidebar_contents"> <p>&nbsp;</p> <p><img src="navigator.png" alt="" width="93" height="18" vspace="5" /></p> <h3>Categories : </h3> <div class="nav"> <ul> <li><a href="top">TOP</a></li> </ul> <h3>コンテンツ</h3> <ul> <li><a href="01">コンテンツ(1)</a></li>   <li><a href="02">コンテンツ(2)</a></li>   <li><a href="03">コンテンツ(3)</a></li>   <li><a href="04">コンテンツ(4)</a></li>   <li><a href="05">コンテンツ(5)</a></li> </ul> </div> </div></div></div> ※XHTML1.0 Transitional、UTF-8 これでは情報足りないようでしたら仰って下さい。 何卒、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • Another HTML-lint gatewayでHTML文書の文法

    Another HTML-lint gatewayでHTML文書の文法をチェックしましたが、次の項目の修正方法がわかりません。 HTMLヴァージョンは「XHTML1.0 Transitional」(DreamweaverCS5) (1)空要素タグ <img> は <img /> として閉じなければなりません <p>    <img src="image/otaxoutline.JPG" width="480" height="360" alt="oxox"></p> (2)空要素タグ <img> の要素には空白さえも含めることはできません p class="menu-left"><a href="http://twitter.com/xxxx"><img src="image/otaxtwitter.jpg" width="85" height="45" alt="oxox"> </a></p> (3)空要素タグ <br> の要素には空白さえも含めることはできません (4)空要素タグ <br> は <br /> として閉じなければなりません by <a href="http://www.automatic-link.net/" target="_blank">oxox</a><br> (5)空要素タグ <hr> の要素には空白さえも含めることはできません (6)空要素タグ <hr> は <hr /> として閉じなければなりません <p class="center">                 <a href="http://www.otax81.com/FormMail/contact/FormMail.html"><img src="image/otaxtoiawaefooter.jpg" width="435" height="171" alt="footer問合せ"></a></p> <hr> <参考> http://openlab.ring.gr.jp/k16/htmllint/htmllint.html http://otax81.com/

  • phpのバージョンの違いのエラー

    すみません。 ページの前後を簡単に行き来するためにぺ-ジ名をpage40みたいにして <のリンクが押されれば 40-1=page39 >のリンクが押されれば 40+ 1=page41 のようにしたのですが、バージョンを8.0にしたら、以下のようなエラーが出ました。エラーの内容自体は、型が異なるので計算できない?ですよね? どう修正すればいいのかわからないので教えてください。 Fatal error: Uncaught TypeError: Unsupported operand types: string - int in コード <div class="pre-cntrl"> <?php $url = rtrim($_SERVER["REQUEST_URI"], '/'); $uri = substr($url,-2); if(ctype_digit($uri)) { $pre =$uri-1; echo '<a href="page' . $pre . '"><i class="fas fa-chevron-left"></i></a><br />'; } else { $uri = substr($url,-1); $pre=$uri-1; echo '<a href="page' . $pre . '"><i class="fas fa-chevron-left"></i></a><br />'; } ?> </div>

    • ベストアンサー
    • PHP
  • これはバグか僕の無知か。(Another HTML lintの採点)

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2. <html> 3. <head> 4. <meta http-equiv="Refresh" content="0;URL=mypage.php3?n=12345&amp;c="> 5. <title>教えてgoo-リダイレクト</title> 6. </head> 7. <body> 8. 9. <p> 10. 11. 自動で移動しない場合は 12. <a href="mypage.php3?n=12345&amp;c=">マイページ</a> 13. アクセスしてみてください。 14. 15. </p> 16. 17. </body> 18. </html> をAnother HTML lint(htmllint.cgi 1.17 / htmllint.pm 3.17)にかけた所、 3: line 4: `&c` は不明な実体参照です。 → 解説 114 3: line 4: `&c` は不明な実体参照です。 → 解説 114 (ほかは省略) というエラーが帰ってきました。 これは、バグでしょうか? それとも私の知識不足でしょうか? ----- http://oshiete1.goo.ne.jp/kotaeru.php3?q=1013847 の#3への補足も読んでいただけると幸いです

    • ベストアンサー
    • HTML
  • 文法チェックの<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>にテキストを入力すると、見栄えの問題が生じてしまうのです。 このような場合の対応方法について、わかるかたがおりましたら、教えて頂けないでしょうか?

    • ベストアンサー
    • CSS
  • iアプリのダウンロード回数のカウント

    iアプリのダウンロードサイトで、実際にそのアプリが何回ダウンロードされたかをCGIを利用してカウントできないか検討しています。 iアプリのダウンロードは通常、 <object ・・・・> XXXX </object> <a ijam="#XXXX" href="YYYY.html"> などとし、オブジェクトタグを読みに行くような作りになりますが、ijamの後にあるhrefは、通常実行されません(アプリ非対応機種などで実行される) アンカーからCGIを実行させて、CGI側で実行回数をカウントするとともに自動でダウンロードさせるようなことはできないでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • CGI
  • HTMLアンカーがFirefoxでうまく飛びません。

    HTMLアンカーがFirefoxでうまく飛びません。 HTMLアンカーを指定して別ページからもリンクできるようにしたいのですが、IEではきちんとアンカーの所に移動するのですが、Firefoxだと、ページの一番下に飛んでしまいます。 ソース************************************************* <a name="a1" id="a1"></a> あいうえお ******************************************************* <a href="../index.html#a1">あいうえお</a> ******************************************************* Firefoxだけうまく行きません。 何が問題なのでしょうか?

    • ベストアンサー
    • HTML