ウェブページ上のリンクまたはアンカー
ウェブサイトと他の形式のコミュニケーションメディアとの間の主要な差別化要因の1つは、「リンク」またはハイパーリンクのアイデアであり、ウェブデザインの用語では技術的に知られています。
今日のWebを作るのに役立つだけでなく、リンクや画像はWebページ上で最も一般的に追加されるものです。 残念ながら、これらのアイテムは簡単に追加できます( 基本的なHTMLタグは 2つだけです)。プレーンテキストのページに興奮とインタラクティブ性をもたらすことができます。 この記事では、ウェブページにリンクを追加するための実際のHTML要素である(アンカー)タグについて学習します。
リンクの追加
リンクはHTMLではアンカーと呼ばれ、それを表すタグはAタグです。 一般的に、人々は単にこれらの追加を「リンク」と呼んでいますが、アンカーは実際にはどのページにも追加されています。
リンクを追加するときは、そのリンクをクリックまたはタップ(タッチスクリーン上にある場合)すると、そのリンク先のWebページアドレスを指す必要があります。 属性でこれを指定します。
href属性は "ハイパーテキスト参照"を表し、その目的はその特定のリンクをどこに送るかを指示することです。 この情報がなければ、リンクは役に立たない。ブラウザにユーザをどこかに持ってくるべきだが、どこかにあるべき場所に目的地情報がない。 このタグとこの属性は両立しています。
たとえば、テキストリンクを作成するには、次のように記述します。
したがって、About.com Web Design / HTMLホームページにリンクするには、次のように記述します。
画像を含むHTMLページのほとんどすべてをリンクすることができます 。 およびタグを使用して、リンクにするHTML要素または要素を囲みます。 href属性を省略してプレースホルダリンクを作成することもできますが、href情報を後で更新してください。そうしないと、リンクは実際には何もしません。
HTML5では、段落やDIV要素などのブロックレベルの要素をリンクすることができます。 分割または定義リストのような、より大きな領域にアンカータグを追加すると、その領域全体が「クリック可能」になります。 これは、ウェブサイト上でより大きく、指にやさしいヒット領域を作成しようとするときに特に役立ちます。
リンクを追加するときに覚えておくべきこと
- 最後のタグが必要です 。 あなたがそれを含むのを忘れると、そのリンクに続くものは、別のリンクがタグを閉じるまで、リンクされます。
- ほとんどの場合、大きなテキストブロックではなく、単一のイメージと短いテキストをリンクすることが最善です。 リンクは、読みにくい色や下線のスタイルをページに追加することができます。 もちろん、CSSを使用してこれらのリンクスタイルを変更したり、色を編集したり、下線を削除したりすることはできますが、この現実に留意するのは良いことです。
- 彼らが悪くならないようにあなたのリンクをチェックすることを確認してください。 Link Rotを使用すると、ユーザーと検索エンジンの両方がサイトを無効とみなすことができます。 リンクチェッカーを定期的に使用して、ページのリンクを確認します。 これは、サードパーティのサイト(あなたが管理していないサイト)にリンクしているときや、時間の経過とともにページが変更されてリンクが崩れてしまう場合に特に当てはまります。 リンクチェッカーはこれらのデッドリンクを見つけて、必要な更新を行うことができます。
- あなたのリンクの「ここをクリック」のようなテキストを避けてください。 覚えておいてください。タッチスクリーンのユーザーは「クリック」できないため、テキストは過去の時代の製品のように感じられ、今日のマルチデバイス中心のWebでは実際には関係ありません。
他の興味深いタイプのリンク
Aエレメントは別の文書への標準リンクを作成しますが、あなたが興味を持っているかもしれない他のタイプのリンクがあります:
- 内部リンクまたはアンカー - これは、必ずしもトップではなく、ウェブページ内のどこかへのリンクです。
- イメージマップ - イメージマップを使用すると、イメージの特定の領域にマップされたイメージにリンクを作成できます。 これらは、ゲームや創造的なナビゲーションに使用できます。 地図上の領域がクリック可能な地図でよく見られます。 現代のほとんどのWebサイトでは、モバイルデバイスで問題を引き起こす可能性があるため、イメージマップはほとんどのWebサイトで使用されていないことに注意してください。
- 要素 - この要素は、他の文書やページを現在のものに関連付けるために使用されます。 ウェブページにクリック可能な領域は作成されませんが、理解すると便利です。